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

相关文章

来自专栏数据结构与算法

BZOJ1509: [NOI2003]逃学的小孩(树的直径)

第一行是两个整数N(3  N  200000)和M,分别表示居住点总数和街道总数。以下M行,每行给出一条街道的信息。第i+1行包含整数Ui、Vi、Ti(1...

1002
来自专栏tkokof 的技术,小趣及杂念

HGE系列之六 管中窥豹(资源管理)

记的上次浮光掠影的讲了一些HGE中的基础类别,不知大家了解了多少,仔细看过的朋友肯定知道当时在讲述一个类别的构造函数时我打了个马虎,直接略过了,原因说的好像是...

611
来自专栏美团技术团队

Android自定义Lint实践2——改进原生Detector

上篇博客《Android自定义Lint实践》中我们介绍了美团App如何使用自定义Lint进行代码检查。 在使用Lint的过程中,我们陆续又发现原生Lint的一些...

2764
来自专栏比原链

剥开比原看代码13:比原是如何通过/list-balances显示帐户余额的?

Gitee地址:https://gitee.com/BytomBlockchain/bytom

461
来自专栏恰同学骚年

.NET基础拾遗(4)委托、事件、反射与特性

  委托这个概念对C++程序员来说并不陌生,因为它和C++中的函数指针非常类似,很多码农也喜欢称委托为安全的函数指针。无论这一说法是否正确,委托的的确确实现了和...

752
来自专栏HTML5学堂

一步步教你弹性框架-下篇

HTML5学堂:本文继续为大家讲解弹性框架,在前两篇文章当中,我们从最基本的来回运动,讲解到缓冲运动、有摩擦力的运动。基本实现了弹性动画效果。今天我们主要来进行...

3664
来自专栏烙馅饼喽的技术分享

用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 使用原型链和EventTrigger

原型链是JS的必备,作为ECMAScript4,原型链也是支持的。 特别说明,ActionScript3是支持完整的面向对象继承支持的,原型链只在某些非常特殊的...

2666
来自专栏Android机动车

TextView自定义下划线、点击弹框

github地址:https://github.com/shuaijia/NoteText

653
来自专栏腾讯IVWEB团队的专栏

Object.observe 简介

Object.observe 是一个提供数据监视的API,在chrome中已经可以使用。是 ECMAScript 7 的一个提案规范,官方建议的是“谨慎使用”级...

2240
来自专栏Ldpe2G的个人博客

Scala typeclass 设计模式

996

扫码关注云+社区