深刻浅出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)
复制代码