关于mvvm原理实现，模拟vue(2)-----模板编译

上一节实现了对data的数据深度劫持，以及到实例上的挂载，此次主要解决的问题是对模板进行编译

//编译
function compile(el,vm) {
    //获取el模板
    el = vm.$el = document.querySelector(el);
    //将el模板转入内存中
    let frg = document.createDocumentFragment();
    let child = null;
    while(child = el.firstChild){
        frg.appendChild(child);
    }
    change(frg);
    //编译frg内的value值
    function change(frg){
        Array.from(frg.childNodes).forEach(node=>{
            //获取到node节点的值
            let text = node.textContent;
            let val = vm;
            //文本节点且满足我们的小胡子语法，则进行数据绑定
            if(node.nodeType===3&&/\{\{(.*)\}\}/.test(text)){
                RegExp.$1.split(".").forEach(k=>val = val[k]);
                node.textContent=text.replace(/\{\{(.*)\}\}/,val);
            }
            //深度编译
            if(node.childNodes){
                change(node);
            }
        })
    }

    el.appendChild(frg);
}