张志成博客

抽象语法树 AST在计算机科学中，抽象语法树（AbstractSyntaxTree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。比如，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现；而类似于 i... 阅读全文…

从输入 npm install 后 项目下有 package.json，输入npm i,查询 node_modules 是否存在，不存在新增，存在在此下安装模块。 根据 package.json 的依赖模块，查询 node_modules 目录之中是否已经存在指定模块，若存在，不再重新安装，若不存在， npm 向 registry 查询模块压缩包的网址，下载压缩包，存放在本地的缓存目录里，... 阅读全文…

Plugin由于 loader 作用范围是很明显的，所以就有了它的边界，那么超出这个边界的事情我们就可以使用 Plugin 去实现，这样 webpack 就可以适用用各种各样的场景，如 loader 很困难直接对多种规则的内容进行最后的整合然后输出，而且 loader 之间有顺序规则之类，如果规则与规则之间有关联且要按某种顺序进行执行，那么就很难实现，而这是使用 Plugin 实现是最好的。... 阅读全文…

前言webpack5 出了 federated-modules，对于对微前端有需求的项目来说，无疑是一个好消息，因为它解决跨应用之间的共享模块。而这也是微前端的核心功能之一。 github 例子federated-modules 资料 而这个功能还在试行阶段，在这之前一般都是使用 externals 解决这种跨应用问题，当然 externals 不止这些作用，还可以优化编译速度。 exter... 阅读全文…

前言搭建组件开发库，往往要有很多打包工具知识，从中选择符合当前需求的，如要有 webpack、rollup、gulp、单元测试、eslint、typescript 等等知识，如果想搭建一个理想好用的，还要会使用 node 写命令或脚手架。 但阿里的前端工具生态已经有很好用工具可开箱即可，免去入门门槛，dumi。 详细文档请移步 github 查看，里面有个例子项目 2020/4/4 清明-全... 阅读全文…

职责链的定义使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。 在以下场景中可以考虑使用责任链模式 一个系统的审批需要多个对象才能完成处理的情况下，例如报销系统等。 代码中存在多个 if-else 语句的情况下，此时可以考虑使用责任链模式来对代码进行重构。 代码例子1234567891011121... 阅读全文…

chrome 插件-使用 vue 实现为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片 避免跨域（img 天然支持跨域） 利用空白 gif 或 1x1 px 的 img 是互联网广告或网站监测方面常用的手段，简单、安全、相比 PNG/JPG 体积小，1px 透明图，对网页内容的影响几乎没有影响，这种请求用在很多地方，比如浏览、点击、热点、心跳、ID 颁发等等， ... 阅读全文…

请求转发到本地文件身为一名前端，当为了调试某些情况下请求的返回参数需要人为改动来调试时，可以使用 AutoResponder如: 本地转发 配置规则为 123regex:https://... 阅读全文…

前言工厂模式的目的是为了创建对象，它通常在类或者类的静态方法中实现，具有以下目标： 当创建相似对象时执行重复操作当编译时不知道具体类型的情况下，为工厂客户提供一个创建对象的接口与创建型模式类似，工厂模式创建对象（视为工厂里的产品）时无需指定创建对象的具体类。 工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创... 阅读全文…

策略模式定义：定义一系列算法，把他们各自封装成策略类，然后把不变的部分和变化的部分分离开来，其中包括策略类和环境类(Context)。 这里的算法可以理解为用于处理逻辑的方法。 使用 经典例子: 1234567891011121314const strategies = { "Q2":(s)=> s*2, "Q3":(s)... 阅读全文…