1.用JS解释JS！树的树详解AST及其应用
2.js 代码/#*__PURE__*/ 是源码什么意思？
3.这样入门 js 抽象语法树(AST)，从此我来到了一个新世界
4.虫虫教你用Rough.js手绘一棵圣诞树
5.AST详解与运用

用JS解释JS！详解AST及其应用

       理解AST及其应用

       AST，源码即抽象语法树，树的树是源码反应指标源码编程语言解析过程中的重要组成部分。它通过树状结构表示源代码的树的树语法结构，为后续代码分析和处理提供便利。源码在开发过程中，树的树AST及其相关工具如Babel、源码ESLint等，树的树广泛应用于代码优化、源码代码生成、树的树代码理解与分析等多个环节。源码

       理解AST，树的树首先要明白其工作流程。它从源代码开始，通过解析器将其转换为AST树，这一过程可以借助工具如astexplorer.net进行可视化预览。在AST树中，源代码的结构以节点形式展现，为后续操作提供了基础。

       以代码压缩为例，通过使用AST进行操作，可以避免暴力转换带来的潜在问题。通过定义Identifier visitor遍历AST树，针对特定条件进行转换，kindeditor源码既解决了字符串匹配问题，又避免了与全局变量冲突的风险。优化代码逻辑，确保在不同场景下都能正确处理。

       AST的核心在于其API的使用。通过@babel/parser将源代码转为AST，@babel/traverse进行遍历和修改，@babel/generator生成修改后的代码，@babel/types用于创建和判断AST节点。这些API协同工作，为代码的解析、转换与生成提供了强大支持。

       在自定义规则上，AST也展现出其灵活性。ESLint等工具通过理解和操作AST，实现了对代码的静态分析和错误检测，提升了代码质量和开发效率。

       针对JSX语法的理解，同样依赖于AST。JSX作为JavaScript的扩展语法，通过将其转换为JavaScript代码，可以在不同环境（如Web端和小程序端）进行组件化开发，实现了跨平台的交互式UI构建。

       总结AST应用，从代码优化、静态分析到跨平台开发，死机源码AST及其相关工具在现代软件开发中扮演着不可或缺的角色。理解AST的核心原理，不仅可以提升代码处理效率，还能在实际项目中灵活运用，解决各种复杂问题。

js 代码/#*__PURE__*/ 是什么意思？

       纯函数的意思，也就是webpack压缩（tree-shaking摇树）的时候，如果看到/*#__PURE__*/这个标志，说明他是纯函数，如果没有调用它，会直接把它删除了，减少代码体积

