• 8.3 模拟渲染过程
    • 8.3.1 createVnode
    • 8.3.2 createElement
    • 8.3.3 setAttr

    8.3 模拟渲染过程

    接下来需要创建另一个类模拟将render函数转换为Vnode,并将Vnode渲染为真实DOM的过程，我们将这个类定义为Vn,Vn具有两个基本的方法createVnode, createElement, 分别实现创建虚拟Vnode,和创建真实DOM的过程。

    8.3.1 createVnode

    createVnode模拟Vue中render函数的实现思路，目的是将数据转换为虚拟的Vnode,先看具体的使用和定义。

    1. // index.html
    3. <script src="diff.js">
    4. <script>
    6. // 创建Vnode
    8. let createVnode = function() {
    9.   let _c = vn.createVnode;
    10.   return _c('div', { attrs: { id: 'test' } }, arr.map(a => _c(a.tag, {}, a.text)))
    11. }
    13. // 元素内容结构
    14. let arr = 
    15.   [{
    16.     tag: 'i',
    17.     text: 2
    18.   }, {
    19.     tag: 'span',
    20.     text: 3
    21.   }, {
    22.     tag: 'strong',
    23.     text: 4
    24.   }]
    25. </script>
    29. // diff.js
    30. (function(global) {
    31.   class Vn {
    32.     constructor() {}
    33.     // 创建虚拟Vnode
    34.     createVnode(tag, data, children) {
    35.       return new VNode(tag, data, children)
    36.     }
    37.   }
    38.   global.vn = new Vn()
    39. }(this))

    这是一个完整的Vnode对象，我们已经可以用这个对象来简单的描述一个DOM节点，而createElement就是将这个对象对应到真实节点的过程。最终我们希望的结果是这样的。

    Vnode对象

    8.3 模拟渲染过程 - 图1

    渲染结果

    8.3 模拟渲染过程 - 图2

    8.3.2 createElement

    渲染真实DOM的过程就是遍历Vnode对象，递归创建真实节点的过程，这个不是本文的重点，所以我们可以粗糙的实现。

    1. class Vn {
    2.   createElement(vnode, options) {
    3.       let el = options.el;
    4.       if(!el || !document.querySelector(el)) return console.error('无法找到根节点')
    5.       let _createElement = vnode => {
    6.         const { tag, data, children } = vnode;
    7.         const ele = document.createElement(tag);
    8.         // 添加属性
    9.         this.setAttr(ele, data);
    10.         // 简单的文本节点，只要创建文本节点即可
    11.         if (util._isPrimitive(children)) {
    12.           const testEle = document.createTextNode(children);
    13.           ele.appendChild(testEle)
    14.         } else {
    15.         // 复杂的子节点需要遍历子节点递归创建节点。
    16.           children.map(c => ele.appendChild(_createElement(c)))
    17.         }
    18.         return ele
    19.       }
    20.       document.querySelector(el).appendChild(_createElement(vnode))
    21.     }
    22. }

    8.3.3 setAttr

    setAttr是为节点设置属性的方法，利用DOM原生的setAttribute为每个节点设置属性值。

    1. class Vn {
    2.   setAttr(el, data) {
    3.     if (!el) return
    4.     const attrs = data.attrs;
    5.     if (!attrs) return;
    6.     Object.keys(attrs).forEach(a => {
    7.       el.setAttribute(a, attrs[a]);
    8.     })
    9.   }
    10. }

    至此一个简单的 数据 -> Virtual DOM => 真实DOM的模型搭建成功,这也是数据变化、比较、更新的基础。