- 博客(186)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 总篇：iframe沙盒存储隔离：从紧急补丁到企业级防御体系的完整指南
在微前端与第三方组件集成的浪潮下，iframe 沙盒环境中的 SessionStorage 安全问题，正从一个隐秘的“技术细节”演变为可能引发数据泄露、权限逃逸的“阿喀琉斯之踵”。本系列文章，将为你完整呈现我们如何从一次真实攻防演练中发现致命漏洞，到构建一套经过生产验证的三层纵深防御体系的全过程。
2026-04-15 09:19:01
294
原创 一个轻量级 Vue3 轮播组件：支持多视图、滑动距离决定切换数量，核心原理与 Swiper 对比
本文介绍了一个轻量级 Vue3 轮播组件的实现，支持多视图、滑动距离决定切换数量等特性。核心功能包括循环播放、自动播放、拖拽滑动、导航分页等，代码仅400行。文章详细讲解了多视图布局计算、循环模式实现、滑动距离映射等核心原理，并与Swiper进行了功能对比。该组件适合轻量级项目，通过原生TypeScript编写，易于定制和维护。实现过程中解决了分页器点数计算、拖拽与点击区分等常见问题，为开发者提供了轮播组件的深入实现思路。
2026-04-14 09:06:11
15
原创 使用 VueUse 构建一个支持暂停/重置的 CountUp 组件
本文介绍如何利用 VueUse 的 useRafFn 构建一个功能强大的 CountUp 数字滚动组件。相比现有方案，该实现支持暂停、恢复、重置等命令式控制，并能动态调整目标值和动画时长。文章详细解析了核心 Hook useCountUp 的实现原理，包括动画循环控制、缓动函数应用和状态管理，并展示了如何封装为可复用的 Vue 组件。该方案零额外依赖，完全基于 Vue 3 组合式 API 和 TypeScript，适用于需要精细控制数字动画的场景。
2026-04-13 08:24:37
24
原创 前端性能优化实战：从5.2秒到1.9秒的代码级改造全记录
本文记录了一个电商商品详情页的性能优化完整过程。针对首屏加载5.2秒、Lighthouse评分32分的现状，采用分层优化策略：资源层通过智能图片组件实现WebP格式自适应与懒加载，构建层借助Webpack/Vite的manualChunks精细化分割代码，渲染层利用Web Workers将长任务从主线程剥离，网络层实施Service Worker的Stale-While-Revalidate缓存与关键资源预加载。优化后LCP降至1.9秒，Lighthouse提升至89分，跳出率下降28%。文中提供全部可运行
2026-04-11 07:03:28
254
原创 前端性能优化：从“术“到“道“的完整修炼指南
针对前端工程师在性能优化中"背了技巧却不会用"的普遍困境，本文提出"术道结合"的双层学习路径。"术"篇聚焦代码实战，通过一个电商详情页从5.2秒优化到1.9秒的完整案例，提供可直接复用的Vue 3/Vite配置、Web Worker组件和缓存策略；"道"篇升华至方法论层面，建立"网络-资源-渲染-计算"四层优化模型，涵盖从测量、验证到监控的闭环体系，并给出面试话术与避坑指南。两篇文章形成"先动手、后动脑"的认知递进，帮助读者既解决眼前问题，又建立长期可迁移的优化能力。
2026-04-10 07:45:24
250
原创 前端架构演进：基于AST的常量模块自动化迁移实践
前端常量模块自动化迁移实践 本文介绍了一次基于AST的前端常量模块自动化重构实践。针对项目中存在的常量管理混乱问题（如Tree Shaking失效、命名空间冗余等），团队开发了两个自动化迁移脚本： 常量文件转换：将export default对象转换为多个export const语句，保留注释并支持TS语法 业务代码迁移：动态发现常量文件，识别旧的导入模式，自动替换为直接引用并生成具名导入 方案采用Babel工具链实现AST解析与转换，具备完整防御机制（文件备份、白名单验证等）
2026-04-08 13:01:12
257
原创 探索Vite深入 Rollup 分块插件：从零实现一个智能 分包 工具
为了解决这些问题，我们开发了 rollup.plugin.robin-build 插件（纯 JS/TS 版本，下文简称“本插件”）。它提供了一套声明式的分块规则配置，支持路径匹配、引用次数阈值、优先级排序等高级特性，让代码分割变得可预测、可维护。
2026-04-07 13:21:51
23
原创 老大语录三 谈需求变更
• 不要强制定义谁的权利，论述清楚底层逻辑更重要。团队成员有权利知道这些。• 团队只有在一个底层价值观下，才能达到士气上的一致，才不会疲于解释各种现象，安抚各种情绪。• 让感知利害关系的人做决策。且敬畏不同的专业。• 方案要基于人性但不是以此为中心，当人性与客观事实存在矛盾时，需要像现实妥协，但仍然充分考虑人性。需求变更，研发人员最讨厌出现的情形。这个是根本上的反感，即使抛开需求变更带来的计划打乱，可能带来的大家需要加班加点填补变更带来的成本。
2024-03-12 13:11:45
1041
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇四]
在这实现第一个组件space[间距]到这里，第一个间隔组件开发完成啦，很简单，按照自己定义的打包规则去处理自己的组件，所以在规则下，开发组件就像自己的开发页面一样，唯一的就是开发组件要有统一的设计和思考，不然长时间下来很难把控。
2024-03-12 13:10:50
562
原创 老大语录二 谈规划
在这之间就有了取和舍，并且也更专业的满足的客户的需求。Tob 类产品需要明确该功能的使用方是谁，一般在什么情况下会切入到该功能，用户看到该功能时下意识希望该功能输出哪些信息，该功能在交互中的期望反馈是什么。比如常见的审批流程，看是就是简单的审批流，往往底层的工作流引擎是需要沉淀的，很多团队也依靠这些沉淀开发出工单系统和OA系统。产品的定位，不同专业功能的敬畏，以及不明确场景下的减法。以上就是对产品功能规划判断的思考，也许有更好的评判公式，但实际经验中的总结也未免不是一种高效的方式来帮助我们来正确的做事。
2024-03-06 18:45:59
815
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇三]
接上文的全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]，进行详细编写rollup打包脚本
2024-03-06 18:36:19
629
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇一]
我们在使用第三方各种UI库，比如element、ant design等提供的ui组件，发现他们打包万变不离其宗，看似复杂其实也不复杂，只要明白其中的原理，抽丝剥茧，就很简单啦！本文接上文的工程项目，进行接下来的工作。当然一个人还是很难和大厂推出的产品进行对比，但是我们不是为了对比，我们是为了提高自己，让能力更近一步。很多博客上博主也有很多讲解rollup的网站不是对api的详细抄袭就是对api文档的解释，基本上没有实战的教程；纯属个人见解，感觉写的很模糊，没有实战性！
2024-02-28 21:54:57
797
1
原创 老大语录一 谈管理
但建立流程时往往会受到部分人员的特殊甚至是个人诉求，如此叠加形成了复杂冗余的流程，更可怕的是这会以所谓“本企业特色”掩盖了优化的动力。之所以会出现对组织人员的素质会有过高的要求，是因为往往事务进展不顺时会发生在某个个体身上，我们往往会开始纠结于某个人如果有更强的职业素质或者综合能力(这里不讨论专业能力不够的情况下)，事故就不会发生。并且一般事物来讲，人才的贡献边际效应一定是递减的。管理逻辑是根据业务需要组建适合的组织，梳理出主要的业务流程(主业务和支撑业务)，制定合适的管理制度约束组织和流程的行为。
2024-02-28 21:53:30
717
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]
本来不想写用的插件单独列出来介绍的，考虑再三还是写吧，正好好好真正的在加深一次印象吧！
2024-02-27 08:25:37
607
原创 手把手教你pkg将Node.js项目打包为可执行文件
突然接到一个演示的需求，背景是这样的，需要在客户那边部署一个项目，但是这个项目需要的服务器的配置比较高，客户那边也没有好的机器，为了看系统的功能性，数据可以不就有真实性，也能慢走，这个时候我给项目经理说，可以考虑只部署前端，但是接口数据怎么来呢？
2024-02-25 06:15:00
3240
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇]
一个好的工程化项目，必然有一个好的文档管理，这样才算称得上一个好的工程化，也大大提高后面的工作和文档查找的效率！
2024-02-19 17:18:00
1244
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇]
本文从实战出发，初步单间一个为 turbo的基础项目工程项目，本文我估计，是全网唯一一个手把手第一次真正从0到一的完整的教程，纯属个人见解，因为我没有看到像我这么全的！，本文旨意在搭建一个vue3的组件库，后面还有更多的文章信息，我也不知道后面文章什么时候更新，本人很赖！希望搭建鼓励鼓励我！
2024-02-18 20:30:00
2029
原创 手把手教你Termius去除登录并解除限制，非常简单
Termius 8 去除登录并解除限制 多协议远程管理软件 for Mac or for Win
2024-01-30 13:58:02
4727
原创 Module-Federation[微前端]
微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。技术栈无关 主框架不限制接入应用的技术栈，子应用可自主选择技术栈（vue，react，jq，ng等）独立开发/部署 各个团队之间仓库独立，单独部署，互不依赖增量升级 当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性独立运行时 微应用之间运行时互不依赖，有独立的状态管理。
2024-01-04 10:02:13
1114
1
原创 linuxnodejs 20.* 安装问题，version `GLIBCXX_3.4.26‘
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
2024-01-03 10:36:10
1231
原创 ES7 至 ES12 实用的新语法
es2016之后有很多很实用的新特性，其中有很多也已经用上了，本次分享想做一个新特性的汇总，希望能对大家有一定的帮助。以下的特性顺序并不是按照时间顺序来的，为了方便记忆，按照数据类型和语法类型做了归类。每个新特性会按照概念，语法和示例几个方面来介绍。
2023-12-22 13:16:29
1813
翻译 尤大的忏悔：Vue 3 启示录
幸运的是，随着 TypeScript 在大多数项目中的可用性，如今，我们能够在类型级别和运行时级别强制执行它，”他说。“对于Vue来说，首先要适应其不断变化的用户群，并适应行业不断变化的需求，我们必须想出一些东西来解决这些新需求带来的新问题，那就是可扩展性，”他说。“这也导致了像 VueUse 这样非常强大的社区努力，它为我们提供了一系列非常有用的实用程序，解决了许多问题，这些问题[并不]真正适合包含在 Vue 核心中，但社区很好地解决了它，”他说。“如今，类型检查是前端解决方案的赌注，”You说。
2023-12-21 10:27:13
741
原创 OxLint 发布了，Eslint 何去何从？
由于最近的rust在前端领域的崛起，基于rust的前端生态链遭到rust底层重构，最近又爆出`OxLint`，是一款基于Rust的linter工具Oxlint在国外前端圈引起热烈讨论，很多大佬给出了高度评价；你或许不知道`OxLint`，相比`ESLint`大家都陌生，你可以认为他们是一样的功能。
2023-12-15 10:56:01
2597
原创 温故而知新篇一
团队分享之设计模式[认知]写在前面的话单例模式工厂模式策略模式代理模式观察者模式模块模式构造函数模式混合模式总结写在前面的话在面向对象软件设计过程中，针对特定问题的简洁而优雅的解决方案。在不同的编程语言中，对设计模式的实现其实是可能会有区别的。（23种）单例模式是保证一个类只有一个实例，并且提供一个访问它的全局访问点。适用场景需要频繁实例化然后销毁的对象创建对象时耗时过多或者耗资源过多，但又经常用到的对象有状态的工具类对象频繁访问数据库或文件的对象资源共享的情况下，避免
2021-10-19 22:02:58
949
8
原创 Rollup 打包通用项目工程库[非TS]，工程化之路
Rollup 打包通用项目工程库[非TS]，工程化之路很长一短时间没有写博客啦！最近刚好有空写了一下，本文侧重于实践，文案描述不太多，总体实现效果如图效果图1效果图2Rollup 的基础概念就不说的，不知道请点击这里看官网在这里就不废话多说啦，直接上代码，下面就是通用的一些基础配置，我们所有的工具类，组件库等都是通过这一块实现的，形成通用的一些配置，形成工程化的模板！下面我以组件库图表为例子，项目工程结构如下：项目目录├─ packages
2021-09-03 08:26:17
1269
1
原创 husky6.* 使用指南、标准化、效率化
husky6.* 使用指南、标准化、效率化前言husky6的版本更新好久啦，但是一些主流的框架都在使用新版的husky，但是好多都是使用的老版本的husky，新版的很少，文档也少。我们团队中正好，搭建新版的组件库，随便研究了一下husky 6.* 的api,并且应用到项目中，这篇文章记录了我加入的指南，避免各猿(媛)友,踩坑。现代原生git钩子变得容易;Husky 提高了提交质量，并提高了规范化！提交或推送时，可以使用它来整理提交消息，运行测试，整理代码等。赫斯基（Husky）支持所有Git钩子
2021-04-07 07:13:36
1512
1
原创 搭建rollup的组件库,研究和实战
搭建rollup的组件库,研究和实战前言今年慢慢的发现大部分主流的前端框架vue和react都采用rollup来打包，但是好多UI组件库，基本没有用rollup来打包，接下来我就基于rollup搭建一个UI库，来发布组件，并且对rollup的一些实践，并记录下来。rollup 介绍官网上是这样说的Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaS
2021-03-29 09:22:02
834
2
原创 开启nginx 用户登录认证
前言最近在做前端工程化的一些东西，形成一种开发文档和组件化的demo,供前端成功可见，其他的部门或者用户通过密码访问，但是这个认证不想太复杂，想来想去，在nginx上配置把，做个拦截，相对来说，没有任何成本，新人入职，可以有个专门的学习和熟悉的过程，大大提高新人的效率和后面的追踪！安装yum -y install httpd-tools生成密码htpasswd -c pass.db idssfe默认在当前位置下会有一个pass.db的文件，我们可以查看该文件cat pass.db
2021-03-22 09:56:04
1151
原创 基于md的UI组件文档库研究
写在前面的话自过年以来，由于时间的原因，一直没有更新博客，年前规划的事情，一直没有推动，一直想写个基于vue3的禅思UI库，迟迟为动手，各个方面的原因都有吧，一边工作，一边要忙着考试，心有余力而不足啊！前端组件化是我们前端圈子里最流行的一段话，也是我们前端在开发过程中面临的挑战。所以我们面临的问题很多，学习的有限，所以一边的学习，一边的去研究，把已有的消化为自己的，这才是技术人员的成长之道。我为了后面我自己的禅思UI库做准备，所以我根据已有的，慢慢去琢磨，看看别人的思想和设计，来完成属于禅思的组件
2021-03-15 09:59:58
1095
原创 webpack升级5之后编译的问题 Cannot find module ‘webpack-cli/bin/config-yargs‘
webpack升级5之后编译的问题 Cannot find module ‘webpack-cli/bin/config-yargs’遇到问题我们在在github项目的Issues看到Error: Cannot find module ‘webpack-cli/bin/config-yargs’ #1948this is the older folder structure i just created a few days ago:所以我们把 webpack-cli 降级到3*的版本 即可
2021-01-26 14:21:05
1199
原创 定制团队的eslint rules(二)
@[TOC](定制团队的eslint rules(二))前言在上篇文章中定制团队的eslint rules(一)，已经介绍了eslint的各种参数说明，配置等等，对它有个大致的了解，接下来，我如何定义的一个自己的团队规则配置，以cicada-eslint-config为列。项工程搭建目录树我搭建我的一个cicada-eslint-config 的项目工程，具体目录树如下。cicada-eslint-config├─ index.js├─ package.json├─ README.md└
2021-01-04 11:24:30
517
原创 定制团队的eslint rules(一)
定制团队eslint前言ESLint介绍作用配置方式配置参数[主要针对第二种方式]Rules 说明结尾语前言我们都知道，javascript 是一门动态弱类型语言。现在平台、环境等各种因素，很复杂，造成团队之间的风格，各种各样，有时候也会出现不可避免的错误，造成的排查力度大，团队维护难，团队合作差等等。然而ESLint的出现，帮我们团队解决了代码统一，风格统一等的问题，让我们能在编译中发现代码错误的工具，在团队协作中，避免低级 Bug，产出风格统一的代码。从而提高团队的凝集力。对外让人感觉很正规的印象。
2020-12-27 14:01:47
6559
11
原创 我心中的前端工程化
我心中的前端工程化前言前端工程化四化一架前言最近好像流行一句话，“别更新啦！我学不动啦！”,由这句话不难看出，前端技术一直再不断的更新，技术的不断的都能新的目的，就是为了让页面渲染更快，承载的东西更多等等前端工程化“前端工程化”是什么？四化一架“四化一架”是什么？四化一架之开发规范化四化一架之模块化四化一架之组件化四化一架之自动化四化一架之脚手架...
2020-12-10 20:46:40
455
原创 vue-cli 打包之后的各种部署问题集中地
vue-cli 打包之后的各种部署问题集中地，这里总能找到你自己的方式。前端越来越多的人再使用vue,现在也越来越多的前后端的解耦，所以在这个时代种，前端的人员对于的自己的项目部署，要有充分的知道，也知道的一些各种配置和部署，以应对后面的变化，以下的部署方式都是自己通过实现的一些整理方式。第一种分离式部署部署到nginx上在nginx 上部署项目是前端比较常见的，也是比较大众的，市面上大部分都在这上面部署的！下面让我们看下如何在nginx 上配置。部署在根目录下面，比如你访问的是htpp:/
2020-12-02 13:37:54
1260
原创 在前端里，谁的位置不可少！怎么提高中标率？
在前端里，谁的位置不可少！怎么提高中标率？前言最近一直在公司的事情，因为我们组的2个人请的长期假期，造成前端的资源一度紧张，又是临近年终，公司各个产线忙各种招标的事情，而招标的事情是要开发一个针对招标需求的一个系统，说白拉就是开发一个不需要后端的支持的一个前端系统，包括数据尽量真实，前端业务尽量完美！哎，压力山大…,默默吐糟产品经理…其实在我没来这家公司之前，我都会遇到一个场景，就是项目经理，总是追着前端问，开发的怎么样拉？今天做多少拉？能看吗？等等…，项目经理的各种炮弹，轰炸而来！这时，作为前
2020-11-23 19:56:17
480
原创 vuepress 热更新失效研究
vuepress 热更新失效研究问题开发时修改/docs目录下的.md文件后触发热更新本文提供2中方案修改第一种 安装依赖 watchpack$ npm install -D watchpack这种方法 不能更新config 的一些配置，如果修改拉，必须重新运行第二种 修改package.js 种的命令官网上是这样的$ "dev": "vuepress dev docs"改为这样的$ "dev": "vuepress dev docs --temp .temp"这种方法是通
2020-11-02 20:32:44
4676
10
原创 前端工程化研究之npm私服
前端工程化研究之npm私服前言由于公司内部项目开发，处于隐私保护的需要，不想将自己封的包推到npm社区，，但又急需要一套完整的包管理工具来管理越来越多的组件，模块，项目；还有经常下载一些npm包，有时候下载不下来，有时候下载，下来运行报错，各种坑，还有内部git 环境ci/cd 自动部署耗时过程，就把公司使用频繁的一些包弄到内部环境，有内部环境下载，会更快，也不会出现下载不下来的情况！经过多次调研，npm有各种各样的私服方式，因为我们对这一块看的也不是很重要，也没有必要花太多时间在这上面，就用一个简单
2020-09-09 18:23:53
3422
2
原创 前端工程化研究之数据mock化
前端工程化研究之数据mock化相信大家都知道，前后端分离最的好处就是各司其职，效率更高。我们都知道，在早些年，也就是”三剑客“时代，往往等待后端开发完成之后，前端才能完全介入开发工作，有冲淡测试数据的角色。前端的眼里越来越大，往往项目的延期，推到前端的角色上，大部分的项目开发，往往都是前期很轻松，等到快上测试的时候，就是各种加班，更有甚者通宵，这又是谁的过呢？前端、后端？各种责任的推卸。开发的周期后端和前端不是同步进行的，造成开发的周期扩大，成本的增加；前后端的分离开发，按照规范执行，事半功倍，效率、成本
2020-09-07 16:07:05
2373
2
原创 前端工程化研究
前端工程化研究前言随着互联网的迅速发展，这几年进化速度之快让人咂舌，很多前端工程师都不禁吐槽“学不动了”。如今前端可谓包罗万象，产品形态五花八门，涉猎极广，各种各样的框架和库，随着web业务日益复杂化和多元化，UI的要求变高，从WebPage模式为主转变为WebApp模式，也从有混合模式开发到分离式开发的转变，对前端工程师的能力越来越来高，能力和层次已经不是 HTML、CSS、JS 前端三剑客仗剑那个时代了，我记得在15年的时候我在上海，当时JS 框架以 jQuery 为主，less 基本都不用，而我
2020-08-25 17:51:11
2421
6
Ref Effect baseHandler reactive Proxy Vue 3
2024-01-04
websocket封装使用心跳检测+断线重连
2020-01-16
mvvm双向绑定原理和实现
2020-03-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人