深刻淺出vue原理(3、編譯模板Compile)

vue原理系列

vue原理一

vue原理二

vue原理三

vue原理四

編譯模板Compile

匹配花括號裏的內容並替換

<div id="app">
  <p>{{ a.a }}</p>
  <p>{{ b }}</p>
</div>
複製代碼

el=document.querySelector('#app');
let fragment = document.createDocumentFragment();
while(child=el.firstChild){
    fragment.append(child)
}
el.appendChild(fragment)
------------------------------------------------------------------------仍是挺好玩的
複製代碼

js拿到el綁定的元素

vm.$el=document.querySelector(el);
複製代碼

轉移到內存中

let fragment = document.createDocumentFragment()
複製代碼

這邊一個小技巧就是一直取el中的第一個並插入到fragment就能夠一直循環了

while(child=vm.$el.firstChild){
    fragment.append(child)
}
複製代碼

遍歷文檔片斷 fragment 用Array.from把類數組轉成數組而後遍歷每一層，拿到每一個節點， 判斷節點是不是文本節點(nodeType===3)

(developer.mozilla.org/zh-CN/docs/…)

，從節點裏取出文本，並且正則匹配是正確的就是要替換的內容,而後對取出的內容進行拆解成數組，拆的數組再進行遍歷,而後一個小技巧每次遍歷都取出來賦值回去那個局部變量，而後把變量傳回去

若是沒有取到須要遞歸往下取 （我以爲其實能夠用for of也是能夠遍歷，但有兼容性問題）

replace(frag)

function replace(frag){
    Array.from(fragment.childNodes).forEach(function(node){
        let  text = node.textContent;
        let reg = /\{\{(.*)\}\}/;
        if(node.nodeType === 3 && reg.test(text)){
            console.log(RegExp.$1)  //a.a.a  a.b
            let arr = (RegExp.$1.split('.')  //[a,a]
            let val = vm;
            arr.forEach(function(key){
                val = val[k]; //第一次val[k]  第二次val[k][k] ...
            })
            node.textContent = text.replace(reg.val)
            
        }
        if(node.childNodes){
            replace(node)
        }
    })
}
複製代碼

而後在放進$el

vm.$el.appendChild(fragment)
複製代碼