如何书写代码选择器

阅读时间约 1 分钟

操作AST最核心的是获取到AST节点,由于节点的类型、属性繁杂,通常获取节点需要层层对比,写大量匹配代码。使用GoGoCode可以帮你大大简化这一步。

匹配一段确定的代码

代码选择器本身就是代码

当你想匹配一句确定的代码时,直接使用它自身就可以,如果需要找到代码中所有的console.log('a'),则执行 AST.find("console.log('a')"),选择器是"console.log('a')"

匹配一段部分确定的代码

如果需要区别console.log打印出的内容,有选择的进行操作,那么只需要将不确定的部分替换为$_$,执行AST.find("console.log($_$)")


选择器包含两部分:确定的代码+代码通配符。


通配符的个数不限,位置不限,只要代码选择器是一段合法的、能被解析成功的代码即可

不确定是否合法,去 https://astexplorer.net/ 验证一下~

如果存在多个通配符,可以在通配符之后加一个key,例如:

const declaration = 
    $(`const a = { key: 1, value: 'gogo' }`)
    .find(`const $_$1 = $_$2`)

这样匹配到代码的同时,能够快捷的拿到通配符匹配到的内容


下图这是选择器通过find匹配到的整句代码对应的AST节点:


下图是是 $_$1$_$2 分别匹配到的节点以及对应的输出


选择器示例:

var $_$1 = $_$2

function $_$name () { $_$body }

View.extend($_$)

$_$a ? $_$b : $_$c

$_$1 && $_$2

if ($_$1) {
    $_$2
}
<div $_$1="$_$2"><div>

<style>$_$</style>

接下来你就可以轻松的使用选择器啦~
选择器匹配到的节点是什么结构?能不能迅速拿到节点上下文?通配符匹配到的内容能不能快速便捷的使用?请看.find()的介绍