这样入门 js 抽象语法树(AST)，从此我来到了一个新世界

       在搭建一个开源项目环境的过程中，我遇到了使用 TypeScript 自带编译器 tsc 打包 ES 模块的挑战。尽管 Rollup 似乎是一个更好的选择，但出于某些原因，我选择了 tsc。在使用 tsc 过程中，我遇到了三个基本的问题：简化引用路径问题、静态资源未打包问题以及引入样式文件后缀名问题。接下来，我将对这三个问题的解决方法进行阐述。

       ### 简化引用路径问题

       在 tsconfig.json 文件中配置了简化引用路径，例如，对于以下目录结构：

       src/

       ├── index.tsx

       ├── util/

       ├── assets/

       配置如下：

       "paths": {

        "util": ["./util", "./util/*"],

        "assets": ["./assets", "./assets/*"]

       }

       在 index.tsx 文件中引入模块或资源时，可以使用简化路径，tair 源码例如：

       import { functionFromUtil } from "util";

       import image from "assets/image.png";

       期望编译后简化路径为相对路径，实际编译结果未达到预期。在查阅官方文档后，未发现相关配置项。幸运的是，找到了名为 `tscpaths` 的插件，通过在命令行执行如下命令：

       tsc --plugin tscpaths

       插件会在编译后的 .js 文件中遍历并替换简化路径为相对路径，解决了简化引用路径问题。

       ### 静态资源未打包问题

       在 index.tsx 文件中引入静态资源时，资源文件夹未出现在打包后的目录中。这是 tsc 作为 TypeScript 编译器的正常行为。解决方法是使用 `copyfiles` 命令行工具，执行命令：

       postbuild: "copyfiles assets/**/* dist"

       在 npm scripts 下的 `build` 命令中，将资源文件夹复制到打包后的目录下。

       ### 引入样式文件后缀名问题

       在引入样式文件时，发现 tsc 编译结果保留了 `.scss` 后缀，作为提供给其他开发者使用的包，应使用 `.css` 格式。搜索解决方案时，找到了名为 `jscodeshift` 的工具，它能够基于 AST（抽象语法树）进行字符串替换，解决了后缀名问题。

       ### 引入抽象语法树（AST）

       在处理上述问题时，抽象语法树（AST）的概念逐渐显现。AST 是表示代码结构的特殊对象结构，允许对代码进行解析、delaunay源码修改和转换。以 ESLint 为例，它通过解析代码生成 AST，对代码进行修复或优化。

       为了更直观地理解 AST，可以参考以下概念示例：

       const value = 1;

       AST 表示为：

       `{ type: "Program", body: [ { type: "VariableDeclaration", kind: "const", declarations: [ { type: "VariableDeclarator", id: { type: "Identifier", name: "value" }, init: { type: "NumericLiteral", value: "1" } }] }] }`

       通过修改 AST 中的节点，可以实现对代码的修改，例如将 `value` 的值更改为 `2`。

       在解决实际问题时，我遇到了后缀名问题。起初尝试使用全局正则替换，但考虑到可能影响到开发者自定义的代码逻辑，我转而使用 AST 进行精准替换，避免了代码逻辑的误修改。

       ### 实战解析：tsccss 工具

       为了演示如何使用 AST 解决引入样式文件后缀名问题，我创建了一个命令行工具 `tsccss`。通过 `commander` 框架简化命令行接口，实现自动读取 `dist` 目录下的所有 JS 文件，并将所有样式文件的引入后缀名从 `.scss` 替换为 `.css`。工具通过读取文件、解析为 AST、修改 AST 节点、将修改后的代码写回文件，完成替换任务。

       通过 `tsccss` 工具的使用，展示了如何结合 AST 和现代 JavaScript 工具解决实际问题，为开发者提供了更灵活的代码转换和优化手段。

       通过这些实践，我深刻理解了 AST 的强大功能及其在代码转换和优化中的应用。AST 的引入使得代码的处理更加直观和精确，无论是在工具开发还是在日常编程中，都能极大地提高代码的可维护性和扩展性。在处理复杂问题时，AST 提供了一种全新的视角，使解决问题的方式更加多样化和高效。

虫虫教你用Rough.js手绘一棵圣诞树

       用代码绘图对开发者来说是一项基本技能，但如何绘制出具有手绘风格的图画？今天，虫虫将介绍使用Rough.js来生成具有粗略外观和手绘风格的图形。Rough.js是一个开源迷你图形库，体积小巧（压缩后小于9kB），能够以类似手绘的风格绘制图形。库支持绘制直线、曲线、圆弧、多边形、圆形和椭圆形等基本图形，甚至通过SVG Path格式实现更加复杂的设计。

       要开始使用Rough.js，只需通过npm一键安装，然后在JavaScript页面中导入并使用。

       使用Rough.js绘制图形非常简单。比如绘制一个长方形，只需指定左顶点坐标以及高、宽即可。同样，也可以使用SVG格式来绘制图形。

       直线和椭圆的绘制同样遵循基本形状的规则，通过指定参数即可完成。Rough.js提供了丰富的填充选项，如hachure、solid、zigzag、cross-hatch、dots、sunburst、dashed和zigzag-line，每种风格都有其独特的视觉效果。

       除了基本的图形绘制，Rough.js还支持SVG Path语法，这使得它可以绘制出任意复杂的形状。SVG是一种用于表示2D矢量图形的标准格式，支持丰富的绘图元素。

       为了实践Rough.js的用法，我们可以做一个圣诞树的综合练习。首先引入库并创建一个*的canvas，然后编写相应的JavaScript代码来绘制圣诞树。将此代码保存为christmas.htm，并在浏览器中打开，即可看到生成的圣诞树。

       Rough.js以其小体积和强大的功能，为开发者提供了无限的创意可能性。它不仅能够用来绘制基本的图形，还能应用于交互式设计、数据可视化、游戏开发等领域，如最小生成树可视化、迷宫生成、标志设计等。

