摘要：針對(duì)語法樹節(jié)點(diǎn)的查詢操作通常伴隨著和這兩種方法見下一篇文章。注意上述代碼打印出的和中的并不完全一致。如函數(shù)，在中的為，但其實(shí)際的為。這個(gè)大家一定要注意哦，因?yàn)樵谖覀兒竺娴膶?shí)際代碼中也有用到。

??在上一篇文章中，我們介紹了AST的Create。在這篇文章中，我們接著來介紹AST的Retrieve。
??針對(duì)語法樹節(jié)點(diǎn)的查詢(Retrieve)操作通常伴隨著Update和Remove(這兩種方法見下一篇文章)。這里介紹兩種方式：直接訪問和traverse。

??本文中所有對(duì)AST的操作均基于以下這一段代碼

const babylon = require("babylon")
const t = require("@babel/types")
const generate = require("@babel/generator").default
const traverse = require("@babel/traverse").default

const code = `
export default {
  data() {
    return {
      message: "hello vue",
      count: 0
    }
  },
  methods: {
    add() {
      ++this.count
    },
    minus() {
      --this.count
    }
  }
}
`

const ast = babylon.parse(code, {
  sourceType: "module",
  plugins: ["flow"]
})

??對(duì)應(yīng)的AST explorer的表示如下圖所示，大家可以自行拷貝過去查看：

??如上圖中，有很多節(jié)點(diǎn)Node，如需要獲取ExportDefaultDeclaration下的data函數(shù)，直接訪問的方式如下：

const dataProperty = ast.program.body[0].declaration.properties[0]
console.log(dataProperty)

程序輸出：

Node {
  type: "ObjectMethod",
  start: 20,
  end: 94,
  loc:
   SourceLocation {
     start: Position { line: 3, column: 2 },
     end: Position { line: 8, column: 3 } },
  method: true,
  shorthand: false,
  computed: false,
  key:
   Node {
     type: "Identifier",
     start: 20,
     end: 24,
     loc: SourceLocation { start: [Object], end: [Object], identifierName: "data" },
     name: "data" },
  kind: "method",
  id: null,
  generator: false,
  expression: false,
  async: false,
  params: [],
  body:
   Node {
     type: "BlockStatement",
     start: 27,
     end: 94,
     loc: SourceLocation { start: [Object], end: [Object] },
     body: [ [Object] ],
     directives: [] } }

??這種直接訪問的方式可以用于固定程序結(jié)構(gòu)下的節(jié)點(diǎn)訪問，當(dāng)然也可以使用遍歷樹的方式來訪問每個(gè)Node。

??這里插播一個(gè)Update操作，把data函數(shù)修改為mydata：

const dataProperty = ast.program.body[0].declaration.properties[0]
dataProperty.key.name = "mydata"

const output = generate(ast, {}, code)
console.log(output.code)

程序輸出：

export default {
  mydata() {
    return {
      message: "hello vue",
      count: 0
    };
  },

  methods: {
    add() {
      ++this.count;
    },

    minus() {
      --this.count;
    }

  }
};

??使用直接訪問Node的方式，在簡單場景下比較好用。可是對(duì)于一些復(fù)雜場景，存在以下幾個(gè)問題：

需要處理某一類型的Node，比如ThisExpression、ArrowFunctionExpression等，這時(shí)候我們可能需要多次遍歷AST才能完成操作

到達(dá)特定Node后，要訪問他的parent、sibling時(shí)，不方便，但是這個(gè)也很常用

??@babel/traverse庫可以很好的解決這一問題。traverse的基本用法如下：

// 該代碼打印所有 node.type。 可以使用`path.type`，可以使用`path.node.type`
let space = 0

traverse(ast, {
  enter(path) {
    console.log(new Array(space).fill(" ").join(""), ">", path.node.type)
    space += 2
  },
  exit(path) {
    space -= 2
    // console.log(new Array(space).fill(" ").join(""), "<", path.type)
  }
})

