- 博客(19)
- 收藏
- 关注
RSS订阅原创 Webpack进阶配置
首先多入口打包，必须指定两个入口文件，两个入口路径接着配置出口，出口就是name + 对应 contenthash值。由于多入口，出口肯定也有多个，出口的filename肯定不能够写死另外有关于入口的相关插件也需要根据不同入口配置多个像上面的HtmlWebpackPlugin 作用就是对入口js生成相应的入口html（webpack不会生成，必须装这个插件，否则前端页面写好的都没html入口挂载js文件）
2025-09-21 19:52:39
724
原创 几种微前端框架的沙箱策略
本文分析了主流微前端框架的CSS和JS隔离方案。Qiankun采用Shadow DOM和Scoped CSS实现样式隔离，配合快照沙箱（单例）或代理沙箱（多例）实现JS隔离；EMP依赖Webpack5联邦模块，需自行实现沙箱；Wujie结合WebComponent和iframe实现双重隔离；MicroApp从类似Qiankun的方案演变为借鉴Wujie的iframe方案。传统iframe虽然隔离彻底，但存在通信困难、DOM操作受限、白屏时间长等问题。各方案在隔离性、通信效率和开发体验上各有取舍。
2025-09-18 14:33:04
1106
原创 js 继承的6种实现方式
本文总结了JavaScript中的5种继承实现方式：1.构造函数继承，通过Parent.call()在子类中调用父类构造函数；2.原型链继承，通过Child.prototype=new Parent()实现原型链继承；3.组合继承，结合构造函数和原型链两种方式；4.Object.create方法实现继承；5.寄生组合继承，优化组合继承避免重复调用父类构造函数。最后提到ES6的extends继承语法，其内部实现原理与寄生组合继承类似。各种继承方式各有特点，需根据实际需求选择合适方案。
2025-09-08 18:50:59
153
原创 promise 易错点记录
then .catch 作为链式调用的基础，它们都会默认返回新一个新的promise，这个promise 的任何状态与上一次无关，所以都是pending状态，且默认为resolve的pending，如果再下面跟.catch或者.then 都是被.then, 当然 也可以在.then .catch return 一些东西，如果return的东西，只要他是非promise，那么他都是默认包装成resolve，被.then捕获。同步代码推完之后，再推入resolve('1')的.finally, 和。
2025-08-31 17:38:14
386
原创 揭秘大厂Vue前端技术架构--------letjs
这篇文章介绍了一种基于Vue3的前端工程架构设计。该架构采用分层设计思想，主要包含composition、service、domain三层：composition层负责状态管理和方法抽离，service层处理数据转换和API调用，domain层实现核心业务逻辑。文章通过记事本案例详细说明了各层的职责划分和协作方式，展示了这种架构如何实现UI与逻辑的完全分离，便于团队协作和维护。最后提到该架构已通过开源脚手架letjs实现，可供参考使用。这种工程化方案特别适合需要频繁改版但核心业务稳定的前端项目。
2025-08-28 16:56:26
2216
原创 ts学了不会用？看这篇ts项目实战
本文总结了TypeScript接口和类型的几种实用技巧：1）通过接口规范组件props和参数类型；2）使用类型断言解决不确定类型问题；3）规范DOM对象类型；4）处理第三方库类型限制；5）枚举限定值范围；6）内置工具类型（Record、Readonly等）的快捷应用。这些方法能有效提升代码类型安全性和开发效率，特别是在组件复用、API调用和DOM操作等场景中。
2025-08-24 18:29:13
1067
原创 this 指向小记
那么 this 就指向全局作用域 也就是指向window， 并且全局作用域下还有另外两个属性，分别是self 和 frames 他们也指向window，所以 this = window = self = frames。若使用var 定义变量，那么这个变量会挂载到window 上，所以我们可以使用this.a 获取变量的值，全局作用域为global， 但this并不指向它，没什么用，node在全局下使用this是一个空对象。当我们未在任何额外作用域下使用this，也就是全局下使用this，
2025-08-23 18:35:14
154
原创 正则表达式学习小记
/ 正则匹配：通过 正则.test(需要的字符串) 进行匹配操作最终返回true 或 false。12. 一个字符或集合？匹配这一坨0次或1次，表示可有可无。10. 一个字符或集合+ 表示匹配某个字符一次或者多次。7. \s 匹配空白字符， \S 匹配非空白字符。11. 一个字符或集合* 匹配这一坨0次或多次。6. \d, \D 则是匹配非数字，不做演示。此篇文章记录一下正则表达式的学习笔记。14. 正向预查（必须但不匹配）8. [] 匹配区间范围。15. 位数限制 {}9.[^] 排除范围。
2025-08-22 00:08:13
311
原创 前端必看——Vite为什么这么快？
Vite通过创新性架构解决了传统打包工具速度慢的问题。它将代码分为依赖和源码两部分，依赖部分采用预构建方式处理，利用esbuild工具快速转换为ESM模块；源码部分则基于浏览器原生ESM实现按需加载。这种设计使Vite启动速度比webpack快10-100倍，同时热更新更精准，无需重新编译整个项目。关键突破在于充分利用ESM模块化标准的编译时特性，避免了传统工具运行时分析依赖的耗时操作，从根本上提升了开发体验。
2025-08-21 15:29:13
904
原创 面试分享-简历上写了AI对话的一定要看看这个
文章分享了作者在面试中遇到的一个技术问题：AI对话生成时的打字机效果速度计算。通常这种效果是实时渲染后端返回内容，无需专门控制速度。面试后作者研究发现，可通过记录AI输出开始时间(start)和结束时间，计算总耗时（秒），再除以文字长度得出单字输出时间。这个思路适用于需要统计AI输出速度的特殊需求场景。
2025-07-27 21:34:03
433
原创 千字简述webpack打包原理
Webpack打包原理简析 Webpack的核心原理是通过操作代码字符串实现文件转换和打包。其工作流程可分为：1）模块化分析，利用AST语法树解析文件依赖关系；2）文件整合，将模块转换为闭包函数并建立映射关系；3）实现require/export机制。Loader本质是处理特定文件类型的转换函数，Plugin则是在打包过程特定阶段执行的自定义操作。整个过程通过字符串处理和AST分析，最终输出优化后的bundle文件。
2025-07-24 16:19:39
1674
原创 几句话一张图讲清楚Vue3 keepAlive原理
摘要：keep-alive是Vue用于组件缓存的机制，类似v-show但更高级，可保留组件状态。在表单场景中，v-if和v-show分别对应重新渲染和保留状态的两种处理方式。keep-alive还支持include/exclude参数来选择性缓存组件，以及基于LRU算法的最大缓存数量限制。其核心原理是通过组件name匹配和缓存实例管理来实现高效的状态保持。（149字）
2025-07-14 10:35:41
400
原创 千字详解Vue3 Diff算法
Vue3 diff算法解析：该算法针对同层级多节点更新场景，通过双端指针对比新旧节点差异。核心流程包括：1)通过左右指针快速定位差异位置；2)建立新旧节点映射表处理节点增删；3)利用最长递增子序列优化节点移动。算法特别处理响应式数据驱动的动态列表，通过key映射和递增序列计算最小化DOM操作，而静态模板和单节点更新则无需diff处理。最终实现高效精准的DOM更新，避免不必要的重渲染。
2025-07-13 18:31:03
943
原创 echarts的原理是什么，这几个案例让你一看就懂（并附简单echarts源码）
ECharts原理与Canvas实现案例 ECharts是基于Canvas的图表库，其核心原理是利用Canvas API进行图形绘制。摘要介绍三个Canvas实现案例： 基础绘图：通过moveTo、lineTo等API绘制折线图，演示线条宽度、颜色和渐变效果设置。 手写板实现：利用鼠标事件监听，结合moveTo/lineTo实现平滑手写功能，展示Canvas交互能力。 简易ECharts：实现数据解析、坐标轴绘制等核心功能，包含数据最大值计算、坐标分区间隔处理等基本图表逻辑。 这些案例展示了Canvas作为
2025-07-12 19:42:36
1715
1
原创 千字介绍前端性能指标及相关优化方案
本文介绍了前端性能指标及优化方法。首先列举了浏览器调试工具（如性能选项卡、Lighthouse报告、Web Vital插件）用于分析页面加载情况。重点讲解了关键性能指标：DCL、LCP、CLS、INP、FID、TTFB和FCP，分别对应不同阶段的性能表现。针对这些指标，文章提出了具体优化方案：使用压缩和CDN优化TTFB，预加载和图片优化提升LCP，减少长任务和代码分割改善INP。这些优化手段能有效提升网页加载速度和交互体验。
2025-07-06 17:54:58
749
原创 monorepo简略介绍
简单来说，就是一种特殊的工程管理方案他将一个大应用拆分成多个子应用来管理，比如说，一个购物应用的前端，分为购物车和首页，普通单体目录下，我们可能只放进view目录内来管理，而monorepo工程结构，就要对这两个页面拆分成应用来管理，monorepo工程管理方案，主要是为了解决一个应用耦合问题，如果封装的组件过多过大，那么每个组件之间的联系只会越来越复杂。拆成不同的应用，是一个比较恰当的解决方案。
2025-07-05 18:10:14
411
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人