vue 的模板编译—ast(抽象语法树) 详解与实现

首先AST是什么？

在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。

我们可以理解为：把 template（模板）解析成一个对象，该对象是包含这个模板所以信息的一种数据，而这种数据浏览器是不支持的，为Vue后面的处理template提供基础数据。

这里我模拟Vue去实现把template解析成ast，代码已经分享到 https://github.com/zhangKunUserGit/vue-ast，具体逻辑都用文字进行了描述，请大家下载运行。

基础

（1）了解正则表达式，熟悉match，test,  exec 等等JavaScript匹配方法；

（2）了解JavaScript柯里化；

获取模板

import { compileToFunctions } from './compileToFunctions';

// Vue 对象
function Vue(options) {
  // 获取模板
  const selected = document.querySelector(options.el);
  this.$mount(selected);
}

// mount 模板
Vue.prototype.$mount = function (el) {
  const html = el.outerHTML;
  compileToFunctions(html, {});
};

export default Vue;

这里我仅仅使用querySelector的方式获取模板，其他的方式没有处理。因为我们的重点是如何解析模板。

JavaScript 柯里化

import { createCompiler } from "./createCompiler";

const { compileToFunctions } = createCompiler({});
export { compileToFunctions }

import { parse } from "./parse";

function createCompileToFunctionFn(compile) {
  return function compileToFunctions(template, options) {
    const compiled = compile(template, options)
  }
}

function createCompilerCreator(baseCompile) {
  return function createCompiler() {
    function compile(template, options) {
      const compiled = baseCompile(template, options)
    }
    return {
      compile,
      compileToFunctions: createCompileToFunctionFn(compile)
    }
  }
}
// js柯里化是逐步传参，逐步缩小函数的适用范围，逐步求解的过程。
export const createCompiler = createCompilerCreator(function(template, options) {
  console.log('这是要处理的template字符串 -->', template);
  const ast = parse(template.trim(), options);
  console.log('这是处理后的ast(抽象语法树)字符串 -->', ast);
});

这里我按照Vue源码逻辑书写的，柯里化形式的代码看了容易让人晕，但是它也有它的好处，在这里体现的淋漓尽致，通过柯里化可以逐步传参，逐步求解。现在忽略此处，直接看createCompilerCreator()里面的函数就可以了。

解析

我们知道HTML模板是有标签、文本、注释组成的，这里不考虑注释，而标签又分为单元素标签（如：img，br 等）和普通标签（如： div， table 等）。文本又分为带有绑定的文本（含有{{}} 双大括号）和普通文本（不含有{{}} 双大括号）。

所以解析HTML最少要分两个方法，一个处理标签，一个处理文本，但是无论单元素还是普通标签都有开始和闭合，只是形式不一样罢了。所以把解析HTML 可以分成start（处理开始标签）、end（处理结束标签）、char（处理文本）：

export function parse(template, options) {
  // 暂存没有闭合的标签元素基本信息， 当找到闭合标签后清除存在于stack里面的元素
  const stack = [];
  // 这里就是解析后的最终数据，这里主要应用了引用类型的特性，最终使root滚雪球一样，保存标签的所有信息
  let root;
  // 当前需要处理的元素父级元素
  let currentParent;
  parseHTML(template, {
    start(tag, attrs, unary) {},
    end() {},
    chars(text) {},
  });
  // 把解析后返回出去，这个就是ast(抽象语法树)
  return root;
}

此时，我们调用了parseHTML函数，看看它干了什么：

