【ES6】Proxy的高级用法,实现一个生成各种 DOM 节点的通用函数dom

下面的例子则是利用get拦截,实现一个生成各种 DOM 节点的通用函数dom。

<body>
</body>

<script>


const dom = new Proxy({}, {
  get(target, property) {
    return function(attrs = {}, ...children) {
      const el = document.createElement(property);
      for (let prop of Object.keys(attrs)) {
        el.setAttribute(prop, attrs[prop]);
      }
      for (let child of children) {
        if (typeof child === 'string') {
          child = document.createTextNode(child);
        }
        el.appendChild(child);
      }
      return el;
    }
  }
});

const el = dom.div({},
  'Hi, my name is ',
  dom.a({href: 'https://blog.csdn.net/qq_22744093?type=blog'}, 'kexuexiong'),
  '. I like:',
  dom.ul({},
    dom.li({}, 'The web'),
    dom.li({}, 'Food'),
    dom.li({}, '…actually that\'s it')
  )
);

document.body.appendChild(el);

</script>

输出结果:
【ES6】Proxy的高级用法,实现一个生成各种 DOM 节点的通用函数dom_第1张图片

你可能感兴趣的:(前端,es6)