如何实现一个 Virtual DOM 及源码分析

2017-09-13 22:18 龙恩0707 阅读(1705) 评论(1) 编辑收藏举报

Virtual DOM算法

web页面有一个对应的DOM树，在传统开发页面时，每次页面需要被更新时，都需要手动操作DOM来进行更新，但是我们知道DOM操作对性能来说是非常不友好的，会影响页面的重排，从而影响页面的性能。因此在React和VUE2.0+引入了虚拟DOM的概念，他们的原理是：把真实的DOM树转换成javascript对象树，也就是虚拟DOM，每次数据需要被更新的时候，它会生成一个新的虚拟DOM，并且和上次生成的虚拟DOM进行对比，对发生变化的数据做批量更新。---（因为操作JS对象会更快，更简单，比操作DOM来说)。
我们知道web页面是由一个个HTML元素嵌套组合而成的，当我们使用javascript来描述这些元素的时候，这些元素可以简单的被表示成纯粹的JSON对象。

比如如下HTML代码：

<div id="container" class="container">
   <ul id="list">
     <li class="item">111</li>
     <li class="item">222</li>
     <li class="item">333</li>
   </ul>
   <button class="btn btn-blue"><em>提交</em></button>
</div>

上面是真实的DOM树结构，我们可以使用javascript中的json对象来表示的话，变成如下：

var element = {
      tagName: 'div',
      props: {   // DOM的属性
        id: 'container',
        class: 'container'
      },
      children: [
        {
          tagName: 'ul',
          props: {
            id: 'list'
          },
          children: [
            {tagName: 'li', props: {class: 'item'}, children: ['111']},
            {tagName: 'li', props: {class: 'item'}, children: ['222']},
            {tagName: 'li', props: {class: 'item'}, children: ['333']}
          ]
        },
        {
          tagName: 'button',
          props: {
            class: 'btn btn-blue'
          },
          children: [
            {
              tagName: 'em',
              children: ['提交']
            }
          ]
        }
      ]
   };

因此我们可以使用javascript对象表示DOM的信息和结构，当状态变更的时候，重新渲染这个javascript对象的结构，然后可以使用新渲染的对象树去和旧的树去对比，记录两颗树的差异，两颗树的差异就是我们需要对页面真正的DOM操作，然后把他们应用到真正的DOM树上，页面就得到更新。视图的整个结构确实全渲染了，但是最后操作DOM的时候，只变更不同的地方。
因此我们可以总结一下 Virtual DOM算法：
1. 用javascript对象结构来表示DOM树的结构，然后用这个树构建一个真正的DOM树，插入到文档中。
2. 当状态变更的时候，重新构造一颗新的对象树，然后使用新的对象树与旧的对象树进行对比，记录两颗树的差异。
3. 把记录下来的差异用到步骤1所构建的真正的DOM树上。视图就更新了。

算法实现：
2-1 使用javascript对象模拟DOM树。
使用javascript来表示一个DOM节点，有如上JSON的数据，我们只需要记录它的节点类型，属性和子节点即可。

element.js 代码如下：

function Element(tagName, props, children) {
  this.tagName = tagName;
  this.props = props;
  this.children = children;
}
Element.prototype.render = function() {
  var el = document.createElement(this.tagName);
  var props = this.props;
  // 遍历子节点，依次设置子节点的属性
  for (var propName in props) {
    var propValue = props[propName];
    el.setAttribute(propName, propValue);
  }
  // 保存子节点
  var childrens = this.children || [];
  // 遍历子节点，使用递归的方式 渲染
  childrens.forEach(function(child) {
    var childEl = (child instanceof Element) ? child.render() // 如果子节点也是虚拟DOM，递归构建DOM节点
      : document.createTextNode(child);    // 如果是字符串的话，只构建文本节点
    el.appendChild(childEl);
  });
  return el;
};
module.exports = function(tagName, props, children) {
  return new Element(tagName, props, children);
}

入口index.js代码如下：

var el = require('./element');

var element = el('div', {id: 'container', class: 'container'}, [
  el('ul', {id: 'list'},[
    el('li', {class: 'item'}, ['111']),
    el('li', {class: 'item'}, ['222']),
    el('li', {class: 'item'}, ['333']),
  ]),
  el('button', {class: 'btn btn-blue'}, [
    el('em', {class: ''}, ['提交'])
  ])
]);

