默写一个简单的虚拟DOM
Posted 现刻
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了默写一个简单的虚拟DOM相关的知识，希望对你有一定的参考价值。
`<html>
<body>
</body>
<script>
class Element{
constructor(tagName, props, children) {
this.tagName = tagName
this.props = props
this.children = children
}
render () {
const {tagName, props, children=[]} = this
const el = document.createElement(tagName)
for(const att in props) {
el.setAttribute(att,props[att])
}
children.forEach(function(child){
const childEl = child instanceof Element ? child.render() : document.createTextNode(child)
el.appendChild(childEl)
})
return el
}
}
function el (tagName, props, children) {
return new Element(tagName, props, children)
}
const ul = el(\'ul\',{class: \'list\'},[
el(\'li\',{class: \'item\'},[\'1\',\'-\']),
el(\'li\',{class: \'item\'},[\'2\',2,false]),
el(\'li\',{class: \'item\'},[\'3\']),
])
document.querySelector(\'body\').appendChild(ul.render())</script>
</html>`
打开编辑器默写虚拟DOM，如果运行错误就重写，你是在第几次完成的呢？
以上是关于默写一个简单的虚拟DOM的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段