设计一个简单的MVVM（vue2.x）

最新推荐文章于 2024-09-27 20:56:43 发布

三里清风三里路丶

最新推荐文章于 2024-09-27 20:56:43 发布

阅读量1.7k

点赞数 29

分类专栏： Vue学习文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/dzsen/article/details/139687100

版权

Vue学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 引言

学习vue有段时间了，mvvm在vue中是个典型应用，最近参考了参考网上一些资料，整理了一下，也加入了自己的理解，实现一个简单版的demo，也方便有些面试的同学遇到设计一个mvvm的面试题。

2. 逻辑结构

mvvm的设计模式是“发布与订阅者”模式（observe/watcher），主要步骤有三步：

observe来劫持并监听所有的属性（也就是vue中的data）
给每一个需要监听的属性，绑定一个订阅者（watcher）
当observe监听到属性变化时，通知watcher去更新视图

ok，步骤讲完了，接下来就开始实现每一步

3. observe

observe的主要功能：

劫持和监听数据
当数据更新时，触发通知（后面的dep会讲，这里跳过）
那么observe劫持和监听数据的呢？用Object.defineProperty来实现

先看一个例子：

function observe (obj) {
    var keys = Object.keys(obj)
    keys.forEach(function(key){
      var val = void 0;
      Object.defineProperty(obj, key, {
         enumerable : true, 
         configurable : true,
         get : function () {
            console.log('这个属性是', key)
            return val;
          },
         set : function ( newValue ) {
            val = newValue
            console.log('属性' + key + '已经被监听了，此时的值是：' + newValue)
          }
      })
    })
}
var book = {page : 300}
observe(book)
var b = book.page   // 后台会打印 这个属性是page
book.page = 400    // 后台会打印  属性page已经被监听，此时的值是400

在这里我们就实现了属性的监听，上述例子中，我们用Object.defineProperty重写了set和get函数，使得属性的值变化时可以被我们监听到（如果不了解Object.defineProperty的，可以查阅Object.defineProperty

ok，原理我们清楚了，接下来就开始写observe了

//data对象，key和val分别是data的键值对
function defineReactive(data, key, val){
	observe(val)  //递归调用data中的子对象 
	Object.defineProperty(data, key, {
		enumerable : true,  //可枚举，可在for in 和 Object.keys中得到
		configurable : true,
		get : function () {
			return val;
		},
		set : function ( newValue ) {
			if(val === newValue){
				return;
			}
			val = newValue
			console.log('属性' + key + '已经被监听了，此时的值是：' + newValue)
		}
	})
}
//观察者，用来监听数据
function observe (obj) {
	if(!obj || typeof obj !== 'object'){
		return;
	}
	Object.keys(obj).forEach(function(key){
		defineReactive(obj, key, obj[key])
	})
}

defineReactive函数的三个参数，分别是要注册的对象，对象的key，以及对象的值
defineReactive中调用observe，目的是递归调用所有的属性

3. watcher

observe写完了，接下来我们就要看watcher了，因为每个属性都绑定一个watcher，所以可能会有很多的watcher，因此我们需要一个调度中心（暂时定义为Dep）,来统一指挥watcher

Dep的主要功能：

将每个watcher都push进去
当接收到observe的属性更新通知时，通知对应的watcher来更新视图

接下来上代码

//订阅器，用来收集订阅者，并且通知订阅者更新函数
function Dep(){
	this.subs = []
}
Dep.prototype = {
	addSub : function (sub){
		this.subs.push(sub)
	},
	notify : function (){
		this.subs.forEach(function(sub){
			sub.update()
		})
	}
}

Dep已经定义好了，接下来我们需要改一下observe，将dep加进去，这样我们就实现了在get函数中将属性注册一个watcher再push进dep中，并且set函数中数据更新时通dep，dep会再通知watcher去更新视图

function defineReactive(data, key, val){
	observe(val)  //递归调用data中的子对象 
	var dep = new Dep();
	Object.defineProperty(data, key, {
		enumerable : true,  //可枚举，可在for in 和 Object.keys中得到
		configurable : true,
		get : function () {
            // 这里目的是定义一个flag，用来判断什么时候需要push一个sub
            //因为不能每次调用属性都push一个sub，只有在第一次时才需要push
			if(Dep.target){   
				dep.addSub(Dep.target)
			}
			return val;
		},
		set : function ( newValue ) {
			if(val === newValue){
				return;
			}
			val = newValue
			console.log('属性' + key + '已经被监听了，此时的值是：' + newValue)
			dep.notify()
		}
	})
}

到这里Dep调度中心就完成了，接下来我们实现watcher

watcher的主要功能：

observe中get函数只是定义了一个watcher，但是触发这个get函数需要在这里，这样就完成了注册
接到dep的更新通知后，调用更新函数

ok，先实现代码：

function Watcher (vm, exp, cb) {
	this.vm = vm
	this.exp = exp
	this.cb = cb
	this.value = this.get()
}
Watcher.prototype = {
	update : function(){
		this.run()
	},
	run : function (){
		var value = this.vm.data[this.exp]
		var oldVal = this.value
		if (value !== oldVal) {
			this.value = value
			this.cb.call(this.vm, value, oldVal)
		}
	},
	get:function(){
		Dep.target = this // 这里设置一下target，下一行代码会直接调用属性的get函数，会用到target
		var value = this.vm.data[this.exp]
		Dep.target = null 
		return value
	}
}

