【前端芝士树】虚拟DOM挂载是如何实现的
问题描述
给出如下虚拟dom的数据结构,如何实现简单的虚拟dom,渲染到目标dom树
//样例数据
let demoNode = ({
tagName: 'ul',
props: {'class': 'list'},
children: [
({tagName: 'li', children: ['douyin']}),
({tagName: 'li', children: ['toutiao']})
]
});
渲染结果如下所示:
<ul class="list">
<li>douyin</li>
<li>toutiao</li>
</ul>
用innerHTML实现RenderNode
/**
* @param node
* @return {string}
* */
function RenderNode(node) {
let result='';
if(typeof node === 'string'){
result += node;
} else if(Array.isArray(node)){
node.forEach(item => {
result += RenderNode(item);
});
}else{
let tag = node.tagName || 'div';
let props = '';
if (node.props) {
let nodeProps = node.props;
for (let key in nodeProps) {
props += (` ${key}="${nodeProps[key]}"`);
}
}
if(node.children && node.children.length){
result = `<${tag + props}>${RenderNode(node.children)}</${tag}>`;
}
}
return result;
}
let renderHTML = RenderNode(demoNode);
console.log(renderHTML);
let main = document.getElementById('main');
main.innerHTML = renderHTML;
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。