javascript之抽象语法树

2018-01-04

AST是什么

AST是抽象语法树(Abstract Syntax Tree)的缩写,抽象语法树是一种数据结构,用来代表程序的结构,目前流行的babel转换es6代码也是使用抽象语法树来实现的,最直观的图示

AST能做什么

除了es6的语法转换,node和浏览器执行js代码,uglify模块压缩代码等等,都是通过ast来实现的

目前比较流行的转换ast的模块有esprima和acorn,下面使用esprima来研究一下

const esprima = require('esprima');
let ast = esprima.parse('let name="kelen"');

上面利用esprima来把js代码let name="kelen"转为ast,结果如下

{
    "type": "Program",
    "body": [{
        "type": "VariableDeclaration",
        "declarations": [{
            "type": "VariableDeclarator",
            "id": {"type": "Identifier", "name": "name"},
            "init": {"type": "Literal", "value": "kelen", "raw": "\"kelen\""}
        }],
        "kind": "let"
    }],
    "sourceType": "script"
}

转换成ast后可以用,我们可以使用estraverse来遍历这个对象修改,移除,新增节点等等,然后利用escodegen来将转换后的ast还原成转换后的js代码

es6转es5

下面尝试把es6语法let name="kelen"转换为var a = "kelen",是不是类似于babel转换es6,嘿嘿嘿~ 

const esprima = require('esprima')
const estraverse = require('estraverse')
const escodegen = require('escodegen')

let ast = esprima.parse('let name = "kelen"');

estraverse.traverse(ast, {
    enter (node, parent) {
        if (node.type == 'Identifier' && node.name == "name") {
            node.name = 'n';
            return node;
        }
        if (node.type === 'VariableDeclaration' && node.kind == 'let') {
            node.kind = 'var';
            return node;
        }
    }
})

var js = escodegen.generate(ast);
console.log(js);   // var n = "kelen"

更多的ECMAScript工具可以这里查看

标签: javascript

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
React17.0生命周期调整
在即将到来的react17.0版本,react团队对生命周期做了调整,将会移除 componentWillMount,c...
webpack插件实现
webpack 插件是由「具有 apply 方法的 prototype 对象」所实例化出来的。这个 apply 方法在安...