AST详解与运用

       了解AST之前,我们先来简单陈述一下JavaScript引擎的工作原理:从上图中我们可以看到,JavaScript引擎做的第一件事情就是把JavaScript代码编译成抽象语法树,于是就有了本文对AST抽象语法树的浅析.

       我们都知道,在传统的编译语言的流程中,程序的一段源代码在执行之前会经历三个步骤,统称为"编译":抽象语法树（abstract syntax code，AST）是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，之所以说是抽象的，是因为抽象表示把js代码进行了结构化的转化，转化为一种数据结构。这种数据结构其实就是一个大的json对象，json我们都熟悉，他就像一颗枝繁叶茂的树。有树根，有树干，有树枝，有树叶，无论多小多大，都是一棵完整的树。

       简单理解,就是把我们写的代码按照一定的规则转换成一种树形结构。

       AST的作用不仅仅是用来在JavaScript引擎的编译上，我们在实际的开发过程中也是经常使用的，比如我们常用的babel插件将 ES6转化成ES5、使用 UglifyJS来压缩代码 、css预处理器、开发WebPack插件、Vue-cli前端自动化工具等等，这些底层原理都是基于AST来实现的，AST能力十分强大， 能够帮助开发者理解JavaScript这门语言的精髓。

       我们先来看一组简单的AST树状结构:

       经过转化,输出如下AST树状结构:

       我们可以看到，一个标准的AST结构可以理解为一个json对象，那我们就可以通过一些方法去解析和操作它，这里我们先提供一个在线检测工具,大家可以自行去体验: esprima.org/demo/parse...

       AST编译流程图:

       我们可以看到,AST工具会源代码经过四个阶段的转换：

       词法分析scanner

       parser生成AST树

       traverse对AST树遍历,进行增删改查

       generator将更新后的AST转化成代码

       Babel插件就是作用于抽象语法树。

       Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。

       vue中AST主要运用在模板编译过程.

       vue中的模板编译主要分为三个步骤:

       解析器要实现的功能就是将模板解析成AST，我们这里主要来分析一下代码解析阶段，这里主要运用的是parse()这个函数,事实上,解析器内部也分为好几个解析器,比如HTML解析器、文本解析器以及过滤解析器，其中最主要的就是HTML解析器。HTML解析器的作用就是解析HTML，它在解析HTML的过程中会不断触发各种钩子函数，我们来看看代码实现：

       举个例子:

       当上面这个模板被HTML解析器解析时,所触发的钩子函数依次是:start、chars、end。

       所以HTML解析器在实现上是一个函数，它有两个参数----模板和选项，我们的模板是一小段一小段去截取与解析的，所以需要不断循环截取，我们来看看vue内部实现原理：

       以上就是vue解析器生成AST语法树的主流程了，代码细节的地方还需要自己去解读源码，源码位置:\vue\packages\weex-template-compiler\build.js

       AST抽象语法树的知识点作为JavaScript中(任何编程语言中都有ast这个概念,这里就不过多赘述)相对基础的，也是最不可忽略的知识，带给我们的启发是无限可能的，它就像一把螺丝刀，能够拆解javascript这台庞大的机器，让我们能够看到一些本质的东西，同时也能通过它批量构建任何javascript代码。

       小时候梦想改变世界，如今我们可以用自己写的程序，构建出我们所生活的网络世界，丰富多姿。

       借用一句歌词: 我还是从前那个少年，没有一丝丝改变。时间只不过是考验，种在心中信念丝毫未减 。希望大家能够在软件开发的路途上坚定信念，越走越远.....