1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>6_手写_将虚拟 Dom 转化为真实 Dom（类似的递归题-必考）</title>
  8. </head>
  10. <body>
  11.   <script>
  12.     const VDOM = {
  13.       tag: 'DIV',
  14.       attrs: {
  15.         id: 'app'
  16.       },
  17.       children: ['dd', {
  18.           tag: 'SPAN',
  19.           children: [{
  20.             tag: 'A',
  21.             children: ['aa']
  22.           }]
  23.         },
  24.         {
  25.           tag: 'SPAN',
  26.           children: [{
  27.               tag: 'A',
  28.               children: ['bb']
  29.             },
  30.             {
  31.               tag: 'A',
  32.               children: ['cc']
  33.             }
  34.           ]
  35.         }
  36.       ]
  37.     };
  39.     // 渲染函数
  40.     function _render(vnode) {
  41.       // 若是数字类型转化为字符串，因为 document.createTextNode(vnode: string)
  42.       if (typeof vnode === 'number') {
  43.         vnode = String(vnode)
  44.       }
  45.       if (typeof vnode === 'string') {
  46.         // 返回文本节点对象
  47.         return document.createTextNode(vnode)
  48.       }
  49.       // 生成普通 DOM
  50.       const dom = document.createElement(vnode.tag)
  51.       if (vnode.attrs) {
  52.         Object.keys(vnode.attrs).forEach((key) => {
  53.           const value = vnode.attrs[key]
  54.           dom.setAttribute(key, value)
  55.         })
  56.       }
  58.       // !重点 子数组进行递归操作
  59.       vnode.children.forEach((child) => dom.appendChild(_render(child)))
  60.       return dom
  61.     };
  62.     document.body.appendChild(_render(VDOM));
  66.     /* 
  67.       !:类似面试题
  68.     */
  69.     const el = {
  70.       tagName: 'ul',
  71.       children: [
  72.         'dd',
  73.         {
  74.           tagName: 'li',
  75.           props: {
  76.             class: 'item'
  77.           },
  78.           children: ['aa']
  79.         },
  80.         {
  81.           tagName: 'li',
  82.           props: {
  83.             class: 'item'
  84.           },
  85.           children: ['bb']
  86.         },
  87.         {
  88.           tagName: 'li',
  89.           props: {
  90.             class: 'item'
  91.           },
  92.           children: ['cc']
  93.         }
  94.       ]
  95.     }
  97.     function vDOM(ele) {
  98.       if (Array.isArray(ele)) {
  99.         const res = []
  100.         ele.forEach(item => {
  101.           res.push(vDOM(item))
  102.         })
  103.         // 注意：此出返回的是一个数组
  104.         return res
  105.       } else if (Object.prototype.toString.call(ele) === '[object Object]') {
  106.         const {
  107.           tagName,
  108.           children
  109.         } = ele
  110.         const tag = document.createElement(tagName)
  111.         const child = vDOM(children)
  112.         // 注意：需要将返回的数组进行解构，然后将数组中的 DOM 节点 append 到创建的 DOM 元素上。使用展开运算符...
  113.         tag.append(...child)
  114.         return tag
  115.       } else {
  116.         const dom = document.createTextNode(ele)
  117.         return dom
  118.       }
  119.     }
  121.     document.body.appendChild(vDOM(el));
  122.   </script>
  123. </body>
  125. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>渲染器</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         const vnode = {
  12.             tag: 'div',
  13.             props: {
  14.                 id: 'root',
  15.                 onClick: () => alert('hello')
  16.             },
  17.             children: 'click me'
  18.         };
  19.         function renderer(vnode, container) {
  20.             const el = document.createElement(vnode.tag)
  21.             // 遍历 props 对象
  22.             for (const key in vnode.props) {
  23.         // 重点。。。。
  24.                 if (/^on/.test(key)) {
  25.                     el.addEventListener(key.substr(2).toLowerCase(), vnode.props[key])
  26.                 }else {
  27.                     el.setAttribute(key + '', vnode.props[key])
  28.                 }
  29.             }
  30.             // 处理 children
  31.             if (typeof vnode.children === 'string') {
  32.                 el.appendChild(document.createTextNode(vnode.children))
  33.             } else if (Array.isArray(vnode.children)) {
  34.                 vnode.children.forEach(child => renderer(child, el))
  35.             }
  36.             // 将元素添加到挂载节点下
  37.             container.appendChild(el)
  38.         }
  40.         renderer(vnode, document.body);
  41.     </script>
  42. </body>
  43. </html>

涉及到的知识点

append()
appendChild()
document.createElement()
document.createTextNode()
dom.setAttribute(key, value)
Object.prototype.toString.call(ele) === '[object Object]'

append 和 appendChild 的区别

DOM 中有两个常用的方法：

  • append
  • appendChild

你知道它们的区别吗？先看 TypeScript 类型：

  1. append(...nodes: (Node | string)[]): void;
  2. appendChild<T extends Node>(node: T): T;

可以看出区别了吧？下面进行详细解读：

参数类型不同

append可插入Node节点或字符串，但 appendChild 只能插入Node节点，例如：

  • 插入节点对象 ```typescript const parent = document.createElement(‘div’) const child = document.createElement(‘p’)

parent.append(child) //

parent.appendChild(child) // 

  2. - 插入字符串
  3. ```typescript
  4. const parent = document.createElement('div')
  6. parent.append('text') // <div>text</div>
  8. // Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
  9. parent.appendChild('text')

参数个数不同

append可传入多个参数；但 appendChild只接受一个参数。

  1. const parent = document.createElement('div')
  2. const child = document.createElement('p')
  3. const childTwo = document.createElement('p')
  5. // <div><p></p><p></p>Hello world</div>
  6. parent.append(child, childTwo, 'Hello world')
  8. // <div><p></p></div>
  9. parent.appendChild(child, childTwo, 'Hello world')

返回值不同

append没有返回值，但 appendChild返回插入的节点对象：

  1. const parent = document.createElement('div')
  2. const child = document.createElement('p')
  4. const appendValue = parent.append(child)
  5. console.log(appendValue) // undefined
  7. const appendChildValue = parent.appendChild(child)
  8. console.log(appendChildValue) // <p><p>