【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

时间:2022-09-24 15:23:34

前言:

学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程。最近一直在学vue框架,像网上大佬说的,入门容易深究难。不管是跟着开发文档学还是视频教程,按步骤操作总是最肤浅,想要把这门功课做好毕竟得下足功夫。因此,特意花了好几天时间阅读相关技术博客和源码,简单实现了一个数据双向绑定的vue框架,希望能让各位有点启发...

1.什么是MVVM

MVVM即modle-view-viewmole,MVVM最早由微软提出来,在前端页面中,把Model用纯JavaScript对象表示,View负责显示,两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。

2.数据的双向绑定

在vue框架中,通过控制台或者Vue Devtools修改data里的一些属性时会看到页面也会更新,而在页面修改数据时,data里的属性值也会发生改变。我们就把这种model和view同步显示称为是双向绑定。其实单向绑定原理也差不多,视图改变data更新通过事件监听就能轻松实现了,重点都在希望data改变视图也发生改变,而这就是我们下面要讲的原理。

【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

3.vue数据双向绑定原理

3.1 Object.defineProperty()方法

首先要知道的是vue的数据绑定通过数据劫持配合发布订阅者模式实现的,那么什么是数据劫持呢?我们可以在控制台看一下它的初始化对象是什么样的:

 let vm = new Vue({
el:"#app",
data:{
obj:{
a:
}
},
created() {
console.log(this.obj)
},
})

【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

可以看到属性a分别对应着一个get 和set方法,这里引申出Object.defineProperty()方法,传递三个参数,obj(要在其上定义属性的对象)、prop(要定义或修改的属性的名称)、descriptor(将被定义或修改的属性描述符)。该方法更多信息参考:参考更多用法,着重强调一下get和set这两个属性描述键值。

  • get 存取描述符的可选键值,一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。
  • set 存取描述符的可选键值,一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。

平常我们在打印一个对象属性时会这样做:

var obj = {
name:"tnagj"
}
console.log(obj.name) //tangj

如果我们想要在输出的同时监听obj的属性值,并且输出的是tangjSir呢?这时候我们的set和get属性就起到了很好的作用

 var obj ={};
var name = '';
Object.defineProperty(obj,'name',{
set:function(value){
name = value
console.log('我叫:' + name)
},
get:function(){
console.log(name + 'Sir')
}
})
obj.name = 'tangj'; //我叫tangj
obj.name; //tangjSir

首先我们定义了一个obj空对象以及name空属性,再用一个Object.defineProperty()方法来判断obj.name的访问情况,如果是读值则调用get函数,如果是赋值则调用set函数。在这两个函数里面我们分别对输出的内容作了更改,因此在get方法调用时打印tangjSir,在set方法调用时打印我叫tangj。

其实这就是vue数据绑定的监听原理,我们能通过这个简单实现MVVM双向绑定。

3.2 MVVM双向绑定分析

view的变化,比如input值改变我们很容易就能知道通过input事件反应到data中,数据绑定的关键在于怎样让data更新view。首先我们要知道数据什么时候变的,上文提过可以用Object.defineProperty()的set属性描述键值来监听这个变化,当数据改变时就调用set方法。

那么我们可以设置一个监听器Observe,用来监听所有的属性,当属性变化的时候就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。当然我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。所以,我们大致可以把整个过程拆分成五个部分,MVVM.html,MVVM.js,compile.js,observer.js,watcher.js,我们在MVVM.js中创建所需要的实例,在.html文件中引入这些js文件,这样拆分更容易理解也更好维护。

4.分步拆分

4.1 MVVM.JS

为了和Vue保持一致,我们向MVVM.js传入一个空对象options,并让vm.$el = options.el,vm.$data = options.data,如果能取到vm.$el再进行编译和监听

class MVVM {
constructor(options){
this.$el = options.el, //把东西挂载在实例上
this.$data = options.data
if(this.$el){ // 如果有要编译的就开始编译
new Observer(this.$data); //数据劫持,就是把对象的所有属性改成get和set方法
new Compile(this.$el,this);//用数据和元素进行编译
}
}
}

4.2  Compile.js

编译的时候有一个问题需要注意,如果直接操作DOM元素会特别消耗性能,所以我们希望先把DOM元素都放在内存中即文档碎片,待编译完成再把文档碎片放进真实的元素中

