关于Virtual Dom的那些事（三）

前言

上一篇《关于Virtual Dom的那些事（二）》主要是介绍了VNode。其实生成VNode的方式在snabbdom中除了VNode自身的最基本的构造函数vnode()外，还有两种方式来生成。一种是toVNode（即把原生的Dom转化成为VNode），还有一种是非常有名的h函数（hyperscript最原始的定义是“Create HyperText with JavaScript.”）。本节主要是分析一下这两种函数在snabbdom中的源码。

toVNode函数的源码

1import vnode, {VNode} from './vnode'; // VNode的生成函数及接口
2import htmlDomApi, {DOMAPI} from './htmldomapi'; // 由dom操作的一些工具函数
3 
4export function toVNode(node: Node, domApi?: DOMAPI): VNode {
5  const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi;
6  let text: string;
7  if (api.isElement(node)) { // 如果是node或者element节点元素
8    const id = node.id ? '#' + node.id : '';
9    const cn = node.getAttribute('class');
10    const c = cn ? '.' + cn.split(' ').join('.') : '';
11    const sel = api.tagName(node).toLowerCase() + id + c; // 生成VNode所需的第一个参数sel，元素选择器
12    const attrs: any = {};
13    const children: Array<VNode> = [];
14    let name: string;
15    let i: number, n: number;
16    const elmAttrs = node.attributes;
17    const elmChildren = node.childNodes;
18    for (i = 0, n = elmAttrs.length; i < n; i++) { // 生成VNode所需的data里面的attrs属性
19      name = elmAttrs[i].nodeName;
20      if (name !== 'id' && name !== 'class') {
21        attrs[name] = elmAttrs[i].nodeValue;
22      }
23    }
24    for (i = 0, n = elmChildren.length; i < n; i++) { // 对children进行递归生成
25      children.push(toVNode(elmChildren[i], domApi));
26    }
27    return vnode(sel, {attrs}, children, undefined, node); // 正式生成VNode
28  } else if (api.isText(node)) { // 如果是文本节点
29    text = api.getTextContent(node) as string;
30    return vnode(undefined, undefined, undefined, text, node); // 对应生成文本VNode节点
31  } else if (api.isComment(node)) { // 如果是注释，相应生成注释VNode节点
32    text = api.getTextContent(node) as string;
33    return vnode('!', {}, [], text, node as any);
34  } else { // 其他情况为空VNode节点
35    return vnode('', {}, [], undefined, node as any);
36  }
37}
38 
39export default toVNode;

h函数的源码

import {vnode, VNode, VNodeData} from './vnode'; // 引入vnode的构造函数、VNode定义接口及VNodeData的定义接口
export type VNodes = Array<VNode>;
export type VNodeChildElement = VNode | string | number | undefined | null;
export type ArrayOrElement<T> = T | T[];
export type VNodeChildren = ArrayOrElement<VNodeChildElement>
import * as is from './is';

function addNS(data: any, children: VNodes | undefined, sel: string | undefined): void { // 增加对svg的支持
  data.ns = 'http://www.w3.org/2000/svg';
  if (sel !== 'foreignObject' && children !== undefined) {
    for (let i = 0; i < children.length; ++i) {
      let childData = children[i].data;
      if (childData !== undefined) {
        addNS(childData, (children[i] as VNode).children as VNodes, children[i].sel);
      }
    }
  }
}

export function h(sel: string): VNode;
export function h(sel: string, data: VNodeData): VNode;
export function h(sel: string, children: VNodeChildren): VNode;
export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
export function h(sel: any, b?: any, c?: any): VNode { // 上面是h函数的的四种接口定义，本函数正式实现
  var data: VNodeData = {}, children: any, text: any, i: number;
  if (c !== undefined) { // 如果传3个参数，且第三个参数有值
    data = b; // 直接把第二个参数作为data
    if (is.array(c)) { children = c; } // 第3个参数是数组，直接作为children
    else if (is.primitive(c)) { text = c; } // 如果是原始文本，则为文本
    else if (c && c.sel) { children = ; } // 如果为单个节点元素，则变为数组作为children
  } else if (b !== undefined) { // 如果有传第二个有效参数
    if (is.array(b)) { children = b; } // 且第2个参数是数组，直接作为children
    else if (is.primitive(b)) { text = b; } // 如果为文本，则作为文本
    else if (b && b.sel) { children = [b]; } // 如果为单个节点元素，则变为数组作为children
    else { data = b; } // 否则，直接作为data
  }
  if (children !== undefined) { // 如果有children，先把所有的文本节点转化成为VNode
    for (i = 0; i < children.length; ++i) {
      if (is.primitive(children[i])) children[i] = vnode(undefined, undefined, undefined, children[i], undefined);
    }
  }
  if (
    sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' &&
    (sel.length === 3 || sel[3] === '.' || sel[3] === '#')
  ) { // 如果是svg节点，单独处理
    addNS(data, children, sel);
  }
  return vnode(sel, data, children, text, undefined); // 最后返回VNode
};
export default h;

其实h函数（即hyperscript，最原始的定义是“Create HyperText with JavaScript.”）的应用非常广泛，各种Virtual Dom的实现方式都看到h函数的身影。最热的两个前端框架React及Vue框架都直接支持在其jsx或者.vue文件的template里面使用h函数来定义dom结构。其表现方式非常直接，如：h(sel, data, children)，而children也可以递归表示为h函数，那么，还可以这么表示：h(sel, data [h(sel1, data1, children1),h(sel2, data2, children2),…]支持更多层递归表示。使用h函数来表示或者生成虚拟节点相对于VNode的接口定义更为简洁，因为它只接受最多3个参数，然后可以支持无限嵌套。

总而言之

我们可以使用toVNode函数把现有的dom树结构转化成为OldVNode（这种方式特别适用于服务器端渲染的情况，一些框架如果想实现服务器端渲染，渲染后则需把其生成的Dom转化成为VNode，此时就可以使用此方式来进行渲染），后面如果输入的数据有变化可以使用h函数结合数据创建NewVNode（h函数也是推荐使用且最常用的生成VNode的方式），然后通过snabbdom的patch方法对旧VNode与新VNode通过diff算法进行比较然后进行局部更新dom节点，而不需要重新渲染整棵dom树，这就是Virtual Dom的工作原理。

阅读: 5,741

作者：博主

Talk is cheap, show me the code! 查看博主的所有文章

前言

toVNode函数的源码

h函数的源码

总而言之

作者：博主