Vue2.x 源码解析：第十五篇 - AST 语法树的构建 - 构造树形结构

前端

2023-11-28 12:41:27

前言

在前面的文章中，我们已经介绍了如何将模板字符串转换成抽象语法树（AST）。这棵树的结构非常简单，只有根节点和一个子节点，根节点代表整个模板，子节点代表根节点中的内容。

在这一篇中，我们将继续深入剖析 Vue2.x 源码，具体讲解如何将抽象语法树转换成一棵真正的语法树，这棵树的结构更加复杂，不仅包含根节点和子节点，还包含各种各样的其他节点，比如元素节点、文本节点、属性节点等等。

基于 HTML 特点，使用栈型数据结构记录父子关系

在开始介绍如何构建语法树之前，我们先来了解一下 HTML 的一些特点。

HTML 是一个嵌套结构，元素可以嵌套在元素中。
HTML 元素有开始标签和结束标签，开始标签和结束标签必须成对出现。
HTML 元素可以包含文本，文本可以是纯文本，也可以是 HTML 代码。

基于 HTML 的这些特点，我们可以使用栈型数据结构来记录父子关系。栈是一种先进后出的数据结构，我们可以把元素的开始标签压入栈中，当遇到元素的结束标签时，我们将栈顶的元素弹出，这样就可以得到元素的父子关系。

开始标签、结束标签及文本的处理方式

知道了如何记录父子关系之后，我们就可以开始构建语法树了。构建语法树的过程其实就是将抽象语法树中的每个子节点转换成一个语法树节点，并将这些节点按照父子关系连接起来。

开始标签

当遇到开始标签时，我们将创建一个元素节点，并将该节点压入栈中。元素节点包含以下信息：

元素名称
元素属性
元素的子节点

结束标签

当遇到结束标签时，我们将栈顶的元素弹出，并将该元素的子节点添加到该元素的父节点中。

文本

当遇到文本时，我们将创建一个文本节点，并将该节点添加到栈顶元素的子节点中。

代码重构及 AST 语法树构建过程

在介绍完如何处理开始标签、结束标签和文本之后，我们就可以对代码进行重构了。重构后的代码如下：

function buildAST(template) {
  // 将模板字符串转换成抽象语法树
  const abstractSyntaxTree = parseTemplate(template);

  // 创建栈来记录父子关系
  const stack = [];

  // 将抽象语法树的根节点压入栈中
  stack.push(abstractSyntaxTree.root);

  // 循环遍历抽象语法树的子节点
  for (let i = 0; i < abstractSyntaxTree.children.length; i++) {
    const child = abstractSyntaxTree.children[i];

    // 如果是开始标签，则创建一个元素节点并压入栈中
    if (child.type === 'startTag') {
      const element = createElementNode(child);
      stack.push(element);
    }

    // 如果是结束标签，则将栈顶的元素弹出，并将该元素的子节点添加到该元素的父节点中
    else if (child.type === 'endTag') {
      const element = stack.pop();
      element.parent.children.push(element);
    }

    // 如果是文本，则创建一个文本节点并添加到栈顶元素的子节点中
    else if (child.type === 'text') {
      const text = createTextNode(child);
      stack.push(text);
    }
  }

  // 返回语法树的根节点
  return stack[0];
}