資訊專欄INFORMATION COLUMN
摘要：例如會(huì)被分解成解析語(yǔ)法分析這個(gè)過(guò)程是將詞法單元流數(shù)組轉(zhuǎn)換成一個(gè)由元素逐級(jí)嵌套所組成的代表了程序語(yǔ)法結(jié)構(gòu)的樹(shù)，這個(gè)樹(shù)就叫抽象語(yǔ)法樹(shù)。常用的有使用生成并使用抽象語(yǔ)法樹(shù)。
一般來(lái)說(shuō)，程序中的一段源代碼在執(zhí)行之前會(huì)經(jīng)歷下面三個(gè)步驟
1 分詞／詞法分析
這個(gè)過(guò)程會(huì)將由字符組成的字符串分解成有意義的代碼快，這些代碼塊被稱為詞法單元。例如 var a = 4；會(huì)被分解成 var、a、=、4、;
2 解析／語(yǔ)法分析
這個(gè)過(guò)程是將詞法單元流（數(shù)組）轉(zhuǎn)換成一個(gè)由元素逐級(jí)嵌套所組成的代表了程序語(yǔ)法結(jié)構(gòu)的樹(shù)，這個(gè)樹(shù)就叫“抽象語(yǔ)法樹(shù)”（AST）。全稱 Abstract Syntax Tree。
3 代碼生成
將AST轉(zhuǎn)換成可執(zhí)行代碼的過(guò)程稱為代碼生成。拋開(kāi)具體細(xì)節(jié)不講，簡(jiǎn)單來(lái)說(shuō)就是有某種方法可以將var a= 4; 的AST轉(zhuǎn)化為一組機(jī)器指令,用來(lái)創(chuàng)建一個(gè)叫做a的變量，并將一個(gè)值儲(chǔ)存在a中。
可能以上的這些聽(tīng)起來(lái)有些云里霧里。因?yàn)樵谄綍r(shí)寫代碼的時(shí)候，不關(guān)注這些也能寫代碼。但是多了解一些，就多一扇看到未知世界的窗口。你肯定使用過(guò)前端的很多工具插件，webpack，eslint啥的。你知道這些工具的核心都是通過(guò)抽象語(yǔ)法樹(shù)這個(gè)概念來(lái)實(shí)現(xiàn)對(duì)代碼的檢查，分析，轉(zhuǎn)換的嗎？
抽象語(yǔ)法樹(shù)的定義In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the abstract syntactic structure of source code written in a programming language.
翻譯一下就是：
在計(jì)算機(jī)科學(xué)中，一個(gè)抽象語(yǔ)法樹(shù)，或者詞法樹(shù)，是一個(gè)樹(shù)，這個(gè)樹(shù)表示或者說(shuō)抽象出了編程語(yǔ)言的源代碼的結(jié)構(gòu)。
這個(gè)工具能在線可視化解析出一段代碼的抽象語(yǔ)法樹(shù)，可能能幫助你理解
這個(gè)可以進(jìn)一步看更詳盡的信息
下面舉一個(gè)上邊工具中的demo，看看js在執(zhí)行之前的三步中的前兩步都是具體的干了啥。
var a = 42;
var b = 5;
function addA(d) {
return a + d;
}
var c = addA(2) + b;
第一步，詞法分析，以上代碼詞法分析之后長(zhǎng)成如下圖所示
第二步，語(yǔ)法分析，生產(chǎn)抽象語(yǔ)法樹(shù)，生成的抽象語(yǔ)法樹(shù)如下圖所示
JavaScript Parser 把js源碼轉(zhuǎn)化為抽象語(yǔ)法樹(shù)的解析器。前邊我們也說(shuō)了。瀏覽器在執(zhí)行js之前會(huì)把js源碼通過(guò)解析器轉(zhuǎn)化為抽象語(yǔ)法樹(shù)，再進(jìn)一步轉(zhuǎn)化為字節(jié)碼甚至是機(jī)器碼。
常用的JavaScript Parser有：
Esprima
UglifyJS2
Traceur
Acorn
Espree
Shfit
使用Esprima生成并使用抽象語(yǔ)法樹(shù)。通過(guò)esprima將一個(gè)空函數(shù)的源碼生成一棵AST樹(shù)
通過(guò)estraverse遍歷并更新AST樹(shù)
通過(guò)escodegen將AST重新生成源碼
抽象語(yǔ)法樹(shù)的用途其實(shí)從以上的三個(gè)工具，也可大致猜測(cè)到抽象語(yǔ)法樹(shù)的一般用途了。大致分為幾類吧
IDE插件，如代碼語(yǔ)法檢查，代碼風(fēng)格檢查，代碼的格式化，代碼高亮，代碼錯(cuò)誤等等之類的
代碼的混淆壓縮，如UglifyJS2等
轉(zhuǎn)換代碼的工具。如webpack，rollup，各種代碼規(guī)范之間的轉(zhuǎn)換，ts，jsx等轉(zhuǎn)換為原生js
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94261.html
摘要：原文鏈接何為語(yǔ)法樹(shù)什么是語(yǔ)法樹(shù)你是否曾想過(guò)，這個(gè)世界存在這么多語(yǔ)言的意義。語(yǔ)法樹(shù)，計(jì)算機(jī)描述世界真理的樹(shù)狀結(jié)構(gòu)。不同的語(yǔ)言，都會(huì)配之不同的語(yǔ)法分析器，而語(yǔ)法分析器是把源代碼作為字符串讀入解析，并建立語(yǔ)法樹(shù)的程序。 原文鏈接：BlueSun | 何為語(yǔ)法樹(shù) 什么是語(yǔ)法樹(shù)？ 你是否曾想過(guò)，這個(gè)世界存在這么多語(yǔ)言的意義。 假如現(xiàn)在你面前有一個(gè)物體，它是一個(gè)不規(guī)則的圓體，整個(gè)身體通紅，頭部還有...
摘要：下面用具體代碼進(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或者縮寫為AST），或者語(yǔ)法樹(shù)（syntax tree），是源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式。...
摘要：首先一段代碼轉(zhuǎn)化成的抽象語(yǔ)法樹(shù)是一個(gè)對(duì)象，該對(duì)象會(huì)有一個(gè)頂級(jí)的屬性第二個(gè)屬性是是一個(gè)數(shù)組。最終完成整個(gè)文件依賴的處理。參考文章抽象語(yǔ)法樹(shù)一看就懂的抽象語(yǔ)法樹(shù)源碼所有的源碼已經(jīng)上傳 背景 隨著前端復(fù)雜度的不斷提升，誕生出很多打包工具，比如最先的grunt，gulp。到后來(lái)的webpack和 Parcel。但是目前很多腳手架工具，比如vue-cli已經(jīng)幫我們集成了一些構(gòu)建工具的使用。有的時(shí)...
摘要：無(wú)論你使用的是解釋型語(yǔ)言還是編譯型語(yǔ)言，都有一個(gè)共同的部分將源代碼作為純文本解析為抽象語(yǔ)法樹(shù)的數(shù)據(jù)結(jié)構(gòu)。和抽象語(yǔ)法樹(shù)相對(duì)的是具體語(yǔ)法樹(shù)，通常稱作分析樹(shù)。這是引入字節(jié)碼緩存的原因。 這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 14 篇。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ 如果你錯(cuò)過(guò)了前面的章節(jié)，可以在這里找到它們： JavaS...
摘要：本文并不會(huì)告訴你抽象語(yǔ)法樹(shù)是什么，這需要你自己去了解，這里只是描述給帶來(lái)的一些變化。中在語(yǔ)法分析階段不再直接生成，而是先生成，所以過(guò)程多了一步詞法掃描分析，將源文件轉(zhuǎn)換成流語(yǔ)法分析，從流生成抽象語(yǔ)法樹(shù)從抽象語(yǔ)法樹(shù)生成。 本文大部分內(nèi)容參照 AST 的 RFC 文檔而成：https://wiki.php.net/rfc/abstract_syntax_tree，為了易于理解從源文檔中節(jié)選...
閱讀 1930·2021-09-14 18:03
閱讀 2326·2019-08-30 15:48
閱讀 1195·2019-08-30 14:09
閱讀 580·2019-08-30 12:55
閱讀 2795·2019-08-29 11:29
閱讀 1550·2019-08-26 13:43
閱讀 2371·2019-08-26 13:30
閱讀 2436·2019-08-26 12:17
