vue --- 2.0 编译的实现

初识

假设html中有如下dom:

<div id="app"><!-- 插值绑定 --><p>{{name}}</p><!-- 指令解析 --><p l-text="name"></p><p>{{age}}</p><p>{{doubleAge}}</p><!-- 双向绑定实现 --><input type="text" l-model="name" /><!-- 事件处理 --><button @click="changeName">嘿嘿</button><!-- html内容解析 --><div l-html="html"></div>
</div>
<script>const app = new Lz({el:'#app',data:{name: '栗子'}});
</script>

编译

Lz类如下:

class Lz{constructor(options){// 将options保存下来this.$options = options;// 响应式数据this.$data = options.data;this.$el = options.el;new Compile(this.$el, this);}
}

Compile类

class Compile{// el 是dom的id,// vm 是Lz的一个实例constructor(el , vm){this.$el = document.querySelector(el);				// 根据id获取dom元素this.$vm = vm;										// 保存lz实例if(this.$el){						    			// 若存在dom节点,则进行编译this.$fragment = this.node2Fragment(this.$el);	// 将获取的dom节点保存到内存中.提高效率this.compile(this.$fragment);					// 对内存中的数据数组进行解析this.$el.appendChild(this.$fragment);			// 将解析过后的结点追加到dom实例中去				}}// 输入dom元素, 输出dom数组node2Fragment(el){const frag = document.createDocumentFragment();		let child;while(child = el.firstChild){						frag.appendChild(child);}return frag}
}

compile函数的实现

compile(el) {const childNodes = el.childNodes;Array.from(childNodes).forEach(node => {// 类型判断if (this.isElement(node)) {// 元素// console.log('编译元素' + node.nodeName);// 查找 k-, @, :const nodeAttrs = node.attributes;Array.from(nodeAttrs).forEach(attr => {const attrName = attr.name; // 属性名const exp = attr.value; // 属性值if (this.isDirective(attrName)) {// l-textconst dir = attrName.substring(2); // 拿出text// 执行指令this[dir] && this[dir](node, this.$vm, exp);}if (this.isEvent(attrName)) {}})} else if (this.isInterpolation(node)) {// 文本this.compileText(node);}// 递归子节点if (node.childNodes && node.childNodes.length > 0) {this.compile(node);}})
}