将HTML字符串编译为虚拟DOM对象的基础实现

本文所有代码均保存在HouyunCheng / mini-2vdom

虚拟DOM只是实现MVVM的一种方案，或者说是视图更新的一种策略，是实现最小化更新的diff算法的操作对象。

创建扫描器

所有编译行为的第一步都是遍历整个字符串，于是我们创建Scanner类，专门用于扫描整个字符串。

class Scanner {

  constructor(text) {

    this.text  = text;

    // 指针

    this.pos = 0;

    // 尾巴  剩余字符

    this.tail = text;

  }

  /**

   * 路过指定内容

   *

   * @memberof Scanner

   */

  scan(tag) {

    if (this.tail.indexOf(tag) === 0) {

      // 直接跳过指定内容的长度

      this.pos += tag.length;

      // 更新tail

      this.tail = this.text.substring(this.pos);

    }

  }

  /**

   * 让指针进行扫描，直到遇见指定内容，返回路过的文字

   *

   * @memberof Scanner

   * @return str 收集到的字符串

   */

   scanUntil(stopTag) {

    // 记录开始扫描时的初始值

    const startPos = this.pos;

    // 当尾巴的开头不是stopTg的时候，说明还没有扫描到stopTag

    while (!this.eos() && this.tail.indexOf(stopTag) !== 0 ) {

      // 改变尾巴为当前指针这个字符到最后的所有字符

      this.tail = this.text.substring(++this.pos);

    }

    // 返回经过的文本数据

    return this.text.substring(startPos, this.pos).trim();

  }

  /**

   * 判断指针是否到达文本末尾（end of string）

   *

   * @memberof Scanner

   */

  eos() {

    return this.pos >= this.text.length;

  }

}

而scanUntil方法用于扫描字符串，并将扫描过的内容返回，用于收集为token。整个扫描会分段进行，直到字符串的结尾。

转换为没有嵌套结构的tokens

先看代码，我们先实例化Scanner用于扫描整个传入字符串，同时初始化一个tokens数组用于保存token和一个word用于保存sanner收集到的字符串。

整个转化行为会持续到字符串的末尾，而scan和scanUntil交替进行，不断获取<和>之间的内容(即标签和属性)或者>和<之间的内容(即标签内的内容，包括文本和子标签)。

为了区分开始标签和结束标签，我们在生成的token数组中的第一项添加#或/作为开始或结束的标记，第二项为标签名，第三项，我们放入开始标签中收集到的属性，而不是将属性单独放在一个token中，这样做是为了简化后边将tokens转化为嵌套结构的操作。

于是，我们得到了由形如[类型标记, 标签名, 数据, 文本]组成的二维数组。

这里对是一个标签否有属性这一点使用了非常简单粗暴的实现，即看<和>中收集到的字符串中是否有空格，有空格则判断为有属性，没空格则判断为没有属性。

在收集标签属性的时候，顺便使用propsParser对标签属性进行了简单解析。

/**

 * 将html字符串转为无嵌套结构的token，返回tokens数组

 *

 * @param {string} html

 * @return {array}

 */

function collectTokens(html) {

  const scanner = new Scanner(html);

  const tokens = [];

  let word = '';

  while (!scanner.eos()) {

    // 扫描文本

    const text = scanner.scanUntil('<');

    scanner.scan('<');

    tokens[tokens.length - 1] && tokens[tokens.length - 1].push(text);

    // 扫描标签<>中的内容

    word = scanner.scanUntil('>');

    scanner.scan('>');

    // 如果没有扫描到值，就跳过本次进行下一次扫描

    if (!word) continue;

    // 区分开始标签 # 和结束标签 /

    if (word.startsWith('/')) {

      tokens.push(['/', word.slice(1)]);

    } else {

      // 如果有属性存在，则解析属性

      const firstSpaceIdx = word.indexOf(' ');

      if (firstSpaceIdx === -1) {

        tokens.push(['#', word, {}]);

      } else {

        // 解析属性

        const data = propsParser(word.slice(firstSpaceIdx))

        tokens.push(['#', word.slice(0, firstSpaceIdx), data]);

      }

    }

  }

  return tokens;

}

使用propsParser简单解析标签属性

在propsParser中，我们同样使用Scanner进行扫描，用=进行分割，分别得到key和value。

由于某些属性是单属性的，比如字符串<button loading disabled class="btn">中的loading，以=分割的话会得到loading disabled class作为key，这显然是错误的。于是我们同样使用简单粗暴的方式，用是否有空格来判断是否有单属性，同时将单属性的值设置为true。

由于这里直接使用了"和="进行扫描，所以当前的程序不支持单引号，同时=和"之间不能有空格。

同时，这里只是对标签属性进行了简单的拆分，并没有对class和style内的属性进行拆分。那是之后的步骤。当然，也可以放在这里进行。

