实现虚拟DOM
一：完整代码
;(function (w){
function createElement(type, attribute, ...childs){ //创建虚拟DOM
let element = {
type: ‘‘,
attribute: {},
childs: []
};
element.type = type;
element.attribute = attribute;
for(let item of childs){
element.childs.push(item);
}
return element;
}
function render(vElement, domNode){ //把虚拟DOM渲染到真实DOM节点
let elementList = [], //保存着一些元素数组，这些元素数组的第一项是父元素，其他项是子元素
listItem = [], //迭代中临时保存elementList的每一项
topE = [vElement], //保存着上一层元素列表
tempE = [], //topE的临时变量
elementRef = [], //保存元素引用，不保存文本节点的引用
elementRefs = []; //另一个，交替使用
while(topE.length != 0){ //生成符合符合要求的elementList数组
for(let i = 0, len = topE.length; i < len; ++i){ //创建父元素并添加到listItem
let pe = null;
if(elementRef.length != 0){
pe = elementRef[i];
}else{
pe = document.createElement(topE[i].type);
for(let k in topE[i].attribute){
pe[k] = topE[i].attribute[k];
}
}
listItem.push(pe); //遍历并创建子元素添加到listItemlet
ce = topE[i].childs;
for(let j =0, lens = ce.length; j < lens; ++j){
if(typeof(ce[j]) == ‘string‘){ //如果子元素是字符串let
textElement = document.createTextNode(ce[j]); //创建文本节点
listItem.push(textElement);
}else{ //如果子元素是对象
let e = document.createElement(ce[j].type); //创建元素节点
for(let k in ce[j].attribute){
e[k] = ce[j].attribute[k];
}
listItem.push(e);
elementRefs.push(e); //保存元素节点的引用
tempE.push(ce[j]); //放入tempE
}
} //把listItem添加到elementList，并清空listItem，为下一次循环做准备
elementList.push(listItem);
listItem =[];
} //交替使用
elementRef = elementRefs;
elementRefs =[];
topE = tempE;
tempE = [];
}
for(let i = elementList.length -1; i >= 0; --i){ //从后向前对elementList数组进行处理
let temp = elementList[i];
for(let j = 1, len = temp.length; j < len; ++j){
temp[0].appendChild(temp[j]);
}
}
domNode.innerHTML = "";
domNode.appendChild(elementList[0][0]); //把生成的真实dom元素添加到给定的元素内
}
let Vdom = {
createElement,
render
};
w.Vdom = Vdom;
})(window);二：语法说明
1：该程序向全局暴露了一个Vdom对象，Vdom提供了两个方法，createElement()，render()，分别用于创建元素及把虚拟dom渲染到真实dom节点
2：createElement()的第一个参数是元素类型，比如p，h1等，第二个参数是属性集合对象，比如{title: ‘Hello World‘, style: ‘color:red;‘}，之后可以接受任意个参数，每个参数都是一个元素节点或者文本节点
3：render()的第一个参数是用createElement()方法创建的虚拟元素，第二个参数是将要渲染到的区域元素
三：需要注意的点
提供的Vdom.createElement()、Vdom.render()函数和
React的React.createElement()及ReactDOM.render()方法非常相似
四：案例演示
新建一个文件夹，进入，新建一个vdom.js文件，把完整代码粘贴进去，保存，再新建一个html文件，粘贴以下代码，保存，然后双击打开，在浏览器里应该可以看到效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虚拟dom的实现</title>
</head>
<body>
<div id="root">
<h1>一秒后开始计时</h1>
</div>
<script src="./vdom.js"></script>
<script>
function tick(){
const e = Vdom.createElement(
‘div‘,
{},
Vdom.createElement(
‘h1‘,
{style: ‘color:red;‘, title: ‘时间‘},
‘time:‘,
(new Date()).toLocaleTimeString()
)
);
Vdom.render(e, document.getElementById(‘root‘));
}
setInterval(tick, 1000);
</script>
</body>
</html>五：实现思路及代码组织
把createElement()的参数转化为特定的js对象来表示虚拟dom，
封装函数createElement() 把生成的js对象转化为真实的dom挂载到指定的元素上，
封装函数render() 把前面两个函数放在自执行函数内，
防止污染全局变量，然后将其挂载到Vdom对象上，同时把Vdom暴露给window
六：扩展
在render()函数内根据js虚拟DOM创建真实DOM节点时，有机会把创建的真实DOM节点的引用挂载到虚拟DOM上，
这样就可以继续实现组件化及diff算法
虚拟DOM顾名思义，只是真实DOM的一个模型，它一方面可以让你用较低的成本操作它，在适当的时候按照模型修改真实的对象以便提高效率，
另一方面则为你构建抽象时提供了便利
相关推荐
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children