export function parseHTML(html, options) {
  const stack = [];
  let index = 0;
  let last, lastTag;
  // 循环html字符串
  while (html) {
    last = html;
    // 处理非script,style,textarea的元素
    if(!lastTag || !isPlainTextElement(lastTag)) {
      let textEnd = html.indexOf('<');
      if (textEnd === 0) {
        // 结束标签
        const endTagMatch = html.match(endTag);
        if (endTagMatch) {
          const curIndex = index;
          advance(endTagMatch[0].length);
          parseEndTag(endTagMatch[1], curIndex, index);
          continue;
        }
        // 开始标签
        const startTagMatch = parseStartTag();
        if (startTagMatch) {
          handleStartTag(startTagMatch);
          continue;
        }
      }
      let text;
      // 判断 '<' 首次出现的位置，如果大于等于0，截取这段，赋值给text, 并删除这段字符串
      // 这里有可能是空文本，如这种 ' '情况， 他将会在chars里面处理
      if (textEnd >= 0) {
        text = html.substring(0, textEnd);
        advance(textEnd);
      } else {
        text = html;
        html = '';
      }
      // 处理文本标签
      if (text) {
        options.chars(text);
      }
    } else {
      // 处理script,style,textarea的元素，
      // 这里我们只处理textarea元素, 其他的两种Vue 会警告，不提倡这么写
      let endTagLength = 0;
      const stackedTag = lastTag.toLowerCase();
      // 缓存匹配textarea 的正则表达式
      const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)', 'i'));
      // 清除匹配项，处理text
      const rest = html.replace(reStackedTag, function(all, text, endTag) {
        endTagLength = endTag.length;
        options.chars(text);
        return ''
      });
      index += html.length - rest.length;
      html = rest;
      parseEndTag(stackedTag, index - endTagLength, index);
    }
  }
}

我们第一眼看到的就是那个蓝色的while循环。它在那儿默默无闻的循环，直到html为空。在循环体中，用正则判断html字符串是开始标签、结束标签或文本标签，并分别进行处理。

开始标签

/**
 * 处理解析后的属性，重新分割并保存到attrs数组中
 * @param match
 */
function handleStartTag(match) {
  const tagName = match.tagName;
  const unary = isUnaryTag(tagName) || !!match.unarySlash;
  const l = match.attrs.length;
  const attrs = new Array(l);
  for (let i = 0; i < l; i += 1) {
    const args = match.attrs[i];
    attrs[i] = {
      name:args[1], // 属性名
      value: args[3] || args[4] || args[5] || '' // 属性值
    };
  }
  // 非单元素
  if (!unary) {
    // 因为我们的parse必定是深度优先遍历，
    // 所以我们可以用一个stack来保存还没闭合的标签的父子关系，
    // 并且标签结束时一个个pop出来就可以了
    stack.push({
      tag: tagName,
      lowerCasedTag: tagName.toLowerCase(),
      attrs,
    });
    // 缓存这次的开始标签
    lastTag = tagName;
  }
  options.start(tagName, attrs, unary, match.start, match.end);
}

/**
 * 匹配到元素的名字和属性，保存到match对象中并返回
 * @returns {{tagName: *, attrs: Array, start: number}}
 */
function parseStartTag() {
  const start = html.match(startTagOpen);
  if (start) {
    // 定义解析开始标签的存储格式
    const match = {
      tagName: start[1], // 标签名
      attrs: [], // 属性
      start: index, // 标签的开始位置
    };
    // 删除匹配到的字符串
    advance(start[0].length);
    // 没有匹配到结束 '>' ,但匹配到了属性
    let end, attr;
    while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
      advance(attr[0].length);
      // 把元素属性都取出，并添加到attrs中
      match.attrs.push(attr);
    }
    if (end) {
      match.unarySlash = end[1];
      advance(end[0].length);
      // start 到 end 这段长度就是这次执行，所处理的字符串长度
      match.end = index;
      return match;
    }
  }
}

具体逻辑我已经写到代码中了，其中应用了大量的正则和循环，当匹配到后就调用advance() 删除匹配的字符串更新html。

结束标签

/**
 * 解析关闭标签，
 * 查找我们之前保存到stack栈中的元素，
 * 如果找到了，也就代表这个标签的开始和结束都已经找到了，此时stack中保存的也就需要删除（pop）了
 * 并且缓存最近的标签lastTag
 * @param tagName
 * @param start
 * @param end
 */
