引言

接上篇  Vue編譯器源碼分析compile 解析

baseCompile主要核心代碼

// `createCompilerCreator` allows creating compilers that use alternative
// parser/optimizer/codegen, e.g the SSR optimizing compiler.
// Here we just export a default compiler using the default parts.
var createCompiler = createCompilerCreator(function baseCompile(
	template,
	options
) {
	var ast = parse(template.trim(), options);
	if (options.optimize !== false) {
	}
	var code = generate(ast, options);
	return {
		ast: ast,
		render: code.render,
		staticRenderFns: code.staticRenderFns
	}
});

可以看到 baseCompile 的代碼非常的簡(jiǎn)短主要核心代碼。

• var ast =parse(template.trim(), options); parse 會(huì)用正則等方式解析 template 模板中的指令、class、style等數(shù)據(jù)，形成AST。
• optimize(ast, options); optimize 的主要作用是標(biāo)記 static 靜態(tài)節(jié)點(diǎn)，這是 Vue 在編譯過(guò)程中的一處優(yōu)化，后面當(dāng) update 更新界面時(shí)，會(huì)有一個(gè) patch 的過(guò)程， diff 算法會(huì)直接跳過(guò)靜態(tài)節(jié)點(diǎn)，從而減少了比較的過(guò)程，優(yōu)化了 patch 的性能。
• var code =generate(ast, options); 生成目標(biāo)平臺(tái)所需的代碼，將 AST 轉(zhuǎn)化成 render function 字符串的過(guò)程，得到結(jié)果是 render 的字符串以及 staticRenderFns 字符串。

最終 baseCompile 的返回值

{
 	ast: ast,
 	render: code.render,
 	staticRenderFns: code.staticRenderFns
 }

最終返回了抽象語(yǔ)法樹(shù)( ast )，渲染函數(shù)( render )，靜態(tài)渲染函數(shù)( staticRenderFns )，且render 的值為code.render ，staticRenderFns 的值為code.staticRenderFns ，也就是說(shuō)通過(guò) generate 處理 ast 之后得到的返回值 code 是一個(gè)對(duì)象 ...

接下來(lái)讓我們把目光聚焦在 Vue 的 parser，它是如何將字符串模板解析為抽象語(yǔ)法樹(shù)(AST)的。

var ast = parse(template.trim(), options);

在講解parse之前你需要對(duì)編譯過(guò)程以及其中的技術(shù)點(diǎn)有個(gè)宏觀、概要的了解。

引用自維基百科:

它主要的目的是將便于人編寫(xiě)、閱讀、維護(hù)的高級(jí)計(jì)算機(jī)語(yǔ)言所寫(xiě)作的源代碼程序，翻譯為計(jì)算機(jī)能解讀、運(yùn)行的低階機(jī)器語(yǔ)言的程序。源代碼一般為高階語(yǔ)言（High-level language），如Pascal、C、C++、C# 、Java等，而目標(biāo)語(yǔ)言則是匯編語(yǔ)言或目標(biāo)機(jī)器的目標(biāo)代碼（Object code）。

編譯器的技術(shù)分為詞法分析、語(yǔ)法分析和語(yǔ)義分析三個(gè)部分，通常編譯器的第一項(xiàng)工作叫做詞法分析。就像閱讀文章一樣，文章是由一個(gè)個(gè)的中文單詞組成的。程序處理也一樣，只不過(guò)這里不叫單詞，而是叫做“詞法記號(hào)”，英文叫 Token。

<div id="app" v-if="ret">{{ message }}</div>

編譯器會(huì)識(shí)別出 div a span 這些標(biāo)簽，id class style v-if v-for 這樣的屬性、指令，還有花括號(hào)符號(hào)這樣的插值操作...等。這些都是 Token。

如何寫(xiě)一個(gè)程序來(lái)識(shí)別 Token

那么，如何寫(xiě)一個(gè)程序來(lái)識(shí)別 Token 呢？

其實(shí)，我們可以手寫(xiě)程序制定一些規(guī)則來(lái)區(qū)分每個(gè)不同的 Token，這些規(guī)則用“正則文法”表達(dá)，符合正則文法的表達(dá)式稱為“正則表達(dá)式”。通過(guò)他們來(lái)完成具體的詞法分析工作。

