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工具可以这里查看

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: javascript

评论

Loading...

最新评论

相关推荐

前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
React17.0生命周期调整
在即将到来的react17.0版本,react团队对生命周期做了调整,将会移除 componentWillMount,c...
ES6装饰器的应用
什么是装饰器 装饰器(Decorator)函数,是用来修改类的行为,一个装饰器函数有三个参数 target 装饰...
scroll-top-icon