MVVM 原理重难点

来源:http://www.chinese-glasses.com 作者:Web前端 人气:56 发布时间:2020-03-31
摘要:时间: 2019-10-30阅读: 58标签: mvvm 几种双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,我认为的双向数据绑定其实就是在单向绑定的基础上给可输入元素(input,textare等)添

时间: 2019-10-30阅读: 58标签: mvvm

几种双向绑定的做法
目前几种主流的mvc(vm)框架都实现了单向数据绑定,我认为的双向数据绑定其实就是在单向绑定的基础上给可输入元素(input,textare等)添加了change事件,来动态的修改model和view。
实现数据绑定的做法大致如下几种:
发布者-订阅者模式(backbone.js)

今天花上 10 分钟,针对 MVVM 这个面试必考点,简简单单的来给大家划一下重难点

脏值检查(angular.js)

划重点

数据劫持(vue.js)

MVVM 双向数据绑定 在Angular1.x版本的时候通过的是脏值检测来处理

发布者-订阅者模式: 一般通过sub,pub的方式实现数据和视图绑定,更新数据的方法通常做法是vm.set('property',value)由于对这种方式不太熟悉,所以留一个链接,这篇文章讲的比较详细点击这里
脏值检查: angular.js通过脏值检测的方式对比数据是否更新,来决定是否更新视图,最简单的方式是通过setInterval()定时轮询检测数据变动,当然Googke不会这么low,angular有在指定事件触发后才进入脏值检测
DOM事件,譬如输入文本,点击按钮.
XHR响应时间($http)
浏览器Location变更事件($location)
Timer事件($timeout,$interval)
执行$digest()或$apply()

而现在无论是React还是Vue还是最新的Angular,其实实现方式都更相近了

数据劫持: Vue.js则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的seeter,getter在数据变动时给订阅者发送消息,出发相应的监听回调.
思路整理
已经了解到Vue是通过数据劫持的方式来做数据绑定,其中最核心的方法便是通过Object.defineproperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要的,最基础的内容之一,如果不熟悉Object.defineproperty
点击这里
实现双向绑定则必须实现以下的几点
实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如果有变动则拿到最新值并通知订阅者
实现一个指令解析器Compiled,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
实现一个Watcher,作为链接Observer和Compiled的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
mvvm入口函数,整合以上三者

那就是通过数据劫持+发布订阅模式

上述流程如图所示 :
[图片上传中。。。(1)]1.实现Observer
OK,思路已经整理完毕,也已经比较明确相关模块功能了,我们已经知道可以利用Object.defineProperty()来监听属性变动,那么需要 Observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。。。相关代码为 :
[图片上传中。。。(2)]上面这段代码我们已经可以监听每个数据的变化了,那么监听到变化之后剩下就是怎么通知给订阅者了,所以接下来我们需要实现一个消息订阅器,很简单,维护一个数组,用来收集订阅者,数组变动触发notify,在调用订阅者的update方法,代码改善后就是这样:

真正实现其实靠的也是ES5中提供的Object.defineProperty,当然这是不兼容的所以Vue等只支持了IE8+

var data = {name: '钢铁侠'};observer(data);data.name = '蜘蛛侠'; // 监听到值变化了 钢铁侠 --> dmqfunction observer(data){ if (!data||typeof data!='object'){ return ; } //取出所有属性遍历 Object.keys(data).forEach(function(key){ defineReactive(data,key,data[key]); })}function defineReactive (data,key,val){ var dep=new Dep(); observer(val);//监听子属性 Object.defineProperty(data,key,{ enumerable:yrue,//可枚举 configurable:false,//不能被重新定义 get:function(){ return val; }, 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(); }) }}

为什么是它

