一个简易的MVVM函数实现
Vue原理看的一脸懵逼，挣扎了三天，效率太低，于是决定不看了，自己先把功能手撸出来，然后再来对比Vue是怎么实现的。
演示地址：一个简易的MVVM函数实现
下载地址：一个简易的MVVM函数实现
首先节点是这样的
<div id="mm">
<div>我的全名是 {{ firstName + ' ' + lastName }}
<div>今年 {{ age }} 岁了.</div>
<span>我的名字是{{ firstName }} </span>
<div> 我的昵称是 {{ name }}</div>
</div>
</div>
数据是这样的
const appData = {
firstName: '凯瑟琳',
lastName: '美第奇',
name: '凯特',
age: 14
};
于是我定义了bindViewToData(document.getElementById('mm'), appData)函数把他们联系在一起。下面bindViewToData函数的实现。
bindViewToData(el,data){
let nodes = createNode(el)
let vnodes = compileHTML(nodes, data)
createDom(el.children, vnodes)
beginListenInput()
setDataModel(data, nodes)
}
一 、创建虚拟对象nodes
由于dom树极其庞大，所以我要使用createNode将dom转化成我定义的nodes对象，通过判断el是否有children的方式，对整个dom树进行递归，有一个元素就生成一个节点node，同时给每一个节点定义唯一的index值，这样在后面用compileHTML函数编译时把data中的所有变量与节点的index绑定，这样在data中有变量变化时，就可以获得index值，从而可以定位到node节点实现dom局部更新。
/* create VM tree Node from real dom
* index is only id of every node
*/
let index = 0
const createNode = (el, nodes = []) => {
let childs = el.children
childs = Array.from(childs)
if (!childs.length) {
return
} else {
childs.forEach((child, idx) => {
index++
nodes.push({
index,
name: child.tagName,
varText: child.innerText,
text: child.innerText,
children: []
})
createNode(child, nodes[idx].children)
})
}
return nodes
}
下图是真实的dom与虚拟node对比
真实的dom结构，非常复杂庞大
用来表示dom的node节点，只有name、children等几个元素
二、编译nodes，将占位变量替换成的data中的值
在compileHTML 中递归遍历nodes节点，将每个节点中varText中的变量名称依次取出，在data中找到对应的值将变量替换，再将替换好的值赋值给node中的text属性。在替换同时，将变量与node的index进行绑定。
const compileHTML = (nodes, data) => {
nodes.forEach(node => {
node = doCompile(node, data)
if (node.children.length) {
compileHTML(node.children, data)
}
})
return nodes
}
const doCompile = (node, data) => {
let inner = node.varText
let REGC = /{{([^{^}]+)}}/g
node.text = inner.replace(REGC, (val, match, index) => {
//remove space add quote
match = match.replace(/[\s\+\'\"]+/g, ' ')
// take case {{ aa + bb }} for example ,
// key means variable aa and bb,
// i means index which variable first be finded ,is 0 and 5
return match.replace(/[a-zA-Z_]+/g, (key, i) => {
//link the dataKey to node index,when dataKey change
// when dataKey change , only change the indexed node
varTable = createVarTable(node.index, key)
return data[key]
})
})
return node
}
// create varTable to VM by nodes idx
let varTable = {}
const createVarTable = (idx, value) => {
if (!varTable[value]) {
varTable[value] = []
}
varTable[value].push(idx)
varTable[value]=[...new Set(varTable[value])]
return varTable
}
下图是更新后的nodes与varTable节点映射
此时node的text已经将变量替换成相应的值了
varTable是一个关于变量的索引数组，数组中的值对应node的index
三、将初次编译后nodes全部更新到dom中
递归遍历nodes，将编译后的text值更新到el中
// update dom's data after compile
const createDom = (el, vnodes) => {
for (let i = 0; i < el.length; i++) {
el[i].innerText = vnodes[i].text
if (vnodes[i].children.length) {
createDom(el[i].children, vnodes[i].children)
}else{
return
}
}
}
四、给页面中input按钮添加监听事件
input监听事件，使得当输入值变化时，可以将值同步给data中的变量。
//listen input button ,when it change , change the data
const beginListenInput = () => {
let enumInput = ["firstName", "lastName", 'age','name']
for (let inputStr of enumInput) {
let dom = document.getElementById(inputStr)
dom.addEventListener('input', (val) => {
data[inputStr] = val.target.value
})
}
}
五、使用Object.defineProperty从新为变量定义get和set方法
首先遍历data，对每一个变量添加defineProperty方法，defineProperty(data, dataKey, { get(){} , set(){} )的意思是当我们调用对象的值data[dataKey]时，所使用的新的get和set方法。在这里，由于set方法中有为变量赋值的动作，为了避免重复引用，我使用了this['_' + dataKey] = value进行赋值，这样导致在get中要判断是否存在this['_' + dataKey]值，若存在，则返回该值，若不存在，则返回原始变量值（对应未发生改变的情况）。
之后根据变量的名称在varTable中找到其所在的node索引，将所有索引投入updateDom进行局部编译更新。为了提升效率，这里使用了异步更新setTimeout(updateDom(el,nodes,targetIdx),0)
setTimeout会生成一个macro task链表，将在所有micro数组执行完毕后调用，不会因为更新dom而造成程序卡顿
//defineProperty for all [key,value] in data
const setDataModel = (data, nodes) => {
let dataKVs = Object.entries(data)
dataKVs.forEach((dataKV, sidx) => {
let dataKey=dataKV[0],dataVal=dataKV[1]
defineSet(dataKey, dataVal, nodes)
})
}
const defineSet = (dataKey, dataVal, nodes) => {
Object.defineProperty(data, dataKey, {
get: function() {
return this['_' + dataKey] || dataVal;
},
/* 1. because in set , we use value to set data[dataKey],
* will use set method,this will call set method for ever,
* so we use this['_' + dataKey] to set value
* 2. to improve efficiency we use setTimeout to update dom
* the macro tasklist will done in the last
*/
set: function(value) {
let targetVmIndex = []
let vNodeIndexArr = varTable[dataKey]
vNodeIndexArr = [...new Set(vNodeIndexArr)]
this['_' + dataKey] = value
vNodeIndexArr.forEach(targetIdx => {
setTimeout(updateDom(el,nodes,targetIdx),0)
})
}
});
}
六、局部编译更新dom
我们在nodes中进行分层遍历，由于传过来的targetIdx对应着node.index，是全局唯一的，我们只要在任意一层找到该值，就可以结束本次查找，将其进行编译，同时将编译后的node.text更新给dom，如果在当前层找不到对应的node，则根据findDomThisLayer的信息递归进入下一层进行查找，直至找到。
const compileOneNode = (node, data) => {
return doCompile(node, data)
}
/*
* update dom layer by layer , becuase the node's index is unique
* so if find in this layer ,we will finish find ,
* do not need to go into the next layer
* */
const updateDom = (el,nodes, targetIdx) => {
let findDomThisLayer=false
nodes.forEach((node, idx) => {
if (node.index == targetIdx) {
let vnode = compileOneNode(node, data)
el.children[idx].innerText = vnode.text
findDomThisLayer=true
}
})
if(!findDomThisLayer){
nodes.forEach((node, idx) => {
updateDom(el.children[idx],nodes[idx].children, targetIdx)
})
}
}
至此，一个简单的MVVM双向绑定功能完成