function parseEndTag(tagName, start, end) {
  const lowerCasedTag = tagName && tagName.toLowerCase();
  let pos = 0;
  if (lowerCasedTag) {
    for (pos = stack.length -1; pos >= 0; pos -= 1) {
      if (stack[pos].lowerCasedTag === lowerCasedTag) {
        break;
      }
    }
  }
  if (pos >= 0) {
    // 关闭 pos 以后的元素标签，并更新stack数组
    for (let i = stack.length - 1; i >= pos; i -= 1) {
      options.end(stack[i].tag, start, end);
    }
    stack.length = pos;
    // stack 取出数组存储的最后一个元素
    lastTag = pos && stack[pos - 1].tag;
  }
}

此时当执行parseEndTag()函数，更新stack和lastTag。

上面提到start（开始标签）

/**
 * 这个和end相对应，主要处理开始标签和标签的属性（内置和普通属性），
 * @param tag 标签名
 * @param attrs 元素属性
 * @param unary 该元素是否单元素， 如img
 */
start(tag, attrs, unary) {
  // 创建ast容器
  let element = createASTElement(tag,attrs, currentParent);

  // 下面是加工、处理各种Vue支持的内置属性和普通属性
  processFor(element);
  processIf(element);
  processOnce(element);
  processElement(element);
  if (!root) {
    root = element;
  } else if (!stack.length && root.if && (element.elseif || element.else)) {
    // 在element的ifConditions属性中加入condition
    addIfCondition(root, {
      exp: element.elseif,
      block: element
    })
  }
  if (currentParent) {
    if (element.elseif || element.else) {
      processIfConditions(element, currentParent);
    } else if (element.slotScope) {
      // 父级元素是普通元素
      currentParent.plain = false;
      const name = element.slotTarget || '"default"';
      (currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
    } else {
      // 把当前元素添加到父元素的children数组中
      currentParent.children.push(element);
      // 设置当前元素的父元素
      element.parent = currentParent;
    }
  }
  // 非单元素，更新父级和保存该元素
  if (!unary) {
    currentParent = element;
    stack.push(element);
  }
},

上面提到end（结束标签）

/**
 * 闭合元素，更新stack和currentParent
 */
end() {
  // 取出stack中最后一个元素，其实这也是需要闭合元素的开始标签，如</div> 的开始标签就是<div>
  // 此时取出的element包含该元素的所有信息，包括他的子元素信息
  const element = stack[stack.length - 1];
  // 取出当前元素的最后一个子节点
  const lastNode = element.children[element.children.length - 1];
  // 如果最后一个子节点是空文本节点，清除当前子节点, 为什么这么做呢？
  // 因为我们在写HTML时，标签之间都有间距，有时候就需要这个间距才能达到我们想要的效果，
  // 比如：<div> <span>111</span> <span>222</span> </div>
  // 此时111与222之间就有一格的间距，在ast模板解析时，这个不能忽略，
  // 此时的div的子节点会解析成三个数组， 中间的就是一个文本，只是这个文本是个空格，
  // 而222的span标签后面的空格我们是不需要的，因为如果我们写了，div的兄弟节点之间会有一个空格的。
  // 所以我们需要清除children数组中没有用的项
  if (lastNode && lastNode.type === 3 && lastNode.text === ' ') {
    element.children.pop();
  }
  // 下面才是最重要的，也是end方法真正要做的，
  // 就是找到了闭合标签，就把保存的开始标签的信息清除，并更新currentParent
  stack.length -= 1;
  currentParent = stack[stack.length - 1];
},

上面提到的char（文本标签）

/**
 * 处理文本和{{}}
 * @param text 文本内容
 */
chars(text) {
  // 如果是文本，没有父节点，直接返回
  if (!currentParent) {
    return;
  }
  const children = currentParent.children;
  // 判断与处理text, 如果children有值，text为空，那么text = ' '; 原因在end中
  text = text.trim()
    ? text
    : children.length ? ' ' : '';
  if (text) {
    // 解析文本，处理{{}} 这种形式的文本
    const expression = parseText(text);
    if (text !== ' ' && expression) {
      children.push({
        type: 2,
        expression,
        text,
      });
   } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
      children.push({
        type: 3,
        text,
      })
    }
  }
},