var elemRoot = element.render();
document.body.appendChild(elemRoot);

打开页面即可看到效果。

2-2 比较两颗虚拟DOM树的差异及差异的地方进行dom操作

上面的div只会和同一层级的div对比，第二层级的只会和第二层级的对比，这样的算法的复杂度可以达到O(n).
但是在实际代码中，会对新旧两颗树进行一个深度优先的遍历，因此每个节点都会有一个标记。如下图所示：

在遍历的过程中，每次遍历到一个节点就把该节点和新的树进行对比，如果有差异的话就记录到一个对象里面。

现在我们来看下我的目录下有哪些文件；然后分别对每个文件代码进行解读，看看做了哪些事情，旧的虚拟dom和新的虚拟dom是如何比较的，且是如何更新页面的如下目录：
目录结构如下：

vdom  ---- 工程名
|   | ---- index.html  html页面
|   | ---- element.js  实例化元素组成json数据 且 提供render方法 渲染页面
|   | ---- util.js     提供一些公用的方法
|   | ---- diff.js     比较新旧节点数据 如果有差异保存到一个对象里面去
|   | ---- patch.js    对当前差异的节点数据 进行DOM操作
|   | ---- index.js    页面代码初始化调用

首先是 index.js文件页面渲染完成后变成如下html结构

<div id="container">
  <h1 style="color: red;">simple virtal dom</h1>
  <p>the count is :1</p>
  <ul>
    <li>Item #0</li>
  </ul>
</div>

假如发生改变后，变成如下结构

<div id="container">
  <h1 style="color: blue;">simple virtal dom</h1>
  <p>the count is :2</p>
  <ul>
    <li>Item #0</li>
    <li>Item #1</li>
  </ul>
</div>

可以看到新旧节点页面数据的改变，h1标签从属性颜色从红色变为蓝色，p标签的文本发生改变，ul新增了一项元素li。
基本的原理是：先渲染出页面数据出来，生成第一个模板页面，然后使用定时器会生成一个新的页面数据出来，对新旧两颗树进行一个深度优先的遍历，因此每个节点都会有一个标记。
然后调用diff方法对比对象新旧节点遍历进行对比，找出两者的不同的地方存入到一个对象里面去，最后通过patch.js找出对象不同的地方，分别进行dom操作。

index.js代码如下：

var el = require('./element');
var diff = require('./diff');
var patch = require('./patch');

var count = 0;
function renderTree() {
  count++;
  var items = [];
  var color = (count % 2 === 0) ? 'blue' : 'red';
  for (var i = 0; i < count; i++) {
    items.push(el('li', ['Item #' + i]));
  }
  return el('div', {'id': 'container'}, [
    el('h1', {style: 'color: ' + color}, ['simple virtal dom']),
    el('p', ['the count is :' + count]),
    el('ul', items)
  ]);
}

var tree = renderTree()
var root = tree.render()
document.body.appendChild(root)
setInterval(function () {
  var newTree = renderTree()
  var patches = diff(tree, newTree)
  console.log(patches)
  patch(root, patches)
  tree = newTree
}, 1000);

执行 var tree = renderTree()方法后，会调用element.js，
1. 依次遍历子节点(从内到外调用)依次为 li, h1, p, ul, li和h1和p有一个文本子节点，因此遍历完成后，count就等于1，
但是遍历ul的时候，因为有一个子节点li，因此 count += 1; 所以调用完成后，ul的count等于2. 因此会对每个element属性添加count属性。对于最外层的container容器就是对每个子节点的依次增加，h1子节点默认为1，循环完成后 +1；因此变为2， p节点默认为1，循环完成后 +1，因此也变为2，ul为2，循环完成后 +1，因此变为3，因此container节点的count=2+2+3 = 7;

element.js部分代码如下：

