前言
这个名词一直不陌生,但是没有细致了解过,结合自己的项目,记录一下自己对AST的理解。
- 什么是AST(抽象语法树)?
抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式,这里特指编程语言的源代码。 - AST的作用?
解释器/编译器进行语法分析的基础 - AST的使用场景?
JS:代码压缩、混淆、编译
CSS:代码兼容多版本
HTML:Vue中Virtual DOM的实现 - 如何获取AST?
uglify、acorn、bablyon、esprima、htmlparser2、postcss - AST标准
https://github.com/estree/estree/blob/master/es5.md
认识一个解析器
电脑中,解析器(parser)是指一个程序,通常是编译器的部分,接收输入的顺序源程序指令、交互式联机命令、标记或者一些其它定义的接口,将它们打破分成几个部分(例如名词(对象),动词(方法)和他们的属性或者选项),然后能够被其它的编程控制(如在编译器中的其它组成)。
目标
/* ==== 解析器部分 begin ==== */
function parseCode(string) {
/**
* 这里做了一些事情讲JS代码转换为语法树
* @string String JS代码
*
* return @Ast Object 抽象语法树
* */
do something
return Ast
}
/* ==== 解析器部分 end ==== */
/* ==== 使用部分 begin ==== */
const CODE_STRING = "var USER = \'Yu Liang\';"
const RESULT = parseCode(CODE_STRING)
{
type: 'Program',
body: [
{
type: 'VariableDeclaration',
declarations: [
{
type: 'VariableDeclarator',
id: {
type: 'Identifier',
name: 'USER'
},
init: {
type: 'Literal',
value: 'Yu Liang',
raw: '\'Yu Liang\''
}
}
],
kind: 'var'
}
],
sourceType: 'script'
}
/* ==== 使用部分 end ==== */
解析思路
1. 词法分析
-
Token Kind
-
Tokenize
-
Tokens Array
目标图例:
2. 语法分析
- Synax Kind(https://github.com/estree/estree/blob/master/es5.md)
- Parse Token
- Build Node
- Build Tree
目标图例:
脑图在线地址:http://naotu.baidu.com/file/b56218ac3b536fa883df18714bfb76a6?token=0e452e4756aaa207 密码:r41p
MVP(Minimum Viable Product 最小可行性产品)
MVP产品同学经常用到的一个名词,其实开发也很需要了解这个概念。
/**
* Created by yuliang on 2018/3/19 17:18
*/
var esprima = require('esprima');
var CODE_STRING = "const answer = 'yuliang'";
// console.log(esprima.tokenize(CODE_STRING));
// 定义token 种类
const TOKEN_KIND = {
Keyword: 'Keyword', //关键词
Identifier: 'Identifier', //标识
Punctuator: 'Punctuator', // 符号
String: 'String', // 字符串
WhiteSpace: 'WhiteSpace', // 字符串
EOF: 'EOF' // 结束
};
// 定义获取token时的status
const TOKENIZE_STATUS =