- 博客(26)
- 收藏
- 关注
RSS订阅原创 Monorepo 是什么？如何使用并写自己的第三方库
Monorepo（单仓库）指的是把多个项目/包放在一个代码仓库里统一管理。/repo-root/packages/ui-lib/utils/apps/web-app内部库能直接共享，不必每次发 npm。统一依赖、构建、测试流程。本地修改库源码，应用能立刻生效。Monorepo 我应该放到工程化中实在是懒得建专栏，但是它很常用并且可以让多项目、多包的管理更高效。虽然简单但是大家还是得知道这个东西并能用。
2025-09-06 23:27:22
397
原创 Web Worker 从原理到实战 —— 把耗时工作搬到后台线程，避免页面卡顿
Web Worker 是浏览器提供的原生多线程能力。它的价值在于把重计算/大量 IO移到后台线程，让主线程专注渲染与交互。正确使用 Worker，可以让应用在大数据处理、IM 消息缓存、复杂计算中依然保持流畅。
2025-09-06 23:09:42
987
原创 Pinia 两种写法全解析：Options Store vs Setup Store（含实践与场景对比）
/ 1) state：必须是函数，返回对象；可被 DevTools 追踪、可序列化count: 0,}),// 2) getters：类似计算属性，支持缓存与依赖追踪getters: {`Hi,${// 1) state：必须是函数，返回对象；可被 DevTools 追踪、可序列化 state :() =>({name : string } }) , // 2) getters：类似计算属性，支持缓存与依赖追踪 getters : {
2025-09-05 22:29:40
1846
原创 手写React状态hook
useState：存储值，返回。useReducer：存储值 + reducer 逻辑，返回。关系useStateuseReducer的简化版。什么时候用哪个？逻辑简单（计数器、表单输入） → 用useState逻辑复杂（多个状态、复杂操作） → 用useReducer通过手写，我们发现 React Hook 并没有什么黑魔法：它只是按照调用顺序存储状态，并在更新时触发重新渲染。理解了原理，再写业务代码时就更清晰：为什么 Hook 不能写在 if/for 里？为什么每次渲染必须顺序一致？
2025-09-05 22:15:43
780
1
原创 实现 TypeScript 内置工具类型（源码解析与实现）
目标读者：已经熟悉 TypeScript 基础语法、泛型、条件类型的同学。本文按常见工具类型的分类与顺序实现并解释PartialRequiredReadonlyPickOmitRecordExcludeExtractReturnTypeParameters。
2025-09-03 22:33:57
797
原创 TypeScript 内置工具类型大全（ReturnType、Omit、Pick 等）
TypeScript 提供了一些内置的泛型类型，用来简化常见的类型操作，我们称之为工具类型（Utility Types）。它们大多数基于条件类型infer和映射类型实现，可以帮助我们减少样板代码，让类型定义更灵活。工具类型大幅减少了重复类型定义，让代码更简洁。修饰：Partial、Required、Readonly挑选：Pick、Omit、Record函数：ReturnType、Parameters 等建议结合业务场景学习，比如API 类型推导组件 Props 约束权限映射表。
2025-09-03 22:27:32
1002
原创 TypeScript `infer` 关键字详解（从概念到实战）
infer是 TypeScript 在条件类型中的关键字。在类型推导过程中，声明一个待推断的类型变量。infer就是“让 TS 在这里自动推断类型，并把它存下来”。L : never;// 3// neverinfer必须出现在条件类型中。临时声明一个类型变量，捕获 TS 推断出来的类型。常见应用场景：提取函数参数/返回值、解包 Promise、数组元素类型。掌握infer后，你能看懂并写出更多高级工具类型，是进阶 TS 的必经之路。
2025-09-03 22:19:19
780
原创 TypeScript 泛型入门（新手友好、完整详解）
泛型让你的代码既通用又类型安全，是编写可复用工具与组件的核心。推荐掌握：泛型约束（extends）、keyof、条件类型（下一步，可学infer）、以及常见内置工具类型（
2025-09-03 22:07:18
950
原创 设计模式-代理模式
意图：为其他对象提供一种代理以控制对这个对象的访问。核心角色Subject：抽象主题（接口/抽象类）。：真实主题（被代理者）。Proxy：代理对象，持有的引用，负责访问控制/增强。
2025-09-03 21:53:54
658
原创 设计模式-工厂模式
工厂设计模式解耦对象创建，让代码更优雅。文章比较了直接使用 new 的痛点（强耦合、难以扩展）与工厂模式的优势（解耦、封装逻辑、统一接口）。通过JS代码示例展示了简单工厂模式（基础实现）和工厂方法模式（扩展性更好）的具体实现，包括产品基类、具体产品、工厂类和注册机制。特别演示了如何通过工厂方法模式动态扩展新图表类型而无需修改现有代码，体现了开闭原则。工厂模式将对象创建逻辑集中管理，使客户端代码不再依赖具体类，提升系统的可维护性和扩展性。
2025-08-21 23:15:06
711
原创 告别痛苦的主题切换！用一个插件解决 Tailwind CSS 多主题开发的所有烦恼
摘要：使用 tailwind-theme-variants 插件简化多主题开发 本文分析了原生 CSS 变量 + Tailwind CSS 实现多主题方案存在的三大痛点：IDE 无法预览颜色、CSS 变量定义冗长难读、开发流程繁琐。作者开发的 tailwind-theme-variants 插件提供了更优雅的解决方案，支持： 直接使用十六进制颜色值配置主题 自动生成语义化的 CSS 变量和类名 内置颜色格式转换功能 提供完整的 TypeScript 类型支持 相比原生方案，该插件显著提升了开发体验和效率，使
2025-08-21 22:56:13
1944
原创 设计模式-策略模式
策略模式是一种优雅的设计模式，通过封装不同算法使其可互换，避免冗长的条件判断。文章展示了如何用策略模式重构折扣计算逻辑，将每种折扣封装为独立策略类（如学生折扣、VIP折扣），并通过上下文类统一调用。示例包含TypeScript实现和结合工厂模式的优化方案，还演示了在React Hooks中应用策略模式进行表单验证。这种模式提升了代码可维护性，符合开闭原则，便于扩展新策略而无需修改现有代码。
2025-08-20 22:01:55
997
原创 移动端视口终极解决方案：使用 Visual Viewport封装一个优雅的 React Hook
移动端视口高度问题一直困扰着开发者，特别是iOS Safari和三星手机的导航遮挡问题。本文深入分析了移动端视口的复杂性，包括动态工具栏、虚拟键盘影响和浏览器差异等。通过Visual Viewport API提供的解决方案，结合React Hook实现了一个智能高度检测方案，能够准确判断键盘状态并同步更新CSS变量。该方案采用分层策略，优先使用Visual Viewport API，降级兼容传统事件监听，并设计了150px阈值来准确判断键盘状态，为全屏模态框等场景提供了可靠支持。
2025-08-20 21:55:01
898
原创 设计模式-单例模式
单例模式是一种创建型设计模式，确保类只有一个实例，并提供全局访问点。其核心特征包括全局唯一性、延迟实例化和全局访问。常见实现方式有饿汉式（类加载时创建）、懒汉式（首次使用时创建）和双重检查锁定（线程安全）。前端业务中常用于用户信息管理、全局配置、事件总线和缓存管理。在SSM框架中，Spring默认单例Bean、MyBatis的SqlSessionFactory和数据库连接池也采用此模式。单例模式的优点包括节省内存、统一访问入口和状态共享，但需注意线程安全和过度使用可能带来的问题。
2025-08-19 21:44:35
358
原创 H5移动端适配：那些年踩过的坑和解决方案
移动端开发常见兼容性问题及解决方案：1）100vh不等于真实屏幕高度，建议使用100%替代；2）软键盘顶起底部导航，可用visualViewport API动态调整；3）刘海屏适配建议使用safe-area-inset计算安全区域；4）1px边框粗糙问题可通过伪元素缩放解决；5）点击延迟推荐使用touch-action或FastClick库；6）iOS橡皮筋效果可用overscroll-behavior控制；7）底部遮挡检测可通过Intersection Observer实现。移动端适配需考虑多设备差异和持
2025-08-19 21:23:11
695
原创 为什么Vite开发模式比Webpack快？深入原理剖析
Vite通过创新性地利用浏览器原生ES模块特性，实现了与Webpack完全不同的构建模式。其核心优势在于：1) 即时启动服务器，无需等待完整打包；2) 按需编译当前请求文件，而非全量构建；3) 预构建node_modules依赖并缓存优化。关键技术包括原生ESM动态导入、智能中间件设计、esbuild预构建和精准文件监听。相比Webpack的传统打包模式，Vite大幅提升了开发体验，启动时间从几十秒缩短到毫秒级，为前端开发开启了新纪元。
2025-08-10 22:34:59
540
原创 webpack中魔法注释使用和原理解析
Webpack魔法注释是一种特殊的注释语法，可在代码中嵌入Webpack编译指令。它们不会出现在最终代码中，但能影响打包行为，具有"魔法"特性。核心功能包括：通过webpackChunkName命名chunk、webpackMode控制加载模式、webpackPrefetch/Preload优化资源加载优先级等。实际应用场景涵盖路由懒加载、组件库按需加载和多语言包动态加载。最佳实践建议合理命名chunk、选择性使用Prefetch/Preload，并注意与Tree Shaking的配合。
2025-08-10 22:20:42
881
原创 LRU算法在前端性能优化中的实践艺术（缓存请求函数为例）
本文探讨了Vue的keep-alive组件中LRU算法的精妙设计，并展示了如何将LRU应用于接口缓存优化。通过分析Vue源码，揭示了LRU通过维护访问顺序来淘汰最久未使用项的机制。在接口缓存实践中，作者实现了LRUCache类，结合时效性控制形成双重保护，并采用哈希算法生成短key。最后提出该方案的扩展方向，强调这种有限资源最优分配的架构思想可推广到多种资源管理场景。全文展示了从框架设计到实际应用的LRU算法完整实践路径。
2025-08-08 22:11:54
277
原创 从侵入式改造到声明式魔法注释的演进之路
本文提出了一种创新的请求缓存解决方案，通过魔法注释+Vite插件实现零代码入侵的请求缓存。相比传统高阶函数方案，该方案解决了代码结构性破坏、可读性下降和维护困难三大痛点。技术实现借鉴了Webpack魔法注释和装饰器设计模式，在编译时通过正则匹配自动转换函数声明，智能添加缓存逻辑和依赖导入。文章详细解析了核心转换原理，并提供了完整的Vite插件实现代码，支持带超时配置和不带超时配置两种注释模式，同时处理了Vue文件和普通JS/TS文件的导入位置逻辑。该方案实现了声明式配置、渐进式迁移和零业务代码入侵的目标。
2025-08-08 21:59:04
361
原创 前端性能优化实践：使用Gzip压缩大幅提升大数据量传输效率
针对大数据量传输导致的性能瓶颈问题，文章提出采用Gzip压缩技术方案。通过前后端协作改造，后端对数据进行压缩和缓存，前端添加解压处理，使传输时间从分钟级降至秒级，效率提升数十倍。该方案适用于需返回大量文本数据且变化不频繁的场景，能显著节省带宽并提升用户体验，实现简单但效果突出。
2025-08-07 22:22:39
406
原创 从请求缓存函数深入理解JavaScript闭包
本文介绍了如何利用JavaScript闭包特性实现请求缓存函数，解决前端开发中的重复请求问题。通过createMemoReq工厂函数创建缓存实例，该实现利用闭包保持缓存状态，并使用Map存储请求。文章展示了使用前后对比示例，并指出未来优化方向如添加缓存限制、实现LRU策略等。最后预告将分享如何通过Babel插件用装饰器语法更优雅地实现请求缓存功能。该方案有效解决了组件层级传参的复杂性，同时保证了代码的可维护性。
2025-08-07 22:01:27
422
原创 为什么Vue3使用Reflect而不是直接操作对象？
Vue3响应式系统中使用Reflect的关键原因包括：保持正确的this绑定（确保Proxy作为上下文）、提供统一的操作返回值（所有方法返回布尔值）、更好的错误处理方式，以及与Proxy陷阱的完美对应。通过Reflect.get等方法传递receiver参数，解决了继承关系和getter/setter中的上下文问题。相比直接操作对象，Reflect使响应式系统更健壮，特别是在处理复杂场景时能确保正确的依赖收集和触发。这种设计选择是Vue3响应式实现的重要基础。
2025-07-30 21:42:54
502
原创 【透彻讲解】Proxy 和 Object.defineProperty 的区别：数据代理 vs 数据劫持
在 Vue2 和 Vue3 的响应式原理中，我们经常会听到"数据劫持"和"数据代理"这两个概念。它们分别对应着和Proxy这两种技术实现。本文将彻底解析它们的区别，通过代码示例、参数说明和使用场景对比，让你完全掌握这两种技术。Vue3 改用 Proxy 实现响应式，解决了 Vue2 中的诸多限制，降低我们的心智负担希望这篇博文能帮助你彻底理解 Proxy 和 Object.defineProperty 的区别！如果有任何问题，欢迎在评论区留言讨论。
2025-07-30 21:11:04
767
原创 一套代码适配多个项目的解决方案1-卡片化
本文介绍了两种前端多项目管理方案：构建时配置注入和运行时接口配置。构建时方案通过在编译阶段注入不同项目配置，实现代码复用最大化，优势在于高性能、强类型和编译优化；运行时方案通过API动态获取配置，适合需要频繁调整的场景。两种方案各有特点：构建时方案适合稳定项目，配置打包在代码中；运行时方案灵活性高，可实时更新。文章还提供了混合模式建议，结合两者优势，并推荐加入配置版本控制。根据项目需求选择合适方案，可显著提升多项目管理效率。
2025-07-28 21:58:49
699
原创 前端内存优化篇-防止长时间不操作内存累加（socket推送频繁项目非常有效）
本文提出了一种智能内存管理方案，通过基于用户行为的Web应用自动刷新策略解决单页应用长期运行导致的内存问题。该方案采用React Hook实现，包含多维度活动检测（鼠标、键盘、触摸事件）、双重计时机制（主计时器和后台检查计时器）和页面可见性处理，能够在用户不活跃或页面隐藏时自动刷新释放内存。系统还集成了性能优化策略，如节流处理高频事件、精准资源清理和状态持久化设计，并支持进阶功能如智能超时调整、用户行为分析和优雅刷新策略。这种方案在保证用户体验的同时，有效解决了SPA应用的内存泄漏和性能下降问题。
2025-07-26 22:41:45
2105
原创 如何预加载技术打造App级网页体验
本文提出了一种网页性能优化方案，通过构建后处理自动注入资源预加载逻辑。该方案采用分阶段加载策略：首屏优先加载关键资源，延迟10秒预加载非关键CSS和JS，并利用link+prefetch机制实现资源缓存。相比传统方案，这种优化模式能有效避免渲染阻塞，提升用户体验。核心实现包括构建脚本自动扫描资源、智能注入客户端控制逻辑，以及基于页面状态的动态加载机制。通过差异化处理CSS（预加载后立即应用）和JS（仅预取缓存），在不影响首屏性能的前提下，为后续交互提供即时响应能力。
2025-07-26 21:46:01
1094
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人