function propsParser(propsStr) {

  propsStr = propsStr.trim();

  const scanner = new Scanner(propsStr);

  const props = {};

  while(!scanner.eos()) {

    let key = scanner.scanUntil('=');

    // 对单属性的处理

    const spaceIdx = key.indexOf(' ');

    if (spaceIdx !== -1) {

      const keys = key.replace(/\s+/g, ' ').split(' ');

      const len = keys.length;

      for (let i = 0; i < len - 1; i++) {

        props[keys[i]] = true;

      }

      key = keys[len - 1].trim();

    }

    scanner.scan('="');

    const val = scanner.scanUntil('"');

    props[key] = val || true;

    scanner.scan('"');

  }

  return props;

}

生成有嵌套结构的tokens

在之前生成的tokens是没有嵌套结构的，是一个简单的二维数组。在这里，我们要将其转换有嵌套结构的tokens。

对于嵌套结构，通常使用栈来生成，遇到开始标签(这里为#)则压栈，遇到结束标签(这里为/)则出栈。

在这里，我们使用stack来保存栈状态，用collector来收集嵌套的内容，在压栈和出栈的同时也修改collector的指向，以保证嵌套层次的准确性。

同时，我们将嵌套结构放在token的第三个元素的位置。得到形如[类型标记, 标签名, 子节点, 数据, 文本]的tokens。

function nestTokens(tokens) {

  const nestedTokens = [];

  const stack = [];

  let collector = nestedTokens;

  for (let i = 0, len = tokens.length; i < len; i++) {

    const token = tokens[i];

    switch (token[0]) {

      case '#':

        // 收集当前token

        collector.push(token);

        // 压入栈中

        stack.push(token);

        // 由于进入了新的嵌套结构，新建一个数组保存嵌套结构

        // 并修改collector的指向

          token.splice(2, 0, []);

          collector = token[2];

        break;

      case '/':

        // 出栈

        stack.pop();

        // 将收集器指向上一层作用域中用于存放嵌套结构的数组

        collector = stack.length > 0

          ? stack[stack.length - 1][2]

          : nestedTokens;

        break;

      default:

        collector.push(token);

    }

  }

  return nestedTokens;

}

整合tokenizer函数

有了以上两个函数函数之后，我们可以将其整合为一个函数，方便之后调用。

function tokenizer(html) {

  return nestTokens(collectTokens(html));

}

将tokens转换为虚拟DOM

这一步相对来说就简单很多，只需要安装tokens的结构把相应的数据取出即可。

同时，在这里我们对class和style属性进行解析，将形如{class: "item active"}的class属性转换为

{

    class: {

        item: true,

        active: true

    }

}

的形式。

将形如{style: "border: 1px solid red; height: 300px"}转换为

{

    style: {

        border: "border: 1px solid red",

        height: "300px"

    }

}

的形式。

同时将在data中的属性key提取出来。由于当前的虚拟DOM还没有上树，所有elm属性为undefined。对于子节点，我们使用递归将子节点追加到children数组中。

于是最终我们得到形如

{

    sel: "div",

    children: [{

        sel: "p",

            data: {},

            elm: undefined,

            text: "文本",

            key: "1",

        }

    }],

    data: {class: {container: true}, id: "main"},

    elm: undefined,

    text: undefined,

    key: undefined,

}

的虚拟DOM结构。

以下是tokens2vdom的代码实现。

function tokens2vdom(tokens) {

  const vdom = {};

  for (let i = 0, len = tokens.length; i < len; i++) {

    const token = tokens[i];

    vdom['sel'] = token[1];

    vdom['data'] = token[3];

    // 解析类名

    if (vdom['data']['class']) {

      vdom['data']['class'] = classParser(vdom['data']['class']);

    }

    // 解析行类样式

    if (vdom['data']['style']) {

      vdom['data']['style'] = styleParser(vdom['data']['style']);

    }

    // 添加key

    if (vdom['data']['key']) {

      vdom['key'] = vdom['data']['key'];

      delete vdom['data']['key'];

    } else  {

      vdom['key'] = undefined;

    }

    if (token[4]) {

      vdom['text'] = token[token.length - 1];

    } else {

      vdom['text'] = undefined;

    }

    vdom['elm'] = undefined;

    const children = token[2];

    if (children.length === 0) {

      vdom['children'] = undefined;

      continue;

    };

    vdom['children'] = [];

    for (let j = 0; j < children.length; j++) {

      vdom['children'].push(tokens2vdom([children[j]]));

    }

    if (vdom['children'].length === 0) {

      delete vdom['children'];

    }

  }

  return vdom;

}

整合toVDOM函数

到这里我们的需求就基本实现了，我们将之前的函数整合为一个函数即可。

function toVDOM (html) {

  const tokens = tokenizer(html);

  const vdom = tokens2vdom(tokens);

  return vdom;

}

虚拟DOM的结构参照 snabbdom/snabbdom

本文完整的代码实现可以查看 HouyunCheng / mini-2vdom

巴特西