class Complie{
constructor(el,vm){
this.el = this.isElementNode(el)?el:document.querySelector(el);
this.vm = vm;
if(this.el){//如果这个元素能获取到,我们才开始编译
let fragment = this.nodeToFragment(this.el); //1.先把真实的DOM移入到内存中,fragment
this.compile(fragment); //2.编译=>提取想要的元素节点v-modle 和文本节点{{}}
this.el.appendChild(fragment) //3.把编译好的fragment塞回页面
}
nodeToFragment(el){ //需要el元素放到内存中
let fragment = document.createDocumentFragment();
let Child;
while(Child = el.firstChild){
fragment.appendChild(Child);
}
return fragment;
}
}
}

接下来我们要判断需要编译的是元素节点还是文档节点,还记得Vue中有很多很有用的指令吗?比如"v-modle"、"v-for"等,所以我们还要判断元素节点内是否包含指令,如果是指令,它应该包含一些特殊的方法

/* 省略.... */
isElementNode(node){ //是不是元素节点
return node.nodeType === 1;
}
isDirective(name){ //是不是指令
return name.includes('v-')
}
compileElement(node){
//带v-modle
let attrs = node.attributes;
Array.from(attrs).forEach(
attr =>{
let attrName = attr.name;
if(this.isDirective(attrName)){
// 取到对应的值放到节点中
let expr = attr.value;
// node vm.$data expr
let [,type] = attrName.split('-') //解构赋值
CompileUtil[type](node,this.vm,expr)
}
}
)
}
compileText(node){
// 带{{}}
let expr = node.textContent; //取文本的内容
let reg = /\{\{([^}]+)\}\}/g //全局匹配
if(reg.test(expr)){
// node this.vm.$data expr
CompileUtil['text'](node,this.vm,expr)
}
}
compile(fragment){ //需要递归,拿到的childNodes只是第一层
let childNodes = fragment.childNodes;
Array.from(childNodes).forEach(
node=>{
if(this.isElementNode(node)){ //是元素节点,还需要递归检查
this.compileElement(node) //编译元素
this.compile(node) //箭头函数this指向上一层的实例
}else{ //文本节点
this.compileText(node) //编译文本
}
}
)
}

根据获取的节点类型不同,执行不同的方法,我们可把这些方法统一都放到一个对象里面去

CompileUtil = {
getVal(vm,expr){ //获取实例上的数据
expr = expr.split('.'); //如果遇到vm.$data[a.a],希望先拿到vm.$data[a]
return expr.reduce((prev,next)=>{
return prev[next]
},vm.$data)
},
getTextVal(vm,expr){ //获取编译文本以后的结果
return expr.replace(/\{\{([^}]+)\}\}/g,(...arguments)=>{
return this.getVal(vm,arguments[1]);
})
},
text(node,vm,expr){ // 文本处理
let updateFn = this.updater['textUpdater'];
let value = this.getTextVal(vm,expr);
updateFn && updateFn(node,value);
},
modle(node,vm,expr){ // 输入框处理
let updateFn = this.updater['modleUpdater']
updateFn && updateFn(node,this.getVal(vm,expr))
},
updater:{
textUpdater(ndoe,value){
ndoe.textContent = value //文本更新
},
modleUpdater(node,value){
node.value = value
}
}
}

4.3 Oberver.js

编译的时候我们还需要一个监听者,当数据变化调用get和set方法

class Observer{
constructor(data){
this.observer(data)
}
observer(data){
if(!data || typeof data !== 'object') return;
Object.keys(data).forEach(key =>{
this.defineReactive(data,key,data[key]);
this.observer(data[key])
})
}
defineReactive(obj,key,value){
let that = this;
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get(){
Dep.target && dep.addSub(Dep.target);
return value;
},
set(newvalue){
if(value === newvalue) return;
that.observer(newvalue); //如果新值是对象,继续劫持
value = newvalue;
},
})
}
}

4.4 Watcher订阅者和Dep监听器

前面已经实现了监听和编译,但是怎么样才能让它们之间进行通信呢,也就是当监听到变化了怎么通知呢?这里就用到了发布订阅模式。默认观察者watcher有一个update方法,它会更新数据。Dep里面创建一个数组,把观察者都放在这个数组里面,当监听到变化,一个个调用监听者update方法。

