初識

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue --- 2.0 编译的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。