收集

递归遍历无限层级结构并渲染至页面

将类似以下JSON表示的树状结构(可以无限层级)通过parseDOM函数(使用document.createElement, document.createTextNode, appendChild等方法) 生成一颗DOM树(返回一个element元素)

<script>
  const JsonTree = [
    {
      "tagName": "ul",
      "props": {
        "className": "list",
        "data-name": "jsontree"
      },
      "children": "空的ul"
    },
    {
      "tagName": "a",
      "props": {
        "href": "https://www.aliyun.com",
        "target": "_blank"
      },
      "children": [
        {
          "tagName": "span",
          "props": {
            "className": "span"
          },
          "children": "阿里云child"
        }
      ]
    }
  ];

  var parentDom = document.querySelector('#app');
  function parseDOM(JsonTree, parentDom) {console.log(parentDom)
    JsonTree.forEach(item => {
      let { tagName, props, children } = item;
      let dom = document.createElement(tagName);
      for (let state in props) {
        dom.setAttribute(state, props[state]);
      }
      if (children && children.length > 0) {
        if (typeof (children) === 'string') {
          dom.innerHTML = children;
        } else {
          parseDOM(children, dom);
        }
      }
      parentDom.appendChild(dom);
    })
  };
  console.log(parseDOM(JsonTree, parentDom))
</script>

JS 异步解决方案的发展历程以及优缺点。

1. 回调函数（callback）

setTimeout(() => {
    // callback 函数体
}, 1000)

缺点：回调地狱，不能用 try catch 捕获错误，不能 return

回调地狱的根本问题在于：

缺乏顺序性：回调地狱导致的调试困难，和大脑的思维方式不符
嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身，即（控制反转）
嵌套函数过多的多话，很难处理错误

ajax('XXX1', () => {
    // callback 函数体
    ajax('XXX2', () => {
        // callback 函数体
        ajax('XXX3', () => {
            // callback 函数体
        })
    })
})

优点：解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。）

2. Promise

Promise就是为了解决callback的问题而产生的。

Promise 实现了链式调用，也就是说每次 then 后返回的都是一个全新 Promise，如果我们在 then 中 return ，return 的结果会被 Promise.resolve() 包装

优点：解决了回调地狱的问题

ajax('XXX1')
  .then(res => {
      // 操作逻辑
      return ajax('XXX2')
  }).then(res => {
      // 操作逻辑
      return ajax('XXX3')
  }).then(res => {
      // 操作逻辑
  })

缺点：无法取消 Promise ，错误需要通过回调函数来捕获

3. Generator

特点：可以控制函数的执行，可以配合 co 函数库使用

function *fetch() {
    yield ajax('XXX1', () => {})
    yield ajax('XXX2', () => {})
    yield ajax('XXX3', () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()

4. Async/await

async、await 是异步的终极解决方案

优点是：代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题

缺点：await 将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

async function test() {
  // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
  // 如果有依赖性的话，其实就是解决回调地狱的例子了
  await fetch('XXX1')
  await fetch('XXX2')
  await fetch('XXX3')
}

下面来看一个使用 await 的例子：

let a = 0
let b = async () => {
  a = a + await 10
  console.log('2', a) // -> '2' 10
}
b()
a++
console.log('1', a) // -> '1' 1

对于以上代码你可能会有疑惑，让我来解释下原因

首先函数 b 先执行，在执行到 await 10 之前变量 a 还是 0，因为 await 内部实现了 generator ，generator 会保留堆栈中东西，所以这时候 a = 0 被保存了下来
因为 await 是异步操作，后来的表达式不返回 Promise 的话，就会包装成 Promise.reslove(返回值)，然后会去执行函数外的同步代码
同步代码执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 0 + 10

上述解释中提到了 await 内部实现了 generator，其实 await 就是 generator 加上 Promise的语法糖，且内部实现了自动执行 generator。如果你熟悉 co 的话，其实自己就可以实现这样的语法糖。

# 收集

# 递归遍历无限层级结构并渲染至页面

# JS 异步解决方案的发展历程以及优缺点。

# 1. 回调函数（callback）

# 2. Promise

# 3. Generator