AST介绍：解析html生成语法树

前言

---

这个名词一直不陌生，但是没有细致了解过，结合自己的项目，记录一下自己对AST的理解。

1. 什么是AST(抽象语法树)？
   抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。
2. AST的作用？
   解释器/编译器进行语法分析的基础
3. AST的使用场景？
   JS：代码压缩、混淆、编译
   CSS：代码兼容多版本
   HTML：Vue中Virtual DOM的实现
4. 如何获取AST?
   uglify、acorn、bablyon、esprima、htmlparser2、postcss
5. 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 =