程序輸出：

 > Program
   > ExportDefaultDeclaration
     > ObjectExpression
       > ObjectMethod
         > Identifier
         > BlockStatement
           > ReturnStatement
             > ObjectExpression
               > ObjectProperty
                 > Identifier
                 > StringLiteral
               > ObjectProperty
                 > Identifier
                 > NumericLiteral
       > ObjectProperty
         > Identifier
         > ObjectExpression
           > ObjectMethod
             > Identifier
             > BlockStatement
               > ExpressionStatement
                 > UpdateExpression
                   > MemberExpression
                     > ThisExpression
                     > Identifier
           > ObjectMethod
             > Identifier
             > BlockStatement
               > ExpressionStatement
                 > UpdateExpression
                   > MemberExpression
                     > ThisExpression
                     > Identifier

??traverse引入了一個(gè)NodePath的概念，通過NodePath的API可以方便的訪問父子、兄弟節(jié)點(diǎn)。

??注意： 上述代碼打印出的node.type和AST explorer中的type并不完全一致。實(shí)際在使用traverse時(shí)，需要以上述打印出的node.type為準(zhǔn)。如data函數(shù)，在AST explorer中的type為Property，但其實(shí)際的type為ObjectMethod。這個(gè)大家一定要注意哦，因?yàn)樵谖覀兒竺娴膶?shí)際代碼中也有用到。

??仍以上述的訪問data函數(shù)為例，traverse的寫法如下：

traverse(ast, {
  ObjectMethod(path) {
    // 1
    if (
      t.isIdentifier(path.node.key, {
        name: "data"
      })
    ) {
      console.log(path.node)
    }

    // 2
    if (path.node.key.name === "data") {
      console.log(path.node)
    }
  }
})

??上面兩種判斷Node的方法都可以，哪個(gè)更好一些，我也沒有研究。

??通過travase獲取到的是NodePath，NodePath.node等價(jià)于直接訪問獲取的Node節(jié)點(diǎn)，可以進(jìn)行需要的操作。

??以下是一些從babel-handbook中看到的NodePath的API，寫的一些測試代碼，大家可以參考看下，都是比較常用的：

parent

traverse(ast, {
  ObjectMethod(path) {
    if (path.node.key.name === "data") {
      const parent = path.parent
      console.log(parent.type)    // output: ObjectExpression
    }
  }
})

findParent

traverse(ast, {
  ObjectMethod(path) {
    if (path.node.key.name === "data") {
      const parent = path.findParent(p => p.isExportDefaultDeclaration())
      console.log(parent.type)
    }
  }
})

find 從Node節(jié)點(diǎn)找起

traverse(ast, {
  ObjectMethod(path) {
    if (path.node.key.name === "data") {
      const parent = path.find(p => p.isObjectMethod())
      console.log(parent.type) // output: ObjectMethod
    }
  }
})

container 沒太搞清楚，訪問的NodePath如果是在array中的時(shí)候比較有用

traverse(ast, {
  ObjectMethod(path) {
    if (path.node.key.name === "data") {
      const container = path.container
      console.log(container) // output: [...]
    }
  }
})

getSibling 根據(jù)index獲取兄弟節(jié)點(diǎn)

traverse(ast, {
  ObjectMethod(path) {
    if (path.node.key.name === "data") {
      const sibling0 = path.getSibling(0)
      console.log(sibling0 === path) // true
      const sibling1 = path.getSibling(path.key + 1)
      console.log(sibling1.node.key.name) // methods
    }
  }
})

skip 最后介紹一下skip，執(zhí)行之后，就不會(huì)在對(duì)葉節(jié)點(diǎn)進(jìn)行遍歷

traverse(ast, {
  enter(path) {
    console.log(path.type)
    path.skip()
  }
})

程序輸出根節(jié)點(diǎn)Program后結(jié)束。