資訊專(zhuān)欄INFORMATION COLUMN
直接進(jìn)入核心現(xiàn)在說(shuō)說(shuō)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核心代碼中，var ast =parse(template.trim(), options); parse 是通過(guò)用等方式解析 template 模板中的指令、class、style等數(shù)據(jù)，形成AST。
其中有一處優(yōu)化節(jié)點(diǎn)就是optimize(ast, options); optimize ，這樣可以標(biāo)記 static 靜態(tài)節(jié)點(diǎn)，可以當(dāng) update 更新界面時(shí)，會(huì)產(chǎn)生一個(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ò)程，最終得到 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ì)象 ...
現(xiàn)在我們主要講講在 Vue 的 parser，如何將它字符串模板解析為抽象語(yǔ)法樹(shù)(AST)的。
var ast = parse(template.trim(), options);
在講解parse之前，我們先要了解下對(duì)于編譯過(guò)程以及其中一些詳細(xì)技術(shù)要點(diǎn)。
引用自維基百科:
它主要的目的是將便于人編寫(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)工作叫做詞法分析。其實(shí)就如同讀一篇文章，文章的內(nèi)容就是由一個(gè)個(gè)的中文單詞組成的。換而言之我們可以將程序處理也這樣想，它叫做“詞法記號(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 呢？
在編寫(xiě)程序時(shí)，我們要區(qū)分不同的Token，在此之中要利用一些規(guī)則來(lái)表達(dá)“正則文法”。主要就是符合正則文法的表達(dá)式稱(chēng)為“正則表達(dá)式”。以此來(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ǔ)法”。
現(xiàn)在我們來(lái)說(shuō)說(shuō)parser， 這是在編譯器對(duì)源代碼處理的第一步，parser主要就是用來(lái)把某種特定格式的文本（字符串）轉(zhuǎn)換成某種數(shù)據(jù)結(jié)構(gòu)的程序(對(duì)象)，而且編譯器能夠理解這個(gè)數(shù)值?？梢圆幌刖幾g器在后續(xù)步驟中的做有用，舉例上面提到的 句法分析，類(lèi)型檢查/推導(dǎo)，代碼優(yōu)化，代碼生成 等等都依賴(lài)于該數(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)行解析，簡(jiǎn)單來(lái)說(shuō)就是用來(lái)做詞法分析的。不同的是而arse函數(shù)的作用則是在詞法分析的基礎(chǔ)上做句法分析從而生成一棵AST。
以上就是Vue編譯器AST抽象語(yǔ)法樹(shù)源碼分析的詳細(xì)內(nèi)容，請(qǐng)大家關(guān)注更多后續(xù)精彩內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/127807.html
摘要：注意看注釋很粗很簡(jiǎn)單，我就是一程序員姓名，年齡，請(qǐng)聯(lián)系我吧是否保留注釋定義分隔符，默認(rèn)為對(duì)于轉(zhuǎn)成，則需要先獲取，對(duì)于這部分內(nèi)容，做一個(gè)簡(jiǎn)單的分析，具體的請(qǐng)自行查看源碼。其中的負(fù)責(zé)修改以及截取剩余模板字符串。 通過(guò)查看vue源碼，可以知道Vue源碼中使用了虛擬DOM（Virtual Dom），虛擬DOM構(gòu)建經(jīng)歷 template編譯成AST語(yǔ)法樹(shù) -> 再轉(zhuǎn)換為render函數(shù) 最終返回...
摘要：下面用具體代碼進(jìn)行分析。匹配不到那么就是開(kāi)始標(biāo)簽，調(diào)用函數(shù)解析。如這里的轉(zhuǎn)化為加上是為了的下一步轉(zhuǎn)為函數(shù)，本文中暫時(shí)不會(huì)用到。再把轉(zhuǎn)化后的內(nèi)容進(jìn)。 什么是AST 在Vue的mount過(guò)程中，template會(huì)被編譯成AST語(yǔ)法樹(shù)，AST是指抽象語(yǔ)法樹(shù)（abstract syntax tree或者縮寫(xiě)為AST），或者語(yǔ)法樹(shù)（syntax tree），是源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式。...
摘要：?jiǎn)柡?jiǎn)述一下的編譯過(guò)程先上一張圖大致看一下整個(gè)流程從上圖中我們可以看到是從后開(kāi)始進(jìn)行中整體邏輯分為三個(gè)部分解析器將模板字符串轉(zhuǎn)換成優(yōu)化器對(duì)進(jìn)行靜態(tài)節(jié)點(diǎn)標(biāo)記，主要用來(lái)做虛擬的渲染優(yōu)化代碼生成器使用生成函數(shù)代碼字符串開(kāi)始前先解釋一下抽象 20190215問(wèn) 簡(jiǎn)述一下Vue.js的template編譯過(guò)程？ 先上一張圖大致看一下整個(gè)流程showImg(https://image-static....
摘要：具體可以查看抽象語(yǔ)法樹(shù)。而則是帶緩存的編譯器，同時(shí)以及函數(shù)會(huì)被轉(zhuǎn)換成對(duì)象。會(huì)用正則等方式解析模板中的指令等數(shù)據(jù)，形成語(yǔ)法樹(shù)。是將語(yǔ)法樹(shù)轉(zhuǎn)化成字符串的過(guò)程，得到結(jié)果是的字符串以及字符串。里面的節(jié)點(diǎn)與父節(jié)點(diǎn)的結(jié)構(gòu)類(lèi)似，層層往下形成一棵語(yǔ)法樹(shù)。 寫(xiě)在前面 因?yàn)閷?duì)Vue.js很感興趣，而且平時(shí)工作的技術(shù)棧也是Vue.js，這幾個(gè)月花了些時(shí)間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。 文...
摘要：通過(guò)對(duì)源碼閱讀，想寫(xiě)一寫(xiě)自己的理解，能力有限故從尤大佬第一次提交開(kāi)始讀，準(zhǔn)備陸續(xù)寫(xiě)模版字符串轉(zhuǎn)語(yǔ)法樹(shù)語(yǔ)法樹(shù)轉(zhuǎn)函數(shù)雙向綁定原理虛擬比較原理其中包含自己的理解和源碼的分析，盡量通俗易懂由于是的最早提交，所以和最新版本有很多差異，后續(xù)將陸續(xù)補(bǔ)充， 通過(guò)對(duì) Vue2.0 源碼閱讀，想寫(xiě)一寫(xiě)自己的理解，能力有限故從尤大佬2016.4.11第一次提交開(kāi)始讀，準(zhǔn)備陸續(xù)寫(xiě)： 模版字符串轉(zhuǎn)AST語(yǔ)法...
閱讀 654·2023-03-27 18:33
閱讀 848·2023-03-26 17:27
閱讀 729·2023-03-26 17:14
閱讀 708·2023-03-17 21:13
閱讀 628·2023-03-17 08:28
閱讀 2029·2023-02-27 22:32
閱讀 1473·2023-02-27 22:27
閱讀 2381·2023-01-20 08:28
