58 lines
1.5 KiB
HTML
58 lines
1.5 KiB
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>
|
|
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<script type="text/babel">
|
|
/*@jsx createElement*/ //@jsx babeld的子执行指令
|
|
let data=[
|
|
{name:'陈轩'},
|
|
{name:'王五'},
|
|
{name:"李四"},
|
|
{name:"赵六"}
|
|
];
|
|
let vDom=(<div id="app" name="chenxuan">
|
|
<ul>
|
|
{
|
|
data.map((item,index)=>{
|
|
return (<li key={index}>{item.name}</li>)
|
|
})
|
|
}
|
|
</ul>
|
|
</div>);
|
|
function createElement(nodeName,attr,...args){
|
|
return {nodeName:nodeName,attr:attr,children:[].concat(...args)}
|
|
}
|
|
function render(vnode){
|
|
//文本节点
|
|
if(vnode.split){
|
|
console.log(vnode)
|
|
return document.createTextNode(vnode);
|
|
}
|
|
//元素节点
|
|
else{
|
|
let node=document.createElement(vnode.nodeName);
|
|
let attr=vnode.attr || {};
|
|
Object.keys(attr).forEach((k)=>{
|
|
node.setAttribute(k,attr[k])
|
|
});
|
|
|
|
(vnode.children || []).forEach((n)=>{
|
|
node.appendChild(render(n))
|
|
})
|
|
return node;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
let dom=render(vDom);
|
|
document.body.appendChild(dom);
|
|
</script>
|
|
</body>
|
|
</html> |