前言

随着前端交互复杂度的提升,各类框架如angular,react,vue等也层出不穷,这些框架一个比较重要的技术点就是数据绑定。数据的监听有较多的实现方案,本文将粗略的描述一番,并对其中一个兼容性较好的深入分析。

实现方案简介

目前对象的监听可行的方案:

  • 脏检查: 需要遍历scope对象树里的$watch数组,使用不当容易造成性能问题

  • ES5 object.defineproperty: 除ie8部分支持 其他基本都完全支持

  • ES7 object.observe : 已经移除(缘由)出ES7草案

  • gecko object.watch :目前只有基于gecko的浏览器如火狐支持,官方建议仅供调试用

  • ES6 Proxy: 目前支持较差,babel也暂不支持转化

ES5现代浏览器基本都支持了,OK，本文将介绍目前支持度最好的object.defineproperty 的Setters 和 Getters方式

object.defineproperty介绍

简洁的介绍

它属于es5规范,有两种定义属性:

  • 一种是 数据属性 包含Writable,Enumerable,Configurable

  • 一种是 访问器属性 包含get 和set

数据属性的例子

obj.key='static';

//等效于

Object.defineProperty(obj, "key", {

  enumerable: true,

  configurable: true,

  writable: true,

  value: "static"

});

访问器属性例子

var obj = {

    temperature:'test'

};

var temperature='';

Object.defineProperty(obj, 'temperature', {

    get: function() {

        return temperature+'-----after';

    },

    set: function(value) {

        temperature = value;

    }

})

obj.temperature='Test';

//Test-----after

console.log(obj.temperature);

详细的介绍

火狐开发者

实现监听的思路

  1. 将需要监听对象/数组 obj和回调函数callback传入构造函数,this.callback = callback 存储回调函数

  2. 遍历对象/数组obj,通过Object.defineProperty将属性全部定义一遍。在set函数里面添加callback函数,设置val值。get函数返回val。

  3. 判断对应的obj[key]是否为对象,是则进入第二步,否则继续遍历

  4. 遍历结束之后判断该对象是否为数组,是则对操作数组函数如push,pop,shift,unshift等进行封装,操作数组前调用callback函数

数组的封装

比较复杂的是数组的封装，结构如下：
新建一个对象newProto,继承Array的原型,并在newProto上面封装push,pop等数组操作方法,再将传入的array对象的原型设置为newProto。

对应图

路径的定位

在获取数据变化的同时,定位该变化数据在原始根对象的位置,以数组表示如:
如[ 'a', 'dd', 'ddd' ] 表示对象obj.a.dd.ddd的属性改变
实现:每个遍历对象属性都通过path.slice(0)的方式复制入参数组path,生成新数组tpath,给tpath数组push对应的对象属性key,最后在执行set的回调函数时候将tpath当参数传入

带注释代码

watch.js

/**

 *

 * @param obj 需要监听的对象或数组

 * @param callback 当对应属性变化的时候触发的回调函数

 * @constructor

 */

function Watch(obj, callback) {

    this.callback = callback;

    //监听_obj对象 判断是否为对象,如果是数组,则对数组对应的原型进行封装

    //path代表相应属性在原始对象的位置,以数组表示. 如[ 'a', 'dd', 'ddd' ] 表示对象obj.a.dd.ddd的属性改变

    this.observe = function (_obj, path) {

        var type=Object.prototype.toString.call(_obj);

        if (type== '[object Object]'||type== '[object Array]') {

            this.observeObj(_obj, path);

            if (type == '[object Array]') {

                this.cloneArray(_obj, path);

            }

        }

    };

    //遍历对象obj,设置set,get属性,set属性能触发callback函数,并将val的值改为newVal

    //遍历结束后再次调用observe函数 判断val是否为对象,如果是则在对val进行遍历设置set,get

    this.observeObj = function (obj, path) {

        var t = this;

        Object.keys(obj).forEach(function (prop) {

            var val = obj[prop];

            var tpath = path.slice(0);

            tpath.push(prop);

            Object.defineProperty(obj, prop, {

                get: function () {

                    return val;

                },

                set: function (newVal) {

                    t.callback(tpath, newVal, val);

                    val = newVal;

                }

            });

            t.observe(val, tpath);

        });

    };

    //通过对特定数组的原型中间放一个newProto原型,该原型继承于Array的原型,但是对push,pop等数组操作属性进行封装

    this.cloneArray = function (a_array, path) {

        var ORP = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];

        var arrayProto = Array.prototype;

        var newProto = Object.create(arrayProto);

        var t = this;

        ORP.forEach(function (prop) {

            Object.defineProperty(newProto, prop, {

                value: function (newVal) {

                    path.push(prop);

                    t.callback(path, newVal);

                    arrayProto[prop].apply(a_array, arguments);

                },

                enumerable: false,

                configurable: true,

                writable: true

            });

        });

        a_array.__proto__ = newProto;

    };

    //开始监听obj对象,初始path为[]

    this.observe(obj, []);

}

