判断元素,将模板中的变量替换成数据(文档碎片),然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。
```javascript
function Compile(el, vm) {
this.$vm = vm; //this Compile的实例 $vm 是MVVM的实例 (vm)
// el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通,
//如果不是 则根据选择器 去查找对应的元素 然后保存
this.$el = this.isElementNode(el) ? el : document.querySelector(el);
//确定元素是否真正存在
if (this.$el) {
//#app
this.$fragment = this.node2Fragment(this.$el);
this.$vm.$options.beforeMounted && this.$vm.$options.beforeMounted();
this.init();
this.$el.appendChild(this.$fragment);
this.$vm.$options.mounted && this.$vm.$options.mounted();
}
}
Compile.prototype = {
/**
* node to fragment 把节点转换成文档碎片
* @param el
* @returns {DocumentFragment}
*/
node2Fragment: function(el) {
var fragment = document.createDocumentFragment(), //文档碎片
child;
// 将原生节点拷贝到fragment
while (child = el.firstChild) {
fragment.appendChild(child);
}
return fragment;
},
/**
* 初始化
*/
init: function() {
//解析所有层次的元素节点
this.compileElement(this.$fragment);
},
/**
* 解析html元素
* @param el 元素
*/
compileElement: function(el) {
//初始化数据,保存所有子节点 保存this
var childNodes = el.childNodes,
me = this;
//对所有子节点进行递归遍历
[].slice.call(childNodes).forEach(function(node) {
//text节点的文本内容
var text = node.textContent