本文所有代码均保存在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