抽象语法树是什么
在计算机科学中，抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。之所以说语法是「抽象」的，是因为这里的语法并不会表示出真实语法中出现的每个细节。1
果然比较抽象，不如先看几个例子：
抽象语法树举例
|
1 2 3 4 5 6 7 8 9 10 11 |
foo = 'hello world'; /* +-------------+ | assign(=) | +-------------+ X X X X +-------+ +-----------------+ | foo | | 'hello world' | +-------+ +-----------------+ */ |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
if (foo === true) { bar = 'hello world'; alert(bar); } /* +------+ | if | +------+ X X X X +--------------+ +-------------+ | equal(===) | | if_body | +--------------+ +-------------+ X X X X X X X X +-------+ +--------+ +-------------+ +------------+ | foo | | true | | assign(=) | | alert() | +-------+ +--------+ +-------------+ +------------+ X X X X X X +-------+ +-----------------+ +-------+ | bar | | 'hello world' | | bar | +-------+ +-----------------+ +-------+ */ |
从上述两个例子可以看出，抽象语法树是将源代码根据其语法结构，省略一些细节（比如：括号没有生成节点），抽象成树形表达。
抽象语法树在计算机科学中有很多应用，比如编译器、IDE、压缩优化代码等。下面介绍一下抽象语法树在 JavaScript 中的应用。
JavaScript 抽象语法树
构造 JavaScript 抽象语法树有多种工具，比如 v8、SpiderMonkey、UglifyJS 等，这里重点介绍 UglifyJS。
UglifyJS
UglifyJS 是使用最广的 JavaScript 压缩工具之一，而且自身也是用 JavaScript 写的，使用它的方法很简单（需要 nodejs 环境）：
首先全局安装：
|
1 |
[sudo ]npm install -g uglify-js |
然后就可以使用了：
|
1 |
uglifyjs -m srcFileName.js -o destFileName.min.js |
关于 UglifyJS 的用法这里就不多介绍了，我们要做的是一些更有趣的事情。
UglifyJS Tools
UglifyJS 提供了一些工具用于分析 JavaScript 代码，包括：
- parser，把 JavaScript 代码解析成抽象语法树
- code generator，通过抽象语法树生成代码
- mangler，混淆 JavaScript 代码
- scope analyzer，分析变量定义的工具
- tree walker，遍历树节点
- tree transformer，改变树节点
生成抽象语法树
使用 UglifyJS 生成抽象语法树很简单：
首先安装 UglifyJS 为 npm 包：
|
1 |
npm install uglify-js --save-dev |
然后使用 parse 方法即可：
|
1 2 3 |
var UglifyJS = require('uglify-js'); var ast = UglifyJS.parse('function sum(foo, bar){ return foo + bar; }'); |
这样生成的 ast 即为那一段代码的抽象语法树。那么我们怎么使用呢？
使用 mangler 压缩代码
使用 mangler 可以通过将局部变量都缩短成一个字符来压缩代码。
|
1 2 3 4 5 6 7 |
var UglifyJS = require(ee 或者缩写为 AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。之所以说语法是「抽象」的，是因为这里的语法并不会表示出真实语法中出现的每个细节。1
果然比较抽象，不如先看几个例子： 抽象语法树举例
从上述两个例子可以看出，抽象语法树是将源代码根据其语法结构，省略一些细节（比如：括号没有生成节点），抽象成树形表达。 抽象语法树在计算机科学中有很多应用，比如编译器、IDE、压缩优化代码等。下面介绍一下抽象语法树在 JavaScript 中的应用。 JavaScript 抽象语法树构造 JavaScript 抽象语法树有多种工具，比如 v8、SpiderMonkey、UglifyJS 等，这里重点介绍 UglifyJS。 UglifyJSUglifyJS 是使用最广的 JavaScript 压缩工具之一，而且自身也是用 JavaScript 写的，使用它的方法很简单（需要 nodejs 环境）： 首先全局安装：
然后就可以使用了：
关于 UglifyJS 的用法这里就不多介绍了，我们要做的是一些更有趣的事情。 UglifyJS ToolsUglifyJS 提供了一些工具用于分析 JavaScript 代码，包括：
生成抽象语法树使用 UglifyJS 生成抽象语法树很简单： 首先安装 UglifyJS 为 npm 包：
然后使用 parse 方法即可：
这样生成的 ast 即为那一段代码的抽象语法树。那么我们怎么使用呢？ 使用 mangler 压缩代码使用 mangler 可以通过将局部变量都缩短成一个字符来压缩代码。
|
