Object.observe简介

Object.observe 是一个提供数据监视的API,在chrome中已经可以使用。是 ECMAScript 7 的一个提案规范,官方建议的是“谨慎使用”级别,但是个人认为这个API非常有用,例如可以对现在流行的MVVM框架作一些简化和优化。虽然标准还没定,但是标准往往是滞后于实现的,只要是有用的东西,肯定会有越来越多的人去使用,越来越多的引擎会支持,最终促使标准的生成。

可以做什么

从observe字面意思就可以知道,这玩意儿就是用来做观察者模式之类的东东。

简单地说,就是观察一个对象的变化,在被观察者变化时作出一些回调。

实际应用中,可以优化数据模型(model)和网页试图(view)的双向绑定。

语法

语法很简单:

Object.observe(obj, callback)
obj

obj就是你要监听的数据模型(例如一个ajax接口对应的数据)

callback

callback就是数据模型变化后触发的回调(例如网页视图的变化)

callback函数的参数形式
  • name: 被修改的属性名称
  • object: 修改后该对象的值
  • type: 表示对该对象做了何种类型的修改,可能的值为"add", "update", "delete", "reconfigure"
  • oldValue: 对象修改前的值。该值只在"update"与"delete"有效

实例:

感兴趣可以跑一下下面简单的代码,你就知道各个参数的作用了

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            var obj = {};
            Object.observe(obj, function (changes) {
                changes.forEach(function (change) {
                    console.log('变化的属性:  ' + change.name);
                    console.log('变化的类型?: ' + change.type);
                    console.log('旧值:  ' + change.oldValue);
                    console.log('新值:  ' + change.object[change.name]);
                });
            });
        </script>
    </body>
</html>

实现MVVM

当然这里不是要取代MVVM框架,只是想通过Object.observe来实现一些性能上的优化。

Angular中有一个叫“脏值检查”的东西,大概的原理就是只要任何时候数据发生了变化,这个库都会通过一个digest或者change cycle去检查变化是否发生了。在Angular中,一个digest循环意味着所有所有被监视的表达式都会被循环一遍以便查看其中是否有变化发生。

用以下代码,大大优化了脏值检查

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>real MVVM</title>
    </head>
    <body>
        <form id="person">
            <input type="text" name="name" placeholder="名字">
            <input type="text" name="age" placeholder="年龄">
        </form>

        <script>
            var view = document.getElementById('person');
            var infomation = {};

            function bind(model, view) {
                Object.observe(model, function (changes) {
                    changes.forEach(function (change) {
                        var property = change.name;
                        document.getElementsByName(property)[0].value = change.object[property];
                    });
                });

                Array.prototype.slice.call(view.getElementsByTagName('input')).forEach(function (input) {
                    input.addEventListener('input', function (e) {
                        var input = e.target;
                        if (input.tagName.toLowerCase() !== 'input') {
                            return;
                        }
                        var property = input.getAttribute('name');
                        model[property] = input.value;
                    });
                });
            }

            bind(infomation, view);
        </script>
    </body>
</html>

脏值检查在任何数据可能发生变化的时候都必须要运行。这很明显并不是一个非常鲁棒的方法,并且任何实现脏值检查的途径都是有缺陷的(例如,在轮询中进行检查可能会造成视觉上的假象以及涉及到代码的紊乱情况)。脏值检查也需要注册一个全局的观察者,这很可能会造成内存泄漏,而Object.observe()会避免这一点。

参考

http://www.html5rocks.com/en/tutorials/es7/observe/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏蜉蝣禅修之道

fs学习笔记(一)

2286
来自专栏叁金大数据

自学Python五 爬虫基础练习之SmartQQ协议

  BAT站在中国互联网的顶端,引导着中国互联网的发展走向。。。既受到了多数程序员的关注,也在被我们所惦记着。。。

1953
来自专栏dotnet core相关

MVC基本开发介绍 (1)列表展示

现在如果用.net 的解决方案来做网站或者是网站的后台管理系统,MVC 应该是比较流行的。

682
来自专栏Python绿色通道

Python爬虫:把爬取到的数据插入到execl中

前面我们把大量数据已经爬取到了本地,但这些数据如果不存储起来,那么就会变得无效.开始本文之前,请确保已经阅读。

1293
来自专栏北京马哥教育

练了一年再来总结的 Vim 使用技巧

1393
来自专栏AzMark

Python 学习之目录递归

1024
来自专栏安恒网络空间安全讲武堂

浙江省首届网络安全大赛决赛Write Up

直接打开pwd.docx,发现是空的,那么将其作为zip 解压,在其中找到了一张二维码

922
来自专栏ThoughtWorks

秒懂ReactJS | TW洞见

今日洞见 文章作者/配图来自ThoughtWorks:贾朝阳。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任何媒体、网...

36110
来自专栏CRPER折腾记

CSS-Next : CSS预处理器简单写法的替代者, 想了解下么?

借助相关的插件我们可以把新的特性降级到 css3乃至一些特性降级到css2.1...无缝过渡

1002
来自专栏前端儿

JavaScript中常见的十五种设计模式

在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}),而基于JS中闭包与弱类型等特性,在...

1331

扫码关注云+社区