function Element(tagName, props, children) {
  if (!(this instanceof Element)) {
    // 判断子节点 children 是否为 undefined
    if (!utils.isArray(children) && children !== null) {
      children = utils.slice(arguments, 2).filter(utils.truthy);
    }
    return new Element(tagName, props, children);
  }
  // 如果没有属性的话，第二个参数是一个数组，说明第二个参数传的是子节点
  if (utils.isArray(props)) {
    children = props;
    props = {};
  }
  this.tagName = tagName;
  this.props = props || {};
  this.children = children || [];
  // 保存key键 如果有属性 保存key，否则返回undefined
  this.key = props ? props.key : void 0;
  var count = 0;
  
  utils.each(this.children, function(child, i) {
    // 如果是元素的实列的话
    if (child instanceof Element) {
      count += child.count;
    } else {
      // 如果是文本节点的话，直接赋值
      children[i] = '' + child;
    }
    count++;
  });
  this.count = count;
}

oldTree数据最终变成如下：

var oldTree = {
  tagName: 'div',
  key: undefined,
  count: 7,
  props: {id: 'container'},
  children: [
    {
      tagName: 'h1',
      key: undefined
      count: 1
      props: {style: 'colod: red'},
      children: ['simple virtal dom']
    },
    {
      tagName: 'p',
      key: undefined
      count: 1
      props: {},
      children: ['the count is :1']
    },
    {
      tagName: 'ul',
      key: undefined
      count: 2
      props: {},
      children: [
        {
          tagName: 'li',
          key: undefined,
          count: 1,
          props: {},
          children: ['Item #0']
        }
      ]
    },
  ]
};

定时器执行 var newTree = renderTree()后，调用方法步骤还是和第一步一样：
2. 依次遍历子节点(从内到外调用)依次为 li, h1, p, ul, li和h1和p有一个文本子节点，因此遍历完成后，count就等于1，因为有2个子元素li，count都为1，因此ul每次遍历依次在原来的基础上加1，因此遍历完成第一个li时候，ul中的count为2，当遍历完成第二个li的时候，ul的count就为4了。因此ul中的count为4. 对于最外层的container容器就是对每个子元素依次增加。
所以 container节点的count = 2 + 2 + 5 = 9;

newTree数据最终变成如下数据：

var newTree = {
  tagName: 'div',
  key: undefined,
  count: 9,
  props: {id: 'container'},
  children: [
    {
      tagName: 'h1',
      key: undefined
      count: 1
      props: {style: 'colod: red'},
      children: ['simple virtal dom']
    },
    {
      tagName: 'p',
      key: undefined
      count: 1
      props: {},
      children: ['the count is :1']
    },
    {
      tagName: 'ul',
      key: undefined
      count: 4
      props: {},
      children: [
        {
          tagName: 'li',
          key: undefined,
          count: 1,
          props: {},
          children: ['Item #0']
        },
        {
          tagName: 'li',
          key: undefined,
          count: 1,
          props: {},
          children: ['Item #1']
        }
      ]
    },
  ]
}

var patches = diff(oldTree, newTree);

调用diff方法可以比较新旧两棵树节点的数据，把两颗树的不同节点找出来。(注意，查看diff对比数据的方法，找到不同的节点，可以查看这篇文章diff算法)如下调用代码：

function diff (oldTree, newTree) {
  var index = 0;
  var patches = {};
  deepWalk(oldTree, newTree, index, patches);
  return patches;
}

执行deepWalk如下代码：

