vue的整个架构的流程图
image.png
compiler目的实现解析html里面的vue指令,例如：v-test,v-html,v-model @click等等
//compile工具库
const compileUtil = {
getValue(expr,vm)
{
//根据 字符串 test.name.key 来获取实际对象的 test[name][key] = 123
return expr.split(".").reduce((data,currentVal)=>{
//不断递归循环直到 expr.split(".")的数组完毕
return data[currentVal];
},vm.$data)
//vm.$data 是reduce的初始值
},
text(node,expr,vm)
{
let value;
console.log(expr)
if(expr.indexOf('{{')!==-1)
{
//replace args[0] = "{{xxx}}" args[1] = xxx
value = expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{
console.log(args[1])
return this.getValue(args[1],vm)
})
}
else
{
this.getValue(expr,vm)
}
this.updater.textUpdater(node,value)
},
html(node,expr,vm)
{
const value = this.getValue(expr,vm)
this.updater.htmlUpdater(node,value)
},
model(node,expr,vm)
{
const value = this.getValue(expr,vm)
this.updater.modelUpdater(node,value)
},
on(node,expr,vm,detailStr)
{
let fn = vm.$options.methods && vm.$options.methods[expr]
//把功能绑定到 vm执行
node.addEventListener(detailStr,fn.bind(vm),false)
},
bind(node,expr,vm,detailStr)
{
node.setAttribute(detailStr,expr)
},
//视图更新函数
updater:{
textUpdater(node,value)
{
node.textContent = value
},
htmlUpdater(node,value)
{
node.innerHTML = value;
},
modelUpdater(node,value)
{
//input 里面的value值
node.value = value;
}
}
}
class Compiler
{
constructor(el,vm)
{
this.el = this.isElementNode(el) ? el:document.querySelector(el);
this.vm = vm;
// 1. 将预编译的元素节点放入文档碎片对象中，避免DOM频繁的回流与重绘，提高渲染性能
const fragments = this.node2fragments(this.el)
//2.编译模板
this.compile(fragments)
//3. 追加子元素到根元素
this.el.appendChild(fragments);
}
compile(fragments)
{
// 1.获取子节点
let childNodes = fragments.childNodes
//2.递归循环编译
for(var i = 0;i<childNodes.length;i++)
{
let child = childNodes[i]
if(this.isElementNode(child))
{
this.compileElement(child)
}
else
{
this.compileText(child)
}
if(child.childNodes && child.childNodes.length)
{
this.compile(child)
}
}
}
compileText(node)
{
//解析温饱中的 {{ xxx}}
const content = node.textContent;
//(.+)默认是贪婪匹配
//(.+?)为惰性匹配
if(/\{\{(.+?)\}\}/.test(content)){
console.log("testtt")
console.log(content)
compileUtil['text'](node,content,this.vm);
}
}
compileElement(node)
{
//v-html v-test v-mode v-bind v-on:click
let attributes = node.attributes
for(var i =0;i<attributes.length;i++)
{
//object
let attr = attributes[i]
//-text="msg" v-html=htmlStr type="text" v-model="msg"
let {name,value} = attr
if(this.isDirector(name))
{
let [,directive] = name.split("-")
let [compileKey,detailStr] = directive.split(":");
//根据 属性来处理对应的指令
compileUtil[compileKey](node,value,this.vm,detailStr);
// 删除有指令的标签属性 v-text v-html等，普通的value等原生html标签不必删除
node.removeAttribute('v-' + directive);
}
else if(this.isEventName(name))
{
let [,detailStr] = name.split("@")
compileUtil['on'](node,value,this.vm,detailStr)
node.removeAttribute('@'+detailStr)
}
else;
}
}
isEventName(attrName)
{
//判断是否@开头 事件绑定
return attrName.startsWith('@')
}
isDirector(attrName)
{
//判断是否vue特性标签
return attrName.startsWith('v-')
}
isElementNode(node)
{
// nodeType 属性返回节点类型。
// 如果节点是一个元素节点，nodeType 属性返回 1。
// 如果节点是属性节点, nodeType 属性返回 2。
// 如果节点是一个文本节点，nodeType 属性返回 3。
// 如果节点是一个注释节点，nodeType 属性返回 8。
//元素节点的nodeType属性等于 1
return node.nodeType === 1
}
node2fragments(el)
{
const f = document.createDocumentFragment()
let firstChild
while(firstChild = el.firstChild)
{
//这里的虚拟节点 append之后 就会把被添加过的节点从el中删除掉
f.appendChild(firstChild)
}
return f;
}
}
