BFE.devAI解答 - JavaScript 代码题
113. Virtual DOM I

实现思路：

• 序列化：遍历DOM树，转换为对应的object literal格式
• 反序列化：遍历object literal，构建新的DOM树

实现序列化：virtualize()

根据React的“输出结果”，我们知道一个element可以转化为 {type, props} 的格式，props包含了元素的属性(props)和子元素(children)。

我们的实例输出的是一个JSX标签，JSX转换为element后的结构同上面描述的一样的。

因此，我们遍历HTML树即可得到一个对应的object literal表达：

function virtualize(node) {  if (node.nodeType === Node.TEXT_NODE) {    return node.textContent.trim();  } else { // 是element    const tagName = node.tagName.toLowerCase();    const children = Array.from(node.childNodes)      .map(child => virtualize(child));    const attrs = Array.from(node.attributes)      .reduce((obj, attr) => {        obj[attr.name] = attr.value;        return obj;      }, {});    return {      type: tagName,      props: { children, ...attrs },    }  }}

遍历到文本节点时，直接返回文本内容；遍历到element节点时，则用tagName作为对象的type值，属性值用childNodes和attributes得到。

示例输出的结果为：

{
  "type": "div",
  "props": {
    "children": [
      {
        "type": "h1",
        "props": {
          "children": "this is"
        }
      },
      {
        "type": "p",
        "props": {
          "className": "paragraph",
          "children": [
            "a",
            {
              "type": "button",
              "props": {
                "children": "button"
              }
            },
            "from",
            {
              "type": "a",
              "props": {
                "href": "https://bfe.dev",
                "children": [
                  {
                    "type": "b",
                    "props": {
                      "children": "BFE"
                    }
                  },
                  ".dev"
                ]
              }
            }
          ]
        }
      }
    ]
  }
}

实现反序列化：render()

根据React的“输出结果”，我们知道一个element可以转化为 {type, props} 的格式，props包含了元素的属性(props)和子元素(children)。

因此，我们通过遍历object literal，在浏览器中构建一颗DOM树，HTML是以element的形式展示的，因此我们可以在createElement()函数遍历时递归执行并返回标签。

function render(node) {  if(typeof node === 'string') {    return document.createTextNode(node);  }  const $el = document.createElement(node.type);  for(let [key, val] of Object.entries(node.props)) {    if(key === 'children') {      for(const child of val) {        $el.appendChild(render(child));      }    } else if (/^on/.test(key)) {      // 不处理事件处理程序    } else {      $el.setAttribute(key, val);    }  }  return $el;}

完整实现

function virtualize(node) {  if (node.nodeType === Node.TEXT_NODE) {    return node.textContent.trim();  } else { // 是element    const tagName = node.tagName.toLowerCase();    const children = Array.from(node.childNodes)      .map(child => virtualize(child));    const attrs = Array.from(node.attributes)      .reduce((obj, attr) => {        obj[attr.name] = attr.value;        return obj;      }, {});    return {      type: tagName,      props: { children, ...attrs },    }  }}function render(node) {  if(typeof node === 'string') {    return document.createTextNode(node);  }  const $el = document.createElement(node.type);  for(let [key, val] of Object.entries(node.props)) {    if(key === 'children') {      for(const child of val) {        $el.appendChild(render(child));      }    } else if (/^on/.test(key)) {      // 不处理事件处理程序    } else {      $el.setAttribute(key, val);    }  }  return $el;}// test case// <div>//  <h1> this is </h1>//  <p className="paragraph"> a <button> button </button> from <a href="https://bfe.dev"><b>BFE</b>.dev</a></p>// </div>const node = document.createElement('div')node.innerHTML = '<h1> this is </h1><p className="paragraph"> a <button> button </button> from <a href="https://bfe.dev"><b>BFE</b>.dev</a></p>'const el = virtualize(node);const $root = document.querySelector('#root')$root.appendChild(render(el));

总结

• 序列化：将DOM tree遍历转换为object literal格式
• 反序列化：遍历object literal，在浏览器中构建一颗DOM树
• 需要注意的是：自定义组件，事件处理函数等自定义操作不在考虑范围之内；只考虑标准HTML标签；属性名为camelCase形式。