初識

• 假設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);}})
}