那么问题来了,谁是订阅者,怎么往订阅器添加订阅者? 没错,上面的思路整理中我们已经明确订阅者应该是Watcher,而且var dep=new Dep();是在defineProperty方法内部定义的,所以想通过dep添加订阅者,就必须要在闭包内操作,所以我们需要在getter里面动手脚:
var data = {name: '钢铁侠'};observer(data);data.name = '蜘蛛侠'; // 监听到值变化了 钢铁侠 --> dmqfunction observer(data){ if (!data||typeof data!='object'){ return ; } //取出所有属性遍历 Object.keys(data).forEach(function(key){ defineReactive(data,key,data[key]); })}function defineReactive (data,key,val){ var dep=new Dep(); observer(val);//监听子属性 Object.defineProperty(data,key,{ enumerable:yrue,//可枚举 configurable:false,//不能被重新定义 get:function(){ return val; }, get:function(){ //由于在闭包内添加watcher,所以通过Dep定义一个全局target属性,暂存warcher,添加完移除 Dep.target &&dep.addDep(Dep.target); return val; }, 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(); }) }}//warcher.jsWarcher.prototype={ get:function(key){ Dep.target=this; //触发属性的getter,从而添加订阅者 this.value=data[key] Dep.target=null; }}

Object.defineProperty()说实在的我们大家在开发中确实用的不多,多数是修改内部特性,不过就是定义对象上的属性和值么?干嘛搞的这么费劲(纯属个人想法)