index.html

<body>

<ul>

    <li>

        <a href="javascript:void(0)" onClick="dataOne()">

            将obj b属性改变

        </a>

    </li>

    <li>

        <a href="javascript:void(0)" onClick="dataTwo()">

            将obj a属性的dd属性的ddd属性改变

        </a>

    </li>

    <li>

        <a href="javascript:void(0)" onClick="dataThree()">

            将obj a属性的g属性数组第一个值的a属性改变

        </a>

    </li>

    <li>

        <a href="javascript:void(0)" onClick="dataFour()">

            将obj a属性的g属性数组push新的值

        </a>

    </li>

</ul>

<div id="path">

</div>

<div id="old-val">

</div>

<div id="new-val">

</div>

</body>

<script src="../src/watch.js"></script>

<script>

    var obj = {

        a: {e: 4, f: 5, g: [{a: 1, b: 2}, [3, 4]], dd: {ddd: 1}},

        b: 2,

        c: 3

    };

    new Watch(obj, call);

    function call(path, newVal, oldVal) {

        document.getElementById('path').innerHTML='路径:'+path;

        document.getElementById('old-val').innerHTML='新的值:'+newVal;

        document.getElementById('new-val').innerHTML='老的值:'+oldVal;

    }

    function dataOne() {

        obj.b = Math.floor(Math.random()*10);

    }

    function dataTwo() {

        obj.a.dd.ddd = Math.floor(Math.random()*10);

    }

    function dataThree() {

        obj.a.g[0].a=Math.floor(Math.random()*10);

    }

    function dataFour() {

        obj.a.g.push(Math.floor(Math.random()*10));

    }

</script>

效果图

代码地址

完整代码地址

流程图

具体流程的复杂度基于监听对象的深度,所以下图只对父对象做流程分析

归纳

    • 通过定义对象内部属性的setter和getter方法,对将要变化的属性进行拦截代理,在变化前执行预设的回调函数来达到对象监听的目的。

    • 数组则在对象监听之外额外在数组对象上的原型链上加一层原型对象,来拦截掉push,pop等方法,然后在执行预设的回调函数

[转] js对象监听实现的更多相关文章

  1. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  2. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

  3. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  4. Vue.js：监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  5. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  6. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  7. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  8. ANGULAR JS WATCH监听使用（详）

    ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. ...

  9. js 事件监听封装

    var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler ...

随机推荐

  1. 使用html2canvas生成一张图片

    注意事项: 1.图片生成问题,生成图片测试机正常传到正式机,无法生成!!====>>原因是正式机中,使用的是CDN加载,导致图片跨域,而canvas不支持图片跨域!!!==>> ...

  2. 设计模式C++学习笔记之十六（Observer观察者模式）

      16.1.解释 概念:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. main(), IObservable,被观察者接口 CHanFei ...

  3. git与eclipse集成之文件回退

    1.1. 文件回退 1.1.1.        添加或修改文件回退,选择要回退的文件,右键Overwrite 1.1.2.        删除文件回退 选择要回退的文件,右键Overwrite 文件变 ...

  4. java二分查找

    二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表.首先,假设表中元素是按升序排列,将表 ...

  5. Excel 2013 表格自用技巧

    参考 Excel表格的基本操作(精选36个技巧) Excel2013基本用法 关于VLOOKUP函数 目录 快速复制单元格 单元格内强制换行 锁定标题行 查找重复值 万元显示 单元格中显示001 按月 ...

  6. event & signals & threads

    The Event Systemhttp://doc.qt.io/qt-4.8/eventsandfilters.html Each thread can have its own event loo ...

  7. Light OJ 1078

    题意: 给你 N,K 输出 KKKK.....KK能整除 N, 输出 K 的个数, (最小) 基础数学, 取摸运算即可. #include<bits/stdc++.h> using nam ...

  8. python PIL实现图片合成

    在项目中需要将两张图片合在一起.遇到两种情况,一种就是两张非透明图片的合成, 一种是涉及到透明png的合成. 相关API见 http://pillow.readthedocs.io/en/latest ...

  9. rsyslog的安装、使用、详解

    操作系统:CentOS release 6.7 download yum repo file:rsyslogall.repo [rsyslog-v8-stable] name=Adiscon Rsys ...

  10. 缺失dll的问题

    不小心运行一下什么程序就会出现缺失xxx.dll的问题,太烦了,遇到好多,一直没有记录.现在开始记录,以便日后查看~ 1. api-ms-win-crt-runtime-l1-1-0.dll 64位系 ...