标签：opera back off offset 要求 浏览器 fse 扩展 ber
一：完整代码
;(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的一个模型，它一方面可以让你用较低的成本操作它，在适当的时候按照模型修改真实的对象以便提高效率，
另一方面则为你构建抽象时提供了便利
标签：opera back off offset 要求 浏览器 fse 扩展 ber
原文地址：https://www.cnblogs.com/zhenfeishi/p/13399163.html
