renminghao / minimvvm Goto Github PK

vue目前这么火，不试试水怎么好意思说自己跟的上潮流呢，vue既然用多了，就可以深入下，自己试着来搞一个？

和vue实现的原理一致，我们实现数据=>视图只需要劫持Object.defineProperty的get和set方法，这样子在我们对数据进行更新的时候，就可以触发我们自定义的方法，来实现更多的操作

PS. 代码里面用到了with来改动作用域，如果用ES6写通过babel-loader转换的时候会给每个文件里面加上use strict在严格模式下不能使用with等语法，因此这里面的代码都是通过ES5来写的#尴尬脸#

PSS.代码仓库在这里

接下来就从头开始看看这部分代码吧

• index.js

首先是index.js,在浏览器环境里，全局需要使用MVVM变量，因此绑定在window下，得到入参时候，先把所有的data和method数据绑定在this下面，这样子方便我们后续在改变作用域的情况下直接来通过eval执行对应的表达式内容，bindDataByRender里面的get里面，通过col.add来收集所有的渲染操作(晕了吧，没事，这里你只要知道有这么个玩意儿就行了),

```
get : function () {
		window.TARGET && col.add(window.TARGET)
		return obj[item]
},
```

当然，这里只是设置了每个数据的get和set，并没有真正的去执行，在哪里执行呢,index.js里面有一个render，可以深入到render里面来看

• render.js

PS.这里只实现了最基本的指令，因此代码量比较少

相比index.js来看render就稍微复杂一点，但真的只是稍微复杂了一点，首先我们得到传进来的el，el可以是构造函数指定的，也可以不指定就直接是document.body了，我们需要将传进来的el“净化”一下，

```
	getClearDocument : function (el) {
		var target = el;
		var me = this;
		var fragment = document.createDocumentFragment();
		var child;
		while(child = target.firstChild){
			if(this.isIgnoreElement(child)){
				target.removeChild(child)
			}else{
				fragment.appendChild(child)
			}
		}
		return fragment;
	}
```

新建一个代码片段，来当做净化后的元素的容器，isIgnoreElement的内容在下面：

```
	isIgnoreElement : function (el) {
		// https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
		return (el.nodeType == 8) || (el.nodeType == 3) && (/[\n\t\r]+/.test(el));
	}
```

可以去这里看下具体的nodeType的内容代表的具体是啥，截止目前，我们已经获取到了一段"纯净"的HTML代码，接下来我们就该compile了，我们遍历当前el的每一个子节点，用每个子节点的nodeType来识别出到底是一个text节点还是一个Element，如果是text节点，那直接去执行我们的绑定操作，如果不是就可以翻译当前节点的attributes，并且执行递归，一直到text节点

我们得到当前节点的attributes，来查看其中内容是否是符合我们的绑定(@event)，然后通过addEventListener来讲对应的事件绑定到这个元素上面，那么，我们又是如何来获取具体绑定的方法呢？

```
	onEvent : function (node,eve,handler,scop){
		if(typeof handler == 'function'){
			node.addEventListener(eve,handler.bind(scop))
		}
		else{
			node.addEventListener(eve, function (e) {
				compress(handler,scop).bind(scop)(e)
			})
		}
	}
```

我们里面用到了compress，compress是从utils中来的，我们可以看下代码

```
var compress = function (exp,scop) {
	try{
		with(scop)
			return eval(exp)
	}catch(e){
		console.error(e);
		return null
	}
}
```

没错，我们就是通过with来直接读取method中的方法，我们在index.js中将data和method中的每一个元素都绑定到了mvvm的this上面，我们吧mvvm的this当做scop传进来，这里调用with就能够直接获取到对应的方法内容啦

可以吧text节点当做基础类型，Element当做高级类型，我们遍历高级类型到每一个基础类型，而且 我们只处理基础类型

```
	compileText : function (el, scop) {
		var me = this;
		var body = el.textContent.trim()
		if(!body) return el;
		
		this.bindWatcher(el,body,'text',scop)
	}
```

如果text节点没有内容，那就直接返回，否则我们做一次绑定

```
var func_handler = {
	text : function (node ,val) {
		node.textContent = val === undefined ? '' : val;
	}
}

bindWatcher : function (el,text,type,scop) {
		var fn = func_handler[type];
		if(fn) {
			new watch(el,text,fn,scop)
		}
	}
```

这里用到了watch，看下watch的代码，

• watch.js

watch很简单的，主要就是实现了一次上面 new watch(el,text,fn,scop)里面fn的调用，我们查看最新一次的内容和上一次的内容是否一致，如果不一致我们就来执行一遍fn，那fn具体是啥呢，可以追回到render.js来看,就是当数据不一样的时候我们执行一次渲染，这不就实现了mvvm么？

当然，上面都描述的是编译器，那真正的执行期是啥样子呢，我们可以看到index.js里面，执行期里面只执行了render来进行编译，在编译的时候肯定会使用到我们的变量，这个时候就会触发我们index.js里面的Object.defineProperty里面的get方法，触发一次col.add，我们看下col里面又是什么鬼

```
var _ = require('lodash');
var collect = function () {
	this.col = {};
}

module.exports = collect;

collect.prototype = {
	add : function (target){
		if(!this.col[target.id]){
			this.col[target.id] = target;
		}
	},
	notify : function (){
		var me = this;
		_.keys(this.col).forEach(function (item){
			me.col[item].set()
		})
	}
}
```

可以看到，整个col就相当于一个仓库，来收集消息和触发消息，我们在渲染的时候将每条数据渲染的上下文进行一次收集，每次手机一个window.TARGET,而这个TARGET在哪里呢，可以看下watch.js里面的get,

```
		window.TARGET = this;
		var val = getCompress(this.content,this.scop)
		window.TARGET = null;
```

对的，在每次渲染的时候，我们获取数据的同时，在监视器里面讲TARGET暴露出去，这样子我们就确定了当前数据渲染的作用域，和当前数据对应的设置（更新）方法，岂不美哉？再看index.js的set里面我们在程序自动更新内容的时候，执行了一遍该数据对应的更新内容的触发，这样子就能在数据更新的时候来执行对应的更新方法来更新视图了，是不是很6

基本上整个仓库代码就实现了

0. 数据劫持
1. 消息绑定
2. 消息触发
3. 更新视图

也是通过上面几个操作，实现了一个最基础的mvvm原型

• https://github.com/vuejs/vue
• https://github.com/qieguo2016/Vueuv