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树，针对特定条件进行转换，yy新版直冲源码既解决了字符串匹配问题，又避免了与全局变量冲突的风险。优化代码逻辑，确保在不同场景下都能正确处理。

       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 文件中引入模块或资源时，可以使用简化路径，九九团购源码例如：

       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 是表示代码结构的特殊对象结构，允许对代码进行解析、大联盟完整源码修改和转换。以 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代码。

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

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