// Watcher.js
//观察者的目的就是给需要变化的那个元素增加一个观察者,当数据变化后执行对应的方法
class Watcher{
constructor(vm,expr,cb){
this.vm = vm;
this.expr = expr;
this.cb = cb;
//先获取老的值
this.value = this.get()
}
getVal(vm,expr){ //获取实例上的数据
expr = expr.split('.'); //如果遇到vm.$data[a.a],希望先拿到vm.$data[a]
// console.log(expr)
return expr.reduce((prev,next)=>{
return prev[next]
},vm.$data)
}
get(){
Dep.target = this; //缓存自己
let value = this.getVal(this.vm,this.expr);
Dep.target = null; //释放自己
return value;
}
update(){
let newValue = this.getVal(this.vm,this.expr);
let oldValue = this.value;
if(newValue != oldValue){
this.cb(newValue);
}
}
}
//Dep.js
class Dep{
constructor(){
//订阅的数组
this.subs = []
}
addSub(watcher){
this.subs.push(watcher)
}
notify(){
this.subs.forEach(watcher =>{
watcher.update()
})
}
}

watcher逻辑: 当创建watcher实例的时候,先拿到这个值,数据变化又拿到一个新值,如果新值和老值不一样,那么调用callback,实现更新;

dep逻辑:创建数组把观察者放在这个数组里,当监听到变化,执行watcher.update()

我们再它们分别添加到Observer和compile中

// complie.js
// 省略....
text(node,vm,expr){ // 文本处理
let updateFn = this.updater['textUpdater'];
//{{message.a}} => tangj
let value = this.getTextVal(vm,expr);
expr.replace(/\{\{([^}]+)\}\}/g,(...arguments)=>{
new Watcher(vm,arguments[1],(newVaule)=>{
// 如果数据变化,文本节点需要重新获取依赖的属性更新文本的的内容
updateFn && updateFn(node,this.getTextVal(vm,expr));
})
})
updateFn && updateFn(node,value);
},
modle(node,vm,expr){ // 输入框处理
let updateFn = this.updater['modleUpdater']
// 'message.a' => [message.a] vm.$data['message'].a
// 这里应该加一个监控,数据变化,调用这个watch的cb
new Watcher(vm,expr,(newVaule)=>{
//当值变化后将调用cb,将新的值传递过来
updateFn && updateFn(node,this.getVal(vm,expr))
});
node.addEventListener('input',(e)=>{
let newVaule = e.target.value;
this.setVal(vm,expr,newVaule)
})
updateFn && updateFn(node,this.getVal(vm,expr))
}
// 省略...
// observer.js
class Observer{
constructor(data){
this.observer(data)
}
observer(data){
//要对这个data数据原有属性改成set和get的形式
if(!data || typeof data !== 'object') return;
Object.keys(data).forEach(key =>{
this.defineReactive(data,key,data[key]);
this.observer(data[key])
})
}
defineReactive(obj,key,value){
let that = this;
let dep = new Dep(); //每个变化的数据都会对应一个数组,这个数据存放了所有数据的更新
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get(){
Dep.target && dep.addSub(Dep.target);
return value;
},
set(newvalue){
if(value === newvalue) return;
that.observer(newvalue); //如果新值是对象,继续劫持
value = newvalue;
dep.notify(); //通知所有人数据更新
},
})
}
}
class Dep{
constructor(){
//订阅的数组
this.subs = []
}
addSub(watcher){
this.subs.push(watcher)
}
notify(){
this.subs.forEach(watcher =>{
watcher.update()
})
}
}

到这里我们就实现了数据的双向绑定,MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

当然我们还需要数据代理,用vm代理vm.$data,也是通过Object.defineProperty()实现


 this.proxyData(this.$data);
proxyData(data){
Object.keys(data).forEach(key =>{
let val = data[key]
Object.defineProperty(this,key,{
enumerable:true,
configurable:true,
get(){
return val
},
set(newval){
if(val == newval){
return;
}
val = newval
}
})
})
}

5.最终效果

【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

本次学习源码已上传github:https://github.com/Tangjj1996/MVVM,喜欢的朋友可以stars

参考博客:基于vue实现一个简单的MVVM框架(源码分析)

PS:MVVM是学习框架非常重要的一步,掌握了这些原理才能更好地运用,知其然更要知其所以然,水平有限有错误的地方烦请多多指教