浅谈MVVM是如何实现数据双向绑定的？

angular 脏值检测
backbone 发布者订阅者模式
vue 数据劫持（结合发布者订阅者的模式）

关于Object.defineProperty()

一、主要实现思路：

observe数据监视器：通过对数据对象属性及其子属性进行遍历递归，通过Obeject.defineProperty()方法加上setter,getter，来实现监听数据的变化。
添加订阅者功能：用来实现数据发生变化时通知订阅者，方法如下，维护一个数组用来收集订阅者，当数据变化时触发notify(),来调用update()方法实现更新。
通过dep添加订阅者。
实现Compile: 主要的任务就是解析模板指令，将模板中的变量替换成数据，初始化渲染页面视图，再给每个指令下对应的节点绑定更新函数，添加订阅者，当数据发生变化时，将得到通知，然后更新视图。需要注意的一点是：为避免频繁操作DOM节点造成性能的过度消耗，可以将el节点暂时转换成fragment文档碎片，进行编译解析。完事儿再将fragment添加回原来的真实dom节点中。
实现Watcher：它作为主要的任务是成为Compile及Observe数据监视器之间通信的桥梁。

1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

通过Object.defineProperty()方法，递归数据对象的每个属性，都添加上 setter, getter，以实现数据被赋新值时触发setter，实现监听。并通过创建的通知订阅者功能，通知订阅者。

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈，监听到值变化了 kindeng --> dmqfunction observe(data) {if (!data || typeof data !== 'object') {return;}// 取出所有属性遍历Object.keys(data).forEach(function(key) {defineReactive(data, key, data[key]);});
};function defineReactive(data, key, val) {observe(val); // 监听子属性Object.defineProperty(data, key, {enumerable: true, // 可枚举configurable: false, // 不能再defineget: function() {return val;},set: function(newVal) {console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);val = newVal;}});
}

如何完成订阅者功能：首先维护一个数组subs，其次通过监听数据对象的属性是否变化，再调用notify()实现对数据对象的更新。

function defineReactive(data, key, val) {var dep = new Dep();observe(val); // 监听子属性Object.defineProperty(data, key, {set: function(newVal) {if (val === newVal) return;console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);val = newVal;dep.notify(); // 通知所有订阅者}});
}
function Dep() {this.subs = [];
}
Dep.prototype = {addSub: function(sub) {this.subs.push(sub);},notify: function() {this.subs.forEach(function(sub) {sub.update();});}
};

浅谈MVVM是如何实现数据双向绑定的？相关推荐

vue的数据双向绑定原理
前言: 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化,数据也会跟着同步变化.这也算是vue的精髓之处了.单项数据绑定是使用状 ...
python读取图像数据流_浅谈TensorFlow中读取图像数据的三种方式
本文面对三种常常遇到的情况,总结三种读取数据的方式,分别用于处理单张图片.大量图片,和TFRecorder读取方式.并且还补充了功能相近的tf函数. 1.处理单张图片我们训练完模型之后,常常要用图片 ...
嵌入式AI —— 6. 为糖葫芦加糖，浅谈深度学习中的数据增广
没有读过本系列前几期文章的朋友,需要先回顾下已发表的文章: 开篇大吉集成AI模块到系统中模型的部署 CMSIS-NN介绍从穿糖葫芦到织深度神经网络又和大家见面了,上次本程序猿介绍了CMSIS- ...
前端笔记之微信小程序（二）{{}}插值和MVVM模式数据双向绑定指令API
一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
oracle全表扫过程讲解,CSS_浅谈存取Oracle当中扫描数据的方法，1) 全表扫描(Full Table Scans, FTS) - phpStudy...
浅谈存取Oracle当中扫描数据的方法 1) 全表扫描(Full Table Scans, FTS) 为实现全表扫描,Oracle读取表中所有的行,并检查每一行是否满足语句的WHERE限制条件一个多块 ...
[转] 浅谈脱壳中的附加数据问题（overlay）
浅谈脱壳中的附加数据问题(overlay) Author:Lenus From: www.popbase.net E-mail:Lenus_M@163.com -------------------- ...
浅谈脱壳中的附加数据问题（overlay）
浅谈脱壳中的附加数据问题(overlay) Author:Lenus From: www.popbase.net E-mail:Lenus_M@163.com -------------------- ...
双向绑定当obj的值修改时_JavaScript进阶之深入理解数据双向绑定
前言谈起当前前端最热门的 js 框架,必少不了 Vue.React.Angular,对于大多数人来说,我们更多的是在使用框架,对于框架解决痛点背后使用的基本原理往往关注不多,近期在研读 Vue.js ...

浅谈MVVM是如何实现数据双向绑定的？

浅谈MVVM是如何实现数据双向绑定的？相关推荐

最新文章

热门文章