一看就懂的JS抽象語法樹

HackerShell 發布于2019-08-22 13:58 / 3332人閱讀

摘要：前言是現在幾乎每個項目中必備的一個東西，但是其工作原理避不開對的解析在生成的過程，有引擎，早期了項目，了解這個之前我們先來看看這種引擎解析出來是什么東西。

前言

babel是現在幾乎每個項目中必備的一個東西，但是其工作原理避不開對js的解析在生成的過程，babel有引擎babylon，早期fork了項目acron，了解這個之前我們先來看看這種引擎解析出來是什么東西。不光是babel還有webpack等都是通過javascript parser將代碼轉化成抽象語法樹，這棵樹定義了代碼本身，通過操作這顆樹，可以精準的定位到賦值語句、聲明語句和運算語句

什么是抽象語法樹

我們可以來看一個簡單的例子：

var a = 1;
var b = a + 1;

我們通過這個網站，他是一個esprima引擎的網站，十分好用.畫成流程圖如下：

而他的json對象格式是這樣的：

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "a"
                    },
                    "init": {
                        "type": "Literal",
                        "value": 1,
                        "raw": "1"
                    }
                }
            ],
            "kind": "var"
        },
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "b"
                    },
                    "init": {
                        "type": "BinaryExpression",
                        "operator": "+",
                        "left": {
                            "type": "Identifier",
                            "name": "a"
                        },
                        "right": {
                            "type": "Literal",
                            "value": 1,
                            "raw": "1"
                        }
                    }
                }
            ],
            "kind": "var"
        }
    ],
    "sourceType": "script"
}

眾多的引擎

chrome有v8，firefix有spidermonkey.還有一些常用的引擎有：

esprima

acron

Traceur

UglifyJS2

shift

下面是一些引擎的速度對比，以及用不同的框架，引擎們的加載速度：

我個人認為，封裝的越完美的，其實解析的時間更長，引擎之間也是acron這個速度比較優秀，babel引擎前身就是fork這個項目的。

AST的三板斧

通過esprima生成AST

通過estraverse遍歷和更新AST

通過escodegen將AST重新生成源碼

我們可以來做一個簡單的例子：

1.先新建一個test的工程目錄
2.在test工程下安裝esprima、estraverse、escodegen的npm模塊

npm i esprima estraverse escodegen --save

3.在目錄下面新建一個test.js文件,載入以下代碼：

const esprima = require("esprima");
let code = "const a = 1";
const ast = esprima.parseScript(code);
console.log(ast);

你將會看到輸出結果：

Script {
  type: "Program",
  body:
   [ VariableDeclaration {
       type: "VariableDeclaration",
       declarations: [Array],
       kind: "const" } ],
  sourceType: "script" }

4.再在test文件中，載入以下代碼：

const estraverse = require("estraverse");

estraverse.traverse(ast, {
    enter: function (node) {
        node.kind = "var";
    }
});

console.log(ast);

輸出的結果：

Script {
  type: "Program",
  body:
   [ VariableDeclaration {
       type: "VariableDeclaration",
       declarations: [Array],
       kind: "var" } ],
  sourceType: "script" }

5.最后在test文件中，加入以下代碼：

const escodegen = require("escodegen");
const transformCode = escodegen.generate(ast)

console.log(transformCode);

輸出的結果：

var a = 1;

通過這三板斧：我們將const a = 1轉化成了var a = 1

有沒有babel的感覺0.0

推薦網站

esprima源碼
acron源碼
speed comparison
AST explorer
esprima可視化
在線可視化AST

總結

抽象樹在前端用的很多很多，現在流行的工具，不管是webpack還是babel都會通過那個三板斧的流程，這里我只是大致介紹一下，過段時間，會出一篇抽象樹的語法，有興趣的也可以把esprima的源碼看一下，為什么是esprima呢，因為esprima的資料比較多，而acron比較輕量級。有興趣的可以關注一下我的[github](),記得點個star，就當是對筆者的支持，謝謝。

GPU云服務器云服務器抽象語法樹 python 語法樹 js語法|| js 開發語法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92696.html

一看就懂的module.exports/exports與module.export/export d

摘要：命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系。意思是導出的不是一個具體的數值，而是一個對象命令接受一對大括號，里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊對外接口的名稱相同。一、module.exports與exports nodeJS采用commonJs規范，當前文件是一個模塊(module)私有域，通過exports屬性導出，通過re...

ZoomQuiet 2019-08-23 17:58 評論0 收藏0
一看就懂的例子告訴你用react-redux的正確姿勢

摘要：很多小白在看過很多教程之后仍然在敲代碼的時候不清楚應該以什么樣的步驟進行，那么這篇文章就一步一步分解整個過程，慢動作回放讓大家看的清清楚楚明明白白。另外，中視圖部分最好單獨出來，放在新建一個文件夾目錄下，并被名為引用，把其他邏輯部分放后者。 whay write this: 很多小白在看過很多教程之后仍然在敲代碼的時候不清楚應該以什么樣的步驟進行，那么這篇文章就一步一步分解整個過程，慢...

DobbyKim 2019-08-20 17:26 評論0 收藏0
一看就懂的javascript全等于與等于

Javascript只有六個假值（用在條件if的判斷） showImg(https://segmentfault.com/img/bVLiHL?w=424&h=346); 全等于類型不同，返回false類型相同，則 showImg(https://segmentfault.com/img/bVLiHS?w=476&h=341); 等于類型相同：同上=== 類型不同：嘗試類型轉換==【不是真值和...

Apollo 2019-08-20 15:25 評論0 收藏0
一看就懂的Java線程池分析詳解

摘要：任務性質不同的任務可以用不同規模的線程池分開處理。線程池在運行過程中已完成的任務數量。如等于線程池的最大大小，則表示線程池曾經滿了。線程池的線程數量。獲取活動的線程數。通過擴展線程池進行監控。框架包括線程池，，，，，，等。 Java線程池 [toc] 什么是線程池線程池就是有N個子線程共同在運行的線程組合。舉個容易理解的例子：有個線程組合（即線程池，咱可以比喻為一個公司），里面有3...

Yangder 2019-08-15 14:47 評論0 收藏0
實現一個簡易的webpack

摘要：首先一段代碼轉化成的抽象語法樹是一個對象，該對象會有一個頂級的屬性第二個屬性是是一個數組。最終完成整個文件依賴的處理。參考文章抽象語法樹一看就懂的抽象語法樹源碼所有的源碼已經上傳背景隨著前端復雜度的不斷提升，誕生出很多打包工具，比如最先的grunt，gulp。到后來的webpack和 Parcel。但是目前很多腳手架工具，比如vue-cli已經幫我們集成了一些構建工具的使用。有的時...

darcrand 2019-08-26 12:01 評論0 收藏0