【JS】默写一个简单的虚拟DOM

默写一个简单的虚拟DOM

sixpx发布于 今天 09:58

`<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,如果运行错误就重写,你是在第几次完成的呢?

javascript虚拟DOM

阅读 49发布于 今天 09:58

本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

avatar

sixpx

做了6年的业务系统干了6年体力活

144 声望

0 粉丝

0 条评论

得票时间

avatar

sixpx

做了6年的业务系统干了6年体力活

144 声望

0 粉丝

宣传栏

`<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,如果运行错误就重写,你是在第几次完成的呢?

以上是 【JS】默写一个简单的虚拟DOM 的全部内容, 来源链接: www.h5w3.com/113103.html

回到顶部