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 条评论
登录 后参与评论

相关文章

来自专栏CRPER折腾记

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

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

12320
来自专栏Python绿色通道

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

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

25730

在Atom中设置Python开发环境

当然,网络上有很多很棒的文本编辑器。Sublime Text,Bracket,Atom等。就我个人而言,我一直都是Atom的粉丝,因为它是完全免费的,并且它有...

41080
来自专栏JackieZheng

AngularJS入门心得3——HTML的左右手指令

  在《AngularJS入门心得1——directive和controller如何通信》我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计...

21250
来自专栏java一日一条

Web前端面试题目及答案汇总

以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢...

3.5K20
来自专栏牛客网

考点总结:互联网校招技术岗都考些什么?数据结构算法游戏 + 场景c++面向对象javaJVMSpringandroid数据库计网线程安全linux前端询问面试官

数据结构 红黑树 pk 平衡二叉树 hash表处理冲突的方法 算法 手写 最长无重复字符子串 链表的增、删、查、逆序 数组实现队列,要求可以动态扩展,保证较高的...

38170
来自专栏前端儿

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

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

17910
来自专栏北京马哥教育

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

15830
来自专栏用户2442861的专栏

Java Web 中使用ffmpeg实现视频转码、视频截图,javaffmpeg

http://www.cnblogs.com/dennisit/archive/2013/02/16/2913287.html#!comments

77610
来自专栏dotnet & java

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

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

8920

扫码关注云+社区

领取腾讯云代金券