function deepWalk(oldNode, newNode, index, patches) {
  var currentPatch = [];
  // 节点被删除掉
  if (newNode === null) {
    // 真正的DOM节点时,将删除执行重新排序,所以不需要做任何事
  } else if(utils.isString(oldNode) && utils.isString(newNode)) {
    // 替换文本节点
    if (newNode !== oldNode) {
      currentPatch.push({type: patch.TEXT, content: newNode});
    }
  } else if(oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {
    // 相同的节点，但是新旧节点的属性不同的情况下 比较属性
    // diff props
    var propsPatches = diffProps(oldNode, newNode);
    if (propsPatches) {
      currentPatch.push({type: patch.PROPS, props: propsPatches});
    }
    // 不同的子节点 
    if (!isIgnoreChildren(newNode)) {
      diffChildren(
        oldNode.children,
        newNode.children,
        index,
        patches,
        currentPatch
      )
    }
  } else {
    // 不同的节点，那么新节点替换旧节点
    currentPatch.push({type: patch.REPLACE, node: newNode});
  }
  if (currentPatch.length) {
    patches[index] = currentPatch;
  }
}

1. 判断新节点是否为null，如果为null，说明节点被删除掉。
2. 判断新旧节点是否为字符串，如果为字符串说明是文本节点，并且新旧两个文本节点不同的话，存入数组里面去，如下代码：

currentPatch.push({type: patch.TEXT, content: newNode});
patch.TEXT 为 patch.js里面的 TEXT = 3；content属性为新节点。

3. 如果新旧tagName相同的话，并且新旧节点的key相同的话，继续比较新旧节点的属性，如下代码：

var propsPatches = diffProps(oldNode, newNode);

diffProps方法的代码如下：

function diffProps(oldNode, newNode) {
      var count = 0;
      var oldProps = oldNode.props;
      var newProps = newNode.props;
      var key,
        value;
      var propsPatches = {};
      // 找出不同的属性值
      for (key in oldProps) {
        value = oldProps[key];
        if (newProps[key] !== value) {
          count++;
          propsPatches[key] = newProps[key];
        }
      }
      // 找出新增属性
      for (key in newProps) {
        value = newProps[key];
        if (!oldProps.hasOwnProperty(key)) {
          count++;
          propsPatches[key] = newProps[key];
        }
      }
      // 如果所有的属性都是相同的话
      if (count === 0) {
        return null;
      }
      return propsPatches;
   }

diffProps代码解析如下：

for (key in oldProps) {
   value = oldProps[key];
   if (newProps[key] !== value) {
      count++;
      propsPatches[key] = newProps[key];
   }
}

如上代码是判断旧节点的属性值是否在新节点中找到，如果找不到的话，count++; 把新节点的属性值赋值给 propsPatches 存储起来。

for (key in newProps) {
   value = newProps[key];
   if (!oldProps.hasOwnProperty(key)) {
      count++;
      propsPatches[key] = newProps[key];
   }
}

如上代码是判断新节点的属性是否能在旧节点中找到，如果找不到的话，count++; 把新节点的属性值赋值给 propsPatches 存储起来。

if (count === 0) {
   return null;
}
return propsPatches;

最后如果count 等于0的话，说明所有属性都是相同的话，所以不需要做任何变化。否则的话，返回新增的属性。

如果有 propsPatches 的话，执行如下代码：

if (propsPatches) {
   currentPatch.push({type: patch.PROPS, props: propsPatches});
}

因此currentPatch数组里面也有对应的更新的属性，props就是需要更新的属性对象。

继续代码：

// 不同的子节点 
if (!isIgnoreChildren(newNode)) {
   diffChildren(
     oldNode.children,
     newNode.children,
     index,
     patches,
     currentPatch
   )
}
function isIgnoreChildren(node) {
  return (node.props && node.props.hasOwnProperty('ignore'));
}

如上代码判断子节点是否相同，diffChildren代码如下：

function diffChildren(oldChildren, newChildren, index, patches, currentPatch) {
    var diffs = listDiff(oldChildren, newChildren, 'key');
    newChildren = diffs.children;

    if (diffs.moves.length) {
      var recorderPatch = {type: patch.REORDER, moves: diffs.moves};
      currentPatch.push(recorderPatch);
    }

    var leftNode = null;
    var currentNodeIndex = index;
    utils.each(oldChildren, function(child, i) {
      var newChild = newChildren[i];
      currentNodeIndex = (leftNode && leftNode.count) ? currentNodeIndex + leftNode.count + 1 : currentNodeIndex + 1;
      // 递归
      deepWalk(child, newChild, currentNodeIndex, patches);
      leftNode = child;
    });
  }

如上代码：var diffs = listDiff(oldChildren, newChildren, 'key'); 新旧节点按照key来比较，目前key为undefined，所以diffs 为如下：

diffs = {
    moves: [],
    children: [
      {
        tagName: 'h1',
        key: undefined
        count: 1
        props: {style: 'colod: blue'},
        children: ['simple virtal dom']
      },
      {
        tagName: 'p',
        key: undefined
        count: 1
        props: {},
        children: ['the count is :2']
      },
      {
        tagName: 'ul',
        key: undefined
        count: 4
        props: {},
        children: [
          {
            tagName: 'li',
            key: undefined,
            count: 1,
            props: {},
            children: ['Item #0']
          },
          {
            tagName: 'li',
            key: undefined,
            count: 1,
            props: {},
            children: ['Item #1']
          }
        ]
      }
    ]
  };

newChildren = diffs.children;
oldChildren数据如下：

oldChildren = [
    {
      tagName: 'h1',
      key: undefined
      count: 1
      props: {style: 'colod: red'},
      children: ['simple virtal dom']
    },
    {
      tagName: 'p',
      key: undefined
      count: 1
      props: {},
      children: ['the count is :1']
    },
    {
      tagName: 'ul',
      key: undefined
      count: 2
      props: {},
      children: [
        {
          tagName: 'li',
          key: undefined,
          count: 1,
          props: {},
          children: ['Item #0']
        }
      ]
    }
  ];

接着就是遍历 oldChildren, 第一次遍历时 leftNode 为null，因此 currentNodeIndex = currentNodeIndex + 1 = 0 + 1 = 1; 不是第一次遍历，那么leftNode都为上一次遍历的子节点，因此不是第一次遍历的话，那么 currentNodeIndex = currentNodeIndex + leftNode.count + 1;
然后递归调用 deepWalk(child, newChild, currentNodeIndex, patches); 方法，接着把child赋值给leftNode，leftNode = child;

所以一直递归遍历，最终把不相同的节点会存储到 currentPatch 数组内。最后执行

if (currentPatch.length) {
   patches[index] = currentPatch;
}

把对应的currentPatch 存储到 patches对象内中的对应项，最后就返回 patches对象。

4. 返回到index.js 代码内，把两颗不相同的树节点的提取出来后，需要调用patch.js方法传进；把不相同的节点应用到真正的DOM上.
不相同的节点 patches数据如下：

patches = {
    1: [{type: 2, props: {style: 'color: blue'}}],
    4: [{type: 3, content: 'the count is :2'}],
    5: [
          { 
              type: 1, 
              moves: [
                { index: 1, 
                   item: {
                      tagName: 'li',
                      props: {},
                      count: 1,
                      key: undefined,
                      children: ['Item #1']
                    }
                }
              ]
           }
        ]
    }

如下代码调用：
patch(root, patches);
执行patch方法，代码如下：

function patch(node, patches) {
  var walker = {index: 0};
  deepWalk(node, walker, patches);
}

deepWalk 代码如下：

function deepWalk(node, walker, patches) {
   var currentPatches = patches[walker.index];
      // node.childNodes 返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。
   var len = node.childNodes ? node.childNodes.length : 0;
   for (var i = 0; i < len; i++) {
      var child = node.childNodes[i];
      walker.index++;
      // 深度复制 递归遍历
      deepWalk(child, walker, patches);
   }
   if (currentPatches) {
      applyPatches(node, currentPatches);
   }
}

1. 首次调用patch的方法，root就是container的节点，因此调用deepWalk方法，因此 var currentPatches = patches[0] = undefined,
var len = node.childNodes ? node.childNodes.length : 0; 因此 len = 3; 很明显该子节点的长度为3，因为子节点有 h1, p, 和ul元素；

2. 然后进行for循环，获取该父节点的子节点，因此第一个子节点为 h1 元素，walker.index++; 因此walker.index = 1; 再进行递归 deepWalk(child, walker, patches); 此时子节点为h1, walker.index为1，因此获取 currentPatches = patches[1]; 获取值，再获取 h1的子节点的长度，len = 1; 然后再for循环，获取child为文本节点，此时 walker.index++; 所以此时walker.index 为2, 在调用deepwalk方法递归，因此再继续获取 currentPatches = patches[2]; 值为undefined，再获取len = 0; 因为文本节点么有子节点，所以for循环跳出，所以判断currentPatches是否有值，因为此时 currentPatches 为undefined，所以递归结束，再返回到 h1元素上来，所以currentPatches = patches[1]; 所以有值，所以调用 applyPatches()方法来更新dom元素。

3. 继续循环 i, 此时i = 1；获取子节点 child = p元素，walker.index++，此时walker.index = 3, 继续调用 deepWalk方法，获取 var currentPatches = patches[walker.index] = patches[3]的值，var len = 1; 因为p元素下有一个子节点(文本节点)，再进for循环，此时 walker.index++; 因此walker.index = 4; child此时为文本节点，在调用 deepwalk方法的时候，再获取var currentPatches = patches[walker.index] = patches[4]; 再执行len 代码的时候 len = 0;因此跳出for循环，判断 currentPatches是否有值，有值的话，更新对应的DOM元素。

4. 继续循环i = 2; 获取子节点 child = ul元素，walker.index++; 此时walker.index = 5; 在调用deepWalk方法递归，因此再获取 var currentPatches = patches[walker.index] = patches[5]; 然后len = 1, 因为ul元素下有一个li元素，在继续for循环遍历，获取子节点li，此时walker.index++; walker.index = 6; 再递归调用deepwalk方法，再获取var currentPatches = patches[walker.index] = patches[6]; len = 1; 因为li的元素下有一个文本节点，再进行for循环，此时child为文本节点，walker.index++；此时walker.index = 7; 再执行 deepwalk方法，再获取 var currentPatches = patches[walker.index] = patches[7]; 这时候 len = 0了，因此跳出for循环，判断当前的currentPatches是否有值，没有，就跳出，然后再返回ul元素，获取该自己li的时候，walker.index 等于5，因此var currentPatches = patches[walker.index] = patches[5]; 然后判断 currentPatches是否有值，有值就进行更新DOM元素。

最后就是 applyPatches 方法更新dom元素了，如下代码：

function applyPatches(node, currentPatches) {
  utils.each(currentPatches, function(currentPatch) {
    switch (currentPatch.type) {
      case REPLACE:
        var newNode = (typeof currentPatch.node === 'string') 
          ? document.createTextNode(currentPatch.node)
          : currentPatch.node.render();
        node.parentNode.replaceChild(newNode, node);
        break;
      case REORDER:
        reorderChildren(node, currentPatch.moves);
        break;
      case PROPS: 
        setProps(node, currentPatch.props);
        break;
      case TEXT:
        if(node.textContent) {
          node.textContent = currentPatch.content;
        } else {
          // ie bug
          node.nodeValue = currentPatch.content;
        }
        break;
      default:
        throw new Error('Unknow patch type' + currentPatch.type);
    }
  });
}

判断类型，替换对应的属性和节点。
最后就是对子节点进行排序的操作，代码如下：

// 对子节点进行排序
function reorderChildren(node, moves) {
  var staticNodeList = utils.toArray(node.childNodes);
  var maps = {};
  utils.each(staticNodeList, function(node) {
    // 如果是元素节点
    if (node.nodeType === 1) {
      var key = node.getAttribute('key');
      if (key) {
        maps[key] = node;
      }
    }
  })
  utils.each(moves, function(move) {
    var index = move.index;
    if (move.type === 0) {
      // remove Item
      if (staticNodeList[index] === node.childNodes[index]) {
        node.removeChild(node.childNodes[index]);
      }
      staticNodeList.splice(index, 1);
    } else if(move.type === 1) {
      // insert item
      var insertNode = maps[move.item.key] 
        ? maps[move.item.key].cloneNode(true)
        : (typeof move.item === 'object') ? move.item.render() : document.createTextNode(move.item);
      staticNodeList.splice(index, 0, insertNode);
      node.insertBefore(insertNode, node.childNodes[index] || null);
    }
  });
}

遍历moves，判断moves.type 是等于0还是等于1，等于0的话是删除操作，等于1的话是新增操作。比如现在moves值变成如下：

moves = {
  index: 1,
  type: 1,
  item: {
    tagName: 'li',
    key: undefined,
    props: {},
    count: 1,
    children: ['#Item 1']
  }
};

node节点就是 'ul'元素，var staticNodeList = utils.toArray(node.childNodes); 把ul的旧子节点li转成Array形式，由于没有属性key，所以直接跳到下面遍历代码来，遍历moves,获取某一项的索引index，判断move.type 等于0 还是等于1，目前等于1，是新增一项，但是没有key，因此调用move.item.render(); 渲染完后，对staticNodeList数组里面的旧节点的li项从第二项开始插入节点li，然后执行node.insertBefore(insertNode, node.childNodes[index] || null); node就是ul父节点，insertNode节点插入到 node.childNodes[1]的前面。因此把在第二项的前面插入第一项。
查看github上源码

会员力量，点亮园子希望

刷新页面返回顶部

龙恩0707 ..........

如何实现一个 Virtual DOM 及源码分析

About