题干

用 Javascript 对象模拟 DOM 树，并实现它的 render 方法，通过调用该方法可以转成真正的 DOM 节点。例如我们已经实现了 element.js，通过 require(‘element.j s’)，我们可以定义 ul，如下：

  1. const el = require('./element.js')；
  2. const ul = el('ul', {id: 'list'}, [
  3.   el('li', {class: 'item'}, ['Item 1']),
  4.   el('li', {class: 'item'}, ['Item 2']),
  5.   el('li', {class: 'item'}, ['Item 3'])
  6. ])

现在 ul 只是一个 JavaScript 对象表示的 DOM 结构，页面上并没有这个结构。我们可以根据这个 ul 构建真正的

    ，最终当我们这样调用时，
    const ulRoot = ul.render();
    document.body.appendChild(ulRoot);
    中就有了真正的 DOM 结构，如下

    1. <ul id='list'>
    2.   <li class='item'>Item 1</li>
    3.   <li class='item'>Item 2</li>
    4.   <li class='item'>Item 3</li>
    5. </ul>

    也就是说，我们需要实现 element.js。

    实现

    element.js

    //虚拟dom，参数分别为标签名、属性对象、子DOM列表
var el = function(tagName, props, children) {
    //保证只能通过如下方式调用：new VElement
    if (!(this instanceof VElement)) {
        return new VElement(tagName, props, children);
    }

    //可以通过只传递tagName和children参数
    if (util.isArray(props)) {
        children = props;
        props = {};
    }

    //设置虚拟dom的相关属性
    this.tagName = tagName;
    this.props = props || {};
    this.children = children || [];
    this.key = props ? props.key : void 666;
    var count = 0;
    util.each(this.children, function(child, i) {
        if (child instanceof VElement) {
            count += child.count;
        } else {
            children[i] = '' + child;
        }
        count++;
    });
    this.count = count;
}

export default el

    参考
    https://blog.csdn.net/suhuaiqiang_janlay/article/details/80256561