編譯器下一個(gè)階段的工作是語(yǔ)法分析。詞法分析是識(shí)別一個(gè)個(gè)的單詞，而語(yǔ)法分析就是在詞法分析的基礎(chǔ)上識(shí)別出程序的語(yǔ)法結(jié)構(gòu)。這個(gè)結(jié)構(gòu)是一個(gè)樹(shù)狀結(jié)構(gòu)，是計(jì)算機(jī)容易理解和執(zhí)行的。

程序也要定義良好的語(yǔ)法結(jié)構(gòu)，它的語(yǔ)法分析過(guò)程，就是構(gòu)造這么一棵樹(shù)。一個(gè)程序就是一棵樹(shù)，這棵樹(shù)叫做抽象語(yǔ)法樹(shù)（Abstract Syntax Tree，AST）。樹(shù)的每個(gè)節(jié)點(diǎn)（子樹(shù)）是一個(gè)語(yǔ)法單元，這個(gè)單元的構(gòu)成規(guī)則就叫“語(yǔ)法”。

而我們這里要講的 parser 就是在編譯器對(duì)源代碼處理的第一步，parser 把某種特定格式的文本（字符串）轉(zhuǎn)換成某種數(shù)據(jù)結(jié)構(gòu)的程序(對(duì)象)，并且這個(gè)數(shù)據(jù)結(jié)構(gòu)是編譯器能夠理解的，因?yàn)榫幾g器的后續(xù)步驟，比如上面提到的 句法分析，類型檢查/推導(dǎo)，代碼優(yōu)化，代碼生成 等等都依賴于該數(shù)據(jù)結(jié)構(gòu)。

注：parse & parser 這兩個(gè)單詞，不要混淆，parse 是動(dòng)詞，代表“解析”的過(guò)程，parser 是名詞，代表“解析器”。

Vue 的編譯器也不例外, 在詞法分析階段 Vue 會(huì)把字符串模板解析成一個(gè)個(gè)的令牌(token)，該令牌將用于句法分析階段，在句法分析階段會(huì)根據(jù)令牌生成一棵 AST，最后再根據(jù)該 AST生成最終的渲染函數(shù)，這樣就完成了代碼的生成。

var ast = parse(template.trim(), options);

parse 函數(shù)解析模板字符串

回歸到剛剛的代碼，已知 parse 函數(shù)就是用來(lái)解析模板字符串的，最終生成AST。

function parse(template, options) {
   // 省略...
  parseHTML(template, {
    warn,
    expectHTML: options.expectHTML,
    isUnaryTag: options.isUnaryTag,
    canBeLeftOpenTag: options.canBeLeftOpenTag,
    shouldDecodeNewlines: options.shouldDecodeNewlines,
    shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
    shouldKeepComment: options.comments,
    start (tag, attrs, unary) {
      // 省略...
    },
    end () {
      // 省略...
    },
    chars (text: string) {
      // 省略...
    },
    comment (text: string) {
      // 省略...
    }
  })
  return root
}

需要注意到在parse 函數(shù)內(nèi)部主要通過(guò)調(diào)用parseHTML 函數(shù)對(duì)模板字符串進(jìn)行解析，實(shí)際上parseHTML 函數(shù)的作用就是用來(lái)做詞法分析的，而parse函數(shù)的作用則是在詞法分析的基礎(chǔ)上做句法分析從而生成一棵AST。本節(jié)我們主要分析一下Vue是如何對(duì)模板字符串進(jìn)行詞法分析的，也就是parseHTML 函數(shù)的實(shí)現(xiàn)。

接下來(lái)我們章節(jié)會(huì)分為兩個(gè)方向

一：parseHTML 函數(shù)源碼解析

二：Vue編譯器token解析規(guī)則-正則分析

以上就是Vue編譯器AST抽象語(yǔ)法樹(shù)源碼分析的詳細(xì)內(nèi)容，更多關(guān)于Vue編譯器AST抽象語(yǔ)法樹(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論