vue源码学习之简单的数据监听

zone 发布于2019-08-20 15:17 / 1894人阅读

摘要：先实现一个简单的数据劫持。思路遍历对象的每个属性，为每个属性挂上监听函数即利用进行元编程考虑属性的子属性的监听先上代码你访问了你设置了新的其中涉及的知识点如果属性值还是对象，则递归继续

先实现一个简单的数据劫持。
思路：

遍历对象的每个属性，为每个属性挂上监听函数（即利用Object.defineProperty进行元编程）；

考虑属性的子属性的监听；
先上代码：

function Observer(data) {
    this.data = data;
    this.walk(data);
}
Observer.prototype.walk = function(obj) {
    var val;
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            val = obj[key];

            if (obj[key] instanceof Object) {
                new Observer(obj[key]);
            }

            this.convert(key, val);
        }
    }
}
Observer.prototype.convert = function(key, val) {
    Object.defineProperty(this.data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            console.log("你访问了" + key);
            return val;
        },
        set: function(newVal) {
            console.log("你设置了" + key);
            console.log("新的" + key + "=" + newVal);
            if (val === newVal) {
                return;
            }
            val = newVal;
        }
    });
}
var data = {
    user: {
        name: "lixixi",
        age: "24"
    },
    address: {
        city: "beijing"
    }
};

var app = new Observer(data);

其中涉及的知识点：

Object.defineProperty(object, key, {})；

如果属性值还是对象，则递归继续new Observer；

私有云超融合服务器学习之substr() 深度学习之概要 webrtc学习之九 linux学习之centos

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82130.html

React学习之深入Redux应用框架

摘要：作为大型应用状态管理最常用的工具。它是一个应用数据流框架，与框架类似。这是触发变化的惟一途径。在这个函数内部，被调用，其作用是监测是的。否则的话，认为只是一个普通的，将通过也就是进一步分发。到此源码的主要部分学习结束。 Redux作为大型React应用状态管理最常用的工具。它是一个应用数据流框架，与Flux框架类似。它是零依赖的，可以配合其他框架或者类库一起使用。虽然在平时的工作中很多...

张汉庆 2019-08-23 18:37 评论0 收藏0
jQuery源码学习之event

摘要：回调队列中的元素是对象，代表一个事件回调，拥有多个属性，如等等，其中是回调函数，在触发时通过传递，具体的在后面讲。类型是时键表示事件名，规则同上，键值表示事件触发时的回调函数。 jQuery源码学习之event jQuery的事件机制为异步回调，事件监听的属性、参数和回调的等保存在Data实例中，在元素上保存该对象的引用。有方法handle，内部执行dispatch；有属性events...

XboxYan 2019-08-26 12:11 评论0 收藏0
前端学习之JS框架的使用

摘要：目前，有三个明确的框架可供选择。和在众多开源框架中赢得了开发人员和公司的信任。虽然这三个框架有许多共同之处，但它们的受欢迎程度因行业而异。使用，这有助于在编码时发现并纠正常见错误。人们首先注意到的是你的应用程序的视觉吸引力。大多数用户倾向于将界面设计与公司的信誉和专业能力联系起来。这就是为什么选择正确的前端技术对你的业务...

不知名网友 2021-11-26 11:11 评论0 收藏0