前端答疑

Copy 
1function asyncToGenerator(generatorFunc) {
2  return function () {
3    const genFn = generatorFunc.apply(this, arguments);
4    const next = (data) => {
5      const { value, done } = genFn.next(data);
6      if (done) return;
7      value.then((data) => {
8        next(data);
9      });
10    };
11    next(arguments);
12  };
13}

Copy 
1{
2  tag: 'DIV',
3  attrs:{
4  id:'app'
5  },
6  children: [
7    {
8      tag: 'SPAN',
9      children: [
10        { tag: 'A', children: [] }
11      ]
12    },
13    {
14      tag: 'SPAN',
15      children: [
16        { tag: 'A', children: [] },
17        { tag: 'A', children: [] }
18      ]
19    }
20  ]
21}
22//把上诉虚拟Dom转化成下方真实Dom
23<div id="app">
24  <span>
25    <a></a>
26  </span>
27  <span>
28    <a></a>
29    <a></a>
30  </span>
31</div>

Copy 
1// 真正的渲染函数
2function _render(vnode) {
3  // 如果是数字类型转化为字符串
4  if (typeof vnode === "number") {
5    vnode = String(vnode);
6  }
7  // 字符串类型直接就是文本节点
8  if (typeof vnode === "string") {
9    return document.createTextNode(vnode);
10  }
11  // 普通DOM
12  const dom = document.createElement(vnode.tag);
13  if (vnode.attrs) {
14    // 遍历属性
15    Object.keys(vnode.attrs).forEach((key) => {
16      const value = vnode.attrs[key];
17      dom.setAttribute(key, value);
18    });
19  }
20  // 子数组进行递归操作 这一步是关键
21  vnode.children.forEach((child) => dom.appendChild(_render(child)));
22  return dom;
23}