博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue源码学习之简单的数据监听
阅读量:5977 次
发布时间:2019-06-20

本文共 1141 字,大约阅读时间需要 3 分钟。

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

思路:

  1. 遍历对象的每个属性,为每个属性挂上监听函数(即利用Object.defineProperty进行元编程);

  2. 考虑属性的子属性的监听;

    先上代码:

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);

其中涉及的知识点:

  1. Object.defineProperty(object, key, {});

  2. 如果属性值还是对象,则递归继续new Observer;

转载地址:http://pupox.baihongyu.com/

你可能感兴趣的文章
c++ STL unique , unique_copy函数
查看>>
http://miicaa.yopwork.com/help/overall/
查看>>
浅谈关于特征选择算法与Relief的实现
查看>>
mybatis-spring 项目简介
查看>>
Wireshark抓取RTP包,还原语音
查看>>
Behavioral模式之Memento模式
查看>>
Work Management Service application in SharePoint 2016
查看>>
Dos 改动IP 地址
查看>>
Laravel 源码解读:php artisan make:auth
查看>>
[译]高性能浏览器网络(第九章)--HTTP简史
查看>>
【转】ionic run android 成功launch success,但是genymotion虚拟机没有显示
查看>>
厚积薄发,看腾讯云如何快速从IPv4向IPv6演进?
查看>>
百度举办第七届技术开放日,揭秘春晚红包技术支撑
查看>>
广发银行运维实践分享:Docker适配传统运维那些事
查看>>
EF Core数据库Provider一览
查看>>
Kafka团队修改KSQL开源许可,怒怼云厂商
查看>>
苹果在GitHub上正式开源iOS内核源码
查看>>
测试人员面临的测试挑战和必备技能
查看>>
使用Flutter之后,我们的CPU占用率降了50%
查看>>
同事反馈环:为什么度量和会议还不够充分
查看>>