这里已经实现一个Observer了,已经具备了监听数据和数据变化通知订阅者的功能,那么接下来就是Compile了; 下面是完整代码
function Observer(data) { this.data = data; this.walk(data);}Observer.prototype = { walk: function(data) { var me = this; Object.keys(data).forEach(function(key) { me.convert(key, data[key]); }); }, convert: function(key, val) { this.defineReactive(this.data, key, val); }, defineReactive: function(data, key, val) { var dep = new Dep(); var childObj = observe(val); Object.defineProperty(data, key, { enumerable: true, // 可枚举 configurable: false, // 不能再define get: function() { if (Dep.target) { dep.depend(); } return val; }, set: function(newVal) { if (newVal === val) { return; } val = newVal; // 新的值是object的话,进行监听 childObj = observe(newVal); // 通知订阅者 dep.notify(); } }); }};function observe(value, vm) { if (!value || typeof value !== 'object') { return; } return new Observer(value);};var uid = 0;function Dep() { this.id = uid++; this.subs = [];}Dep.prototype = { addSub: function(sub) { this.subs.push(sub); }, depend: function() { Dep.target.addDep(this); }, removeSub: function(sub) { var index = this.subs.indexOf(sub); if (index != -1) { this.subs.splice(index, 1); } }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); }};Dep.target = null;

But在实现框架or库的时候却发挥了大用场了,这个就不多说了,只不过轻舟一片而已,还没到写库的实力

原文链接,感谢这位大神

知其然要知其所以然,来看看如何使用

let obj = {};let song = '发如雪'; obj.singer = '周杰伦'; Object.defineProperty(obj, 'music', { // 1. value: '七里香', configurable: true, // 2. 可以配置对象,删除属性 // writable: true, // 3. 可以修改对象 enumerable: true, // 4. 可以枚举 // ☆ get,set设置时不能设置writable和value,它们代替了二者且是互斥的 get() { // 5. 获取obj.music的时候就会调用get方法 return song; }, set(val) { // 6. 将修改的值重新赋给song song = val; }});// 下面打印的部分分别是对应代码写入顺序执行console.log(obj); // {singer: '周杰伦', music: '七里香'} // 1delete obj.music; // 如果想对obj里的属性进行删除,configurable要设为true 2console.log(obj); // 此时为 {singer: '周杰伦'}obj.music = '听妈妈的话'; // 如果想对obj的属性进行修改,writable要设为true 3console.log(obj); // {singer: '周杰伦', music: "听妈妈的话"}for (let key in obj) { // 默认情况下通过defineProperty定义的属性是不能被枚举(遍历)的 // 需要设置enumerable为true才可以 // 不然你是拿不到music这个属性的,你只能拿到singer console.log(key); // singer, music 4}console.log(obj.music); // '发如雪' 5obj.music = '夜曲'; // 调用set设置新的值console.log(obj.music); // '夜曲' 6

以上是关于Object.defineProperty的用法

下面我们来写个实例看看,这里我们以Vue为参照去实现怎么写MVVM

// index.htmlbody div  h1{{song}}/h1 p《{{album.name}}》是{{singer}}2005年11月发行的专辑/p p主打歌为{{album.theme}}/p p作词人为{{singer}}等人。/p 为你弹奏肖邦的{{album.theme}} /div !--实现的mvvm-- script src="mvvm.js"/script script // 写法和Vue一样 let mvvm = new Mvvm({ el: '#app', data: { // Object.defineProperty(obj, 'song', '发如雪'); song: '发如雪', album: { name: '十一月的萧邦', theme: '夜曲' }, singer: '周杰伦' } }); /script/body

上面是html里的写法,相信用过Vue的同学并不陌生

那么现在就开始实现一个自己的MVVM吧

打造MVVM

// 创建一个Mvvm构造函数// 这里用es6方法将options赋一个初始值,防止没传,等同于options || {}function Mvvm(options = {}) { // vm.$options Vue上是将所有属性挂载到上面 // 所以我们也同样实现,将所有属性挂载到了$options this.$options = options; // this._data 这里也和Vue一样 let data = this._data = this.$options.data; // 数据劫持 observe(data);}

数据劫持

为什么要做数据劫持?

观察对象,给对象增加Object.defineProperty

vue特点是不能新增不存在的属性 不存在的属性没有get和set

深度响应 因为每次赋予一个新对象时会给这个新对象增加defineProperty(数据劫持)

多说无益,一起看代码

// 创建一个Observe构造函数// 写数据劫持的主要逻辑function Observe(data) { // 所谓数据劫持就是给对象增加get,set // 先遍历一遍对象再说 for (let key in data) { // 把data属性通过defineProperty的方式定义属性 let val = data[key]; observe(val); // 递归继续向下找,实现深度的数据劫持 Object.defineProperty(data, key, { configurable: true, get() { return val; }, set(newVal) { // 更改值的时候 if (val === newVal) { // 设置的值和以前值一样就不理它 return; } val = newVal; // 如果以后再获取值(get)的时候,将刚才设置的值再返回去 observe(newVal); // 当设置为新值后,也需要把新值再去定义成属性 } }); }}// 外面再写一个函数// 不用每次调用都写个new// 也方便递归调用function observe(data) { // 如果不是对象的话就直接return掉 // 防止递归溢出 if (!data || typeof data !== 'object') return; return new Observe(data);}

以上代码就实现了数据劫持,不过可能也有些疑惑的地方比如:递归

再来细说一下为什么递归吧,看这个栗子

 let mvvm = new Mvvm({ el: '#app', data: { a: { b: 1 }, c: 2 } });

我们在控制台里看下

被标记的地方就是通过递归observe(val)进行数据劫持添加上了get和set,递归继续向a里面的对象去定义属性,亲测通过可放心食用

接下来说一下observe(newVal)这里为什么也要递归

还是在可爱的控制台上,敲下这么一段代码mvvm._data.a = {b:'ok'}

然后继续看图说话

通过observe(newVal)加上了

现在大致明白了为什么要对设置的新值也进行递归observe了吧,哈哈,so easy

数据劫持已完成,我们再做个数据代理

数据代理

数据代理就是让我们每次拿data里的数据时,不用每次都写一长串,如mvvm._data.a.b这种,我们其实可以直接写成mvvm.a.b这种显而易见的方式

下面继续看下去,+号表示实现部分

function Mvvm(options = {}) { // 数据劫持 observe(data); // this 代理了this._data for (let key in data) { Object.defineProperty(this, key, { configurable: true, get() { return this._data[key]; // 如this.a = {b: 1} }, set(newVal) { this._data[key] = newVal; } }); }}// 此时就可以简化写法了console.log(mvvm.a.b); // 1mvvm.a.b = 'ok'; console.log(mvvm.a.b); // 'ok'

本文由10bet发布于Web前端,转载请注明出处:MVVM 原理重难点

关键词:

上一篇:19.进程和线程归纳

下一篇:没有了

最火资讯