jsx vnode

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script>
    function h(nodeName, attributes, ...args) {
      let children = args.length ? [].concat(...args) : null;
      return { nodeName, attributes, children };
    }
    function render(vnode) {
      if (typeof vnode==='string') return document.createTextNode(vnode);
      let n = document.createElement(vnode.nodeName);
      Object.keys(vnode.attributes || {}).forEach( k => n.setAttribute(k, vnode.attributes[k]) );
      (vnode.children || []).forEach( c => n.appendChild(render(c)) );
      return n;
    }

    let div=h('div',{id:'foo'},'hello');
    let vnode=render(div);
    document.body.appendChild(vnode);
  </script>
</body>

</html>

https://codepen.io/developit/pen/aOYywe

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容