Watcher的三个参数，分别是vue，要订阅的属性，以及回调函数（触发更新时调用的函数）
this.value = this.get()这行代码就是初始化就去获取这个属性值，这样就会调用observe中的get函数，然后将watcher加入到Dep中去。
Dep.target = this 就是上文中提到的只有target有值时才会将watcher加入到Dep中

ok，到这里最简易版本的mvvm已经完成了
然后我们定义一个vue：

// data 是所有的属性，el是绑定的元素节点（#app）,exp是绑定的属性
function dVue (data, el, exp) {
    this.data = data;
    observe(data);
    el.innerHTML = this.data[exp];  // 初始化模板数据的值
    new Watcher(this, exp, function (value) {
        el.innerHTML = value;
    });
    return this;
}

在html中调用

<body>
    <h1 id="app">{{math}}</h1>
</body>
<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/index.js"></script>
<script type="text/javascript">
    var ele = document.querySelector('#app');
    var dVue = new dVue({
        math : '1'
    }, ele, 'math');
 
    setInterval(function () {
        dVue.data.math = Math.random() * 100
    }, 1000);
 
</script>

OK，接下来我们完善一下，实现vue中的{{ }}绑定

4. compile

compile主要功能：

获取模板，并且解析模板，将数据替换模板，完成初始化视图
给模板中绑定的属性，new初始化一个watcher（之前是在dVue函数中完成的，现在移到这里）

 function Compile(el, vm){
 	this.vm = vm
 	this.el = document.querySelector(el)
 	this.fragment = null
 	this.init()
 }
 Compile.prototype = {
 	init : function(){
 		if(this.el){
 			this.fragment = this.nodeToFragment(this.el)
 			this.compileElement(this.fragment)
 			this.el.appendChild(this.fragment)
 		}else{
 			console.log('节点不存在')
 		}
 	},
 	nodeToFragment : function(el){
 		//创建一个虚拟的文档片段，用来操作dom节点，因为这个片段是存在于内存中
 		//所以相对于直接操作dom，性能会更好一点
 		var fragment = document.createDocumentFragment()
 		var child = el.firstChild
 		while(child){
 			fragment.appendChild(child)
 			child = el.firstChild
 		}

 		return fragment
 	},
 	compileElement :function(el){
 		var childNodes = el.childNodes
 		var self = this;
 		Array.prototype.slice.call(childNodes).forEach(function(node){
 			var reg = /\{\{\s*(.*?)\s*\}\}/
 			var text = node.textContent;
 			//判断该节点是否含有{{ }}这个指令
 			if(self.isTextNode(node) && reg.test(text)){
 				self.compileText(node, reg.exec(text)[1])
 			}
 			if(node.childNodes && node.childNodes.length){
 				self.compileElement(node)
 			}
 		})
 	},
 	compileText :function(node, exp){
 		var self = this
 		var initText = this.vm[exp]
 		this.updateText(node, initText)  //初始化视图
 		new Watcher(this.vm, exp, function(value){
 			self.updateText(node, value)
 		})
 	},
 	updateText : function(node, value){
 		node.textContent = typeof value == 'undefined' ? '' : value
 	},
 	isTextNode : function(node){
 		return node.nodeType == 3
 	}
 }

nodeToFragment 是在内存建立一个虚拟的节点，然后将模板赋值给它，再继续操作模板，这样可以提升性能，参考文档nodeToFragment
compileElement 这个函数，解析模板，找到{{ }}指令的文本节点，然后运行核心函数compileText ，解析文本节点
compileText 这个函数中，做了两件事，第一件事是初始化视图，也就是调用updateText函数，第二件事就是给这个文本节点绑定一个watcher，用于订阅该属性，当属性值改变时，会调用里面的回调函数

到这里compile就完成了，这样我们需要把dVue重新修改一下

function dVue (options) {
	var self = this
	this.data = options.data
	this.vm = this
    // 将data上的属性挂载到vue上，this.data.a === this.a
	Object.keys(this.data).forEach((key)=>{
		this.proxyKeys(key)
	})
    //重写所有的data属性的set和get方法，用于劫持监听数据
	observe(this.data)
    //编译模板，得到绑定的节点，初始化视图，并且给该节点所绑定的属性注册一个watcher
	new Compile(options.el, this)
	return this
}
//代理一下属性，这样的话 dVue.name = dVue.data.name ，不用每次都带着data了
//相当于把data的所有属性都注册到了dVue上
dVue.prototype = {
	proxyKeys : function(key){
		var self = this
		Object.defineProperty(this, key, {
			enumerable : false,
			configurable : true,
			get : function(){
				return self.data[key]
			},
			set :function(val){
				self.data[key] = val
			}
		})
	}
}

到这里就基本结束了，我们在html中调用一下

<html>
<head>
	<title>实现一个简单的mvvm</title>
</head>
<body>
<div id = "app">
	<div>{{name}}</div>
	<div>{{age}}</div>
	<div>{{like}}</div>
</div>

<script type="text/javascript" src="./observe.js"></script>
<script type="text/javascript" src="./watcher.js"></script>
<script type="text/javascript" src="./compile.js"></script>
<script type="text/javascript" src="./dVue.js"></script>
<script>
	let dVueInit = new dVue({
		el : '#app',
		data:{
			name : 'ding',
			age : 14,
			like : '读书'
		}
	})
</script>
</body>
</html>