diff --git "a/docs/\343\200\212AST\343\200\213\347\254\224\350\256\260/01.\345\210\235\350\257\206 AST.md" "b/docs/\343\200\212AST\343\200\213\347\254\224\350\256\260/01.\345\210\235\350\257\206 AST.md" index 4443d182..37980189 100644 --- "a/docs/\343\200\212AST\343\200\213\347\254\224\350\256\260/01.\345\210\235\350\257\206 AST.md" +++ "b/docs/\343\200\212AST\343\200\213\347\254\224\350\256\260/01.\345\210\235\350\257\206 AST.md" @@ -49,19 +49,19 @@ CSS 的解析通常会生成样式表对象模型(CSSOM),它类似于 DOM [词法分析工具](https://resources.jointjs.com/demos/rappid/apps/Ast/index.html) [词法分析工具](https://esprima.org/demo/parse.html#) -词法分析阶段是编译过程的第一个阶段,这个阶段的任务是从左到右一个字符一个字符地读入源程序,然后根据构词规则识别单词,生成 token 符号流,比如 isPanda(''),会被拆分成 isPanda,(,'',) 四部分,每部分都有不同的含义,可以将词法分析过程想象为不同类型标记的列表或数组。 +词法分析阶段是编译过程的第一个阶段,这个阶段的任务是从左到右一个字符一个字符地读入源程序,然后根据构词规则识别单词,生成 token 符号流,比如 isPanda('🐼'),会被拆分成 isPanda,(,'🐼',) 四部分,每部分都有不同的含义,可以将词法分析过程想象为不同类型标记的列表或数组。 ![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/2501174-20220427101354716-611471191.6pxjv3v3ab00.gif) ### 语法分析 [语法分析工具](https://astexplorer.net/) -语法分析是编译过程的一个逻辑阶段,语法分析的任务是在词法分析的基础上将单词序列组合成各类语法短语,比如“程序”,“语句”,“表达式”等,前面的例子中,isPanda('') 就会被分析为一条表达语句 ExpressionStatement,isPanda() 就会被分析成一个函数表达式 CallExpression,就会被分析成一个变量 Literal 等,众多语法之间的依赖、嵌套关系,就构成了一个树状结构,即 AST 语法树。 +语法分析是编译过程的一个逻辑阶段,语法分析的任务是在词法分析的基础上将单词序列组合成各类语法短语,比如“程序”,“语句”,“表达式”等,前面的例子中,isPanda('🐼') 就会被分析为一条表达语句 ExpressionStatement,isPanda() 就会被分析成一个函数表达式 CallExpression,就会被分析成一个变量 Literal 等,众多语法之间的依赖、嵌套关系,就构成了一个树状结构,即 AST 语法树。 ![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/2501174-20220427101415313-1435211089.10wlanw3xt5s.gif) ### 代码生成 -代码生成是最后一步,将 AST 语法树转换成可执行代码即可,在转换之前,我们可以直接操作语法树,进行增删改查等操作,例如,我们可以确定变量的声明位置、更改变量的值、删除某些节点等,我们将语句 isPanda('') 修改为一个布尔类型的 Literal:true,语法树就有如下变化: +代码生成是最后一步,将 AST 语法树转换成可执行代码即可,在转换之前,我们可以直接操作语法树,进行增删改查等操作,例如,我们可以确定变量的声明位置、更改变量的值、删除某些节点等,我们将语句 isPanda('🐼') 修改为一个布尔类型的 Literal:true,语法树就有如下变化: ![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/2501174-20220427101416281-1772382765.72g0vvptagw0.gif) ## Babel 相关