这里我们重点需要说一下parseText()方法，解释都写在了代码中。

const tagRE = /\{\{((?:.|\n)+?)\}\}/g;

export function parseText(text) {
  if (tagRE.test(text)) {
    return;
  }
  const tokens = [];
  let lastIndex = tagRE.lastIndex = 0;
  let match, index;
  // exec中不管是不是全局的匹配，只要没有子表达式，
  // 其返回的都只有一个元素，如果是全局匹配，可以利用lastIndex进行下一个匹配，
  // 匹配成功后lastIndex的值将会变为上次匹配的字符的最后一个位置的索引。
  // 在设置g属性后，虽然匹配结果不受g的影响，
  // 返回结果仍然是一个数组（第一个值是第一个匹配到的字符串，以后的为分组匹配内容），
  // 但是会改变index和 lastIndex等的值，将该对象的匹配的开始位置设置到紧接这匹配子串的字符位置，
  // 当第二次调用exec时，将从lastIndex所指示的字符位置 开始检索。
  while ((match = tagRE.exec(text))) {
    index = match.index;
    // 当文本标签中既有{{}} 在其左边又有普通文本时，
    // 如：<span>我是普通文本{{value}}</span>， 就会执行下面的方法，添加到tokens数组中。
    if (index > lastIndex) {
      tokens.push(JSON.stringify(text.slice(lastIndex, index)));
    }
    // 把匹配到{{}}中的tag 添加到tokens数组中
    const exp = match[1].trim();
    tokens.push(`_s(${exp})`);
    lastIndex = index + match[0].length
  }
  // 当文本标签中既有{{}} 在其右边又有普通文本时，
  // 如：<span>{{value}} 我是普通文本</span>， 就会执行下面的方法，添加到tokens数组中。
  if (lastIndex < text.length) {
    tokens.push(JSON.stringify(text.slice(lastIndex)));
  }
  return tokens.join('+');
}

区分parse和parseHTML

通过上面的代码我们大概了解了实现方式，但是我们可能暂时无法区分parse和parseHTML方法都做了什么。因为parse里面调用了parseHTML，我们先讲讲它。

parseHTML: 用正则匹配的方式，逐一循环HTML字符串，分类不同匹配项，保存最基本的tagName（标签名），attrs（属性），此时属性并没有区分是内置属性还是普通属性，只是简单的分隔了属性名和属性值。从函数名中可以看到加了HTML

比如：attrs 可能是这样的：

attrs = [
  {
    name: '@click',
    value: 'myMethod'
  }, {
    name: ':class',
    value: 'my-class'
  }, {
    name: 'type',
    value: 'button'
  }, {
    name: 'v-if',
    value: 'show'
  }
];

parse： 从parseHTML解析的基本属性数组中重新解析，区分不同属性做不同处理，普通属性与内置属性处理方式是不一样的。并且判断该元素是在哪个位置，也就是确定该元素的父节点、兄弟节点、子节点，最终形成ast。

如何理解stack

stack翻译成汉语就是“栈”。这里我们可以理解为一个容器，存储开始标签的属性和标签名。这里Vue进行了巧妙的设计：

当是开始标签并且标签是普通标签（如：div），就push到数组最后面，

当是结束标签时，找到保存到stack中的项，然后删除找到的项，删除就是代表着标签闭合。

注意：stack 是按照字符串先后顺序存储的，所以我们在接下来解析html字符串时，遇到的闭合标签就是stack存储的最后一项。如：

<div><span></span></div>

当执行到</span>字符串前，stack存储结果：

stack = [div, span];

在执行</span>时，找到stack最后一项，就是span的开始标签（此时里面包含标签名和元素属性）。我们删除stack中的span（span标签闭合，span元素的解析结束），此时stack 就只剩下 [div]， 以此类推。

总结

最后看看运行前后的效果：

模板解析为ast，需要大量的循环与匹配，需要考虑不同字符串的情况，而这种情况正是我们静下心来好好思考的。本人才疏学浅，有问题请批评指出。