min.

AST pt1

2021-05-05# programming

AST 是 JavaScript Parsing 中的一個重要議題,會接觸到這個議題是由於在研究 SSG 的 Template Engine 時接觸的,而這篇文章是 Front End Master 上的 AST Workshop 課程筆記。

AST 是什麼?

AST 中文全名又是抽象語法樹,而轉換成 AST 最重要的功能就在於將一般人所寫的程式碼轉換成電腦所閱讀的結構,有別於在 CS 課程裡面會提到更底層的機器語言,這邊的轉換僅止於程式碼的結構,還未 Compile 成其他語言,有點像是我們平常在學語言裡面的文法分析,將句子拆成樹狀結構,看什麼詞是動詞、複合詞,複合詞是不是又由形容詞加一個名詞組成。

而 AST 通常用在程式碼的 Parse 階段,所有需要讓電腦了解程式碼內容並進行判斷的程式都會應用到,在網站開發領域裡面像是:ESLint, Babel 等等都有用到 AST 的概念。

實際以一段大家喜聞樂見的 Hello World JavaScript 程式碼為例:

function print() {
  console.log('hello world')
}

參考 JointJS AST demo 網站2,如果經過 AST 轉換則會變成這樣的樹狀結構: 而另外用 AST Explorer [^3] 以 JSON 檔格式來呈現則會如下:

{
  "type": "Program",
  "start": 0,
  "end": 52,
  "body": [
    {
      "type": "FunctionDeclaration",
      "start": 1,
      "end": 51,
      "id": {
        "type": "Identifier",
        "start": 10,
        "end": 15,
        "name": "print"
      },
      "expression": false,
      "generator": false,
      "async": false,
      "params": [],
      "body": {
        "type": "BlockStatement",
        "start": 18,
        "end": 51,
        "body": [
          {
            "type": "ExpressionStatement",
            "start": 22,
            "end": 49,
            "expression": {
              "type": "CallExpression",
              "start": 22,
              "end": 48,
              "callee": {
                "type": "MemberExpression",
                "start": 22,
                "end": 33,
                "object": {
                  "type": "Identifier",
                  "start": 22,
                  "end": 29,
                  "name": "console"
                },
                "property": {
                  "type": "Identifier",
                  "start": 30,
                  "end": 33,
                  "name": "log"
                },
                "computed": false,
                "optional": false
              },
              "arguments": [
                {
                  "type": "Literal",
                  "start": 34,
                  "end": 47,
                  "value": "hello world",
                  "raw": "'hello world'"
                }
              ],
              "optional": false
            }
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

V8 引擎幫我們將程式碼轉為 AST 結構,省略了語言的細節 e.g. {} 就不會被顯示出來,而 AST 結構的優點2則是在於把邏輯跟語言轉譯過程分開,舉例來說:今天是一段奇怪的語法,可以在 AST 產生時被判斷出來,如果今天是邏輯問題,則可以參考 AST 結構結果。

而要學習 AST 最好的方法是從有應用到 AST 概念的工具中學習,以下將跟著 workshop 嘗試開發 ESLint, Babel 與 Codemod 的 Plugin 來練習 AST 的概念。

# programming

© 2020 minw Powered by Gatsby