- 博客(59)
- 收藏
- 关注
RSS订阅原创 前端架构知识体系：通过发布-订阅者模式解耦路由和请求
本文探讨了如何利用发布-订阅者模式解耦前端开发中的路由和请求管理。传统做法往往将路由跳转与数据请求紧密耦合，导致代码难以维护和扩展。通过建立事件中心，将路由变化作为事件发布，由请求模块订阅处理，实现了两者的解耦。文章详细介绍了事件中心的实现方法，并展示了如何将axios请求封装成可订阅的事件处理器。这种模式提高了代码模块化程度，便于扩展和维护，使路由跳转和请求处理更加灵活，为复杂前端应用提供了更优的架构方案。
2025-12-02 10:35:08
805
原创 前端设计模式全解（23 种）
前端设计模式概述 设计模式是解决常见软件设计问题的可复用方案。在前端开发中，23种经典模式（由GoF提出）可提升代码质量。主要分为三类： 创建型模式：控制对象实例化，如单例模式（全局状态管理）、工厂模式（环境适配创建）、建造者模式（组件渐进构建） 结构型模式：处理对象组合，如适配器（接口兼容）、装饰器（功能扩展）、代理（访问控制） 行为型模式：管理对象交互，如责任链（请求处理链）、命令模式（操作封装） 典型应用包括： 状态管理（单例） 组件构建（工厂/建造者） API封装（外观/代理） 功能扩展（装饰器）
2025-09-12 14:39:04
1229
原创 CSS 动画实战：实现电商中“加入购物车”的抛物线效果
本文介绍了如何利用CSS实现电商网站中常见的"加入购物车"抛物线动画效果。通过嵌套元素结构，将X轴和Y轴运动分离：外层元素使用linear实现匀速水平运动，内层元素利用cubic-bezier曲线模拟加速下落、减速上升的垂直运动。文章详细讲解了animation-timing-function的各种取值，并提供了完整的代码示例。这种纯CSS方案虽然简单优雅，但对于更精确的物理效果，建议结合JavaScript实现。该技术可提升用户体验，增加网站交互趣味性。
2025-09-12 11:24:35
1550
原创 前端架构知识体系：Source Map 的用法和全面解析
Source Map是源码与编译后代码的映射，用于调试和错误定位。Webpack 提供多种模式，开发环境和生产环境的取舍不同。开发环境：推荐，快且可调试。生产环境：推荐或，避免源码泄露。切记不要在生产环境暴露源码，否则会有严重安全风险。通过合理配置 Source Map，我们既能保证开发效率，又能在生产环境中安全高效地定位问题。
2025-09-12 10:16:26
964
原创 深入理解 async/await 原理：Generator 与 Promise 的结合
本文深入解析了async/await的机制，比较了其与Promise的关系，并揭示其底层实现原理。async函数本质返回Promise，await相当于Promise.then的语法糖，底层由Generator函数+自动执行器实现。Generator通过yield实现"暂停-恢复"能力，配合自动执行器将异步代码写成同步风格。文章还介绍了异常处理机制，并建议结合Promise.all实现并行异步操作
2025-09-11 14:57:27
461
原创 深入理解 Vue3 Router：三种路由模式的工作原理与实战应用
本文介绍了Vue Router 4的三种路由模式。Hash模式基于location.hash，简单易用但URL带#号；History模式使用HTML5 History API，URL美观但需后端支持；Memory模式将路由存储在内存中，适合SSR和测试场景。三种模式在实现方式、优缺点和使用场景上各有不同：Hash模式适合中小项目，History模式适合大型应用，Memory模式则适用于非浏览器环境。开发者可根据项目需求选择合适的路由模式。
2025-09-11 11:13:44
660
原创 前端架构知识体系：Web Worker 使用与优化指南
本文介绍了Web Worker的使用方法和优化技巧，帮助提升网页性能。主要内容包括：1) Web Worker基础用法，如创建Worker、终止Worker和线程间通信；2) 适用场景，如耗时计算、大文件处理等；3) 优化策略，包括Transferable Objects减少数据拷贝、Worker池复用线程、分块处理大数据等；4) 注意事项，如Worker无法操作DOM，通信依赖postMessage等。合理使用Web Worker可保持界面流畅，充分利用多核CPU性能。
2025-09-10 16:06:32
547
原创 前端架构知识体系：文件指纹的核心原理与工程化落地
文件指纹（也常称为 asset fingerprinting、cache busting）是把资源文件（如 JS、CSS、图片、字体等）的内容信息映射到文件名上的一种做法。常见形式是在文件名中加入一段基于内容的哈希（例如），使得文件内容改变时文件名也随之改变，从而与浏览器/代理缓存机制协同工作，确保用户在资源发生变化时能够拿到最新版本，同时在资源不变时尽可能复用缓存以提升性能。
2025-09-10 15:53:41
1252
原创 前端架构知识体系：常见网络攻击和防范策略
前端开发面临多种网络攻击威胁，主要包括XSS、CSRF、SQL注入、点击劫持和暴力攻击等。防范措施包括：对XSS使用输入过滤和CSP策略；对CSRF采用令牌验证；对SQL注入使用参数化查询；对点击劫持设置X-Frame-Options头；对暴力攻击实施登录限制；同时注意敏感信息保护和文件上传安全。通过综合运用这些安全措施，可有效提升前端应用的安全性。
2025-09-09 13:50:05
679
原创 前端架构知识体系：常见压缩算法全解析及原理揭秘（gzip、zip）
本文深入解析了常见压缩算法及其前端应用场景。无损压缩（如Gzip、Brotli、ZIP）通过消除数据冗余保持完整，适合代码和文本资源；有损压缩（如JPEG）通过丢弃不敏感数据实现更高压缩比，适用于媒体文件。文章对比了各算法的原理、性能和适用场景，推荐前端采用Brotli优化静态资源，Gzip确保兼容性，LZ4/Snappy处理实时数据，ZIP/7z用于文件归档，并建议结合CDN策略和资源预优化来提升网页性能。
2025-09-02 13:50:01
709
原创 前端架构知识体系：常见图片格式详解与最佳实践
本文系统梳理了前端开发常用的图片格式（JPEG、PNG、GIF、WebP、SVG、BMP），分析其压缩原理、透明支持、动画特性等核心技术特点。重点对比了各格式的优缺点，并针对不同场景给出选择建议：照片类推荐JPEG/WebP，图标LOGO推荐PNG/SVG，动图推荐GIF/WebP动画。最后提供前端优化实践建议，包括格式选择、响应式图片处理、CDN缓存和使用压缩工具等方案，帮助开发者平衡图片质量与加载性能。
2025-09-02 13:30:39
788
原创 前端架构知识体系：css架构模式和代码规范
本文系统解析了五种主流CSS架构模式：OOCSS（面向对象CSS）、BEM（块元素修饰符）、SMACSS（可扩展模块化架构）、ITCSS（倒三角CSS）和原子化CSS。每种架构各有优缺点，如BEM命名规范严格但类名冗长，ITCSS层次清晰但学习成本高。推荐混合使用BEM和ITCSS，结合原子化CSS提升效率。选择架构需考虑项目规模、团队协作等因素，最终目标是实现代码的可预测性、复用性、可维护性和可扩展性。团队共识和规范执行比具体架构更重要。
2025-08-27 14:13:47
1062
原创 前端架构知识体系：JS代码规范(Airbnb)
爱彼迎JavaScript代码规范是业界广泛采用的开发指南，强调代码一致性、可读性和可维护性。规范涵盖类型、引用、对象、数组等核心概念，推荐使用字面量创建对象和数组，优先使用const/let代替var。在函数方面提倡箭头函数和默认参数，类使用class语法而非原型链。模块化开发推荐ES6的import/export，迭代处理优先使用数组高阶函数。变量命名采用驼峰式，常量使用SNAKE_CASE。规范还提供了具体代码示例，对比推荐与不推荐的写法，帮助开发者编写更规范的JavaScript代码。
2025-08-27 10:41:05
1220
原创 别再乱用 reactive 了！连尤雨溪都说要用 ref
Vue 3 中 ref 和 reactive 如何选择？ Vue 3 的响应式 API ref 和 reactive 常让开发者纠结。尤雨溪推荐优先使用 ref，原因包括： 通用性：ref 能处理基本类型和对象，而 reactive 仅支持对象。 避免陷阱：reactive 解构会丢失响应式，ref 无此问题。 组合式 API 友好：ref 更直观，配合 toRefs 更灵活。 TS 类型推导更优：Vue 3 类型系统围绕 ref 设计。 reactive 仍适用于复杂嵌套对象，但需注意潜在问题。
2025-08-21 16:18:56
333
原创 前端图片主色调提取与性能优化指南
本文介绍了提取图片主色调的几种方法：1）基础实现使用canvas获取像素数据并统计频率；2）通过Web Worker优化性能；3）推荐使用Vibrant.js库，可智能提取多种颜色调性。文中提供了完整代码示例，并说明了跨域和性能优化等注意事项。方法对比：原生实现适合简单场景，Vibrant.js则支持更专业的色彩分析。
2025-08-15 10:13:34
356
原创 微信浏览器上线后首次打开白屏，刷新一次又恢复的原因与解决方案
微信浏览器首次白屏问题解决方案 微信内置浏览器会强缓存index.html文件，导致用户首次访问时可能加载旧版HTML，引用的静态资源已被删除从而出现白屏。刷新后获取新版HTML恢复正常。 推荐解决方案： URL加版本参数（最优）：入口URL添加/?v=构建号，强制获取最新HTML 静态资源延迟清理：保留多个版本的哈希资源 缓存策略优化：入口HTML设置no-store，静态资源长缓存 自动恢复机制：监听404错误自动刷新 组合方案A+E+F可解决大多数场景，配合方案D提升容错性
2025-08-13 16:30:10
1188
原创 彻底懂原型链，别说你会 JavaScript：核心原理与面试考点
JavaScript 原型与继承机制解析 本文系统讲解了 JavaScript 的核心继承机制 - 原型与原型链。每个 JavaScript 对象都有一个内置的原型属性，通过原型链实现继承特性。文章详细演示了原型链的工作原理，包括构造函数与原型对象的关系，以及如何通过 Object.create() 和 new 操作符实现继承。同时介绍了三种数据类型判断方法（typeof、instanceof、Object.prototype.toString.call()）的优缺点，并对比了浅拷贝与深拷贝的实现方式。
2025-08-08 13:31:55
894
原创 微前端架构实战：从理念到落地，qiankun 与 microapp 全解析
《微前端架构实战指南：qiankun与microapp对比分析》摘要： 微前端架构通过将大型应用拆分为独立可开发的微应用，有效解决了技术栈固化、部署周期长等企业级前端开发痛点。本文重点对比分析国内主流微前端框架qiankun和microapp的核心特性与实现方案。qiankun作为企业级解决方案，提供完善的沙箱隔离、生命周期管理和通信机制，适合复杂场景但需改造微应用；京东的microapp则以轻量无侵入为特点，通过简单标签即可集成微应用，更适用于快速接入场景
2025-08-06 14:00:56
940
原创 Monorepo 与包管理工具：从幽灵依赖看 npm 与 pnpm 的架构差异
Monorepo是一种将多个项目集中管理的代码仓库模式，具有代码共享、统一依赖管理、原子化提交等优势，适合微前端和关联项目开发。相比Multirepo，Monorepo简化了依赖管理但增加了仓库体积。在工具选择上，pnpm比npm更高效，能避免"幽灵依赖"问题——即未声明却可使用的间接依赖包，这种依赖可能引发版本冲突和安全风险。建议新项目使用pnpm进行严格依赖隔离，定期用depcheck工具检测幽灵依赖。
2025-07-11 13:28:54
1356
原创 告别系统时间篡改：用页面加载时间搞定前端倒计时的 “防作弊” 方案
摘要：前端实现倒计时功能时，直接使用new Date().getTime()获取系统时间存在安全隐患，用户可修改系统时间影响功能准确性。本文提出使用performance API结合后端时间戳的解决方案：通过performance.now()获取不可篡改的页面加载时间，配合服务器时间计算精准倒计时。该方法适用于抢票等对时间敏感的场景，有效避免用户修改系统时间带来的问题。
2025-07-08 11:06:11
341
原创 前端架构知识体系：Vue 项目架构设计、性能优化与 CI/CD 全流程
前端架构设计全流程解析 本文系统阐述了企业级Vue项目从技术选型到部署上线的架构设计全流程。技术选型推荐Vue3+Pinia+Vite组合，搭配ElementPlus或Vant组件库，通过ESLint+Prettier+Stylelint保障代码规范。架构设计层面，提出RBAC/ABAC权限方案、微前端集成策略，并详细列举性能优化手段（懒加载、CDN、虚拟滚动等）。部署环节构建Jenkins+GitLab的CI/CD流水线，强调Docker容器化与蓝绿发布策略。
2025-07-07 15:57:32
1169
原创 彻底拆解 Vue scoped 指令：从编译原理到工程实践的全链路解析
Vue的scoped样式隔离机制解析：通过为DOM元素添加唯一哈希属性（如data-v-xxx）并将CSS规则转换为属性选择器实现组件样式隔离。vue-loader在编译时进行两步处理：标记DOM元素和转换CSS选择器。该机制虽有效，但需注意权重影响（选择器权重会增加）和父子组件样式渗透问题。可通过深度选择器（:deep）或全局样式来修改子组件样式。理解这些原理有助于解决实际开发中的样式冲突问题。
2025-06-24 18:07:04
669
原创 微信中 qrcode 生成二维码长按无效果的解决方案
摘要：在微信浏览器中使用qrcode插件生成二维码时，发现用户长按无法调起微信扫描功能。经排查发现，插件生成的canvas元素虽被隐藏但仍覆盖在img标签上方，导致微信无法识别二维码。解决方案是将canvas转换为base64格式，创建新的img标签展示二维码，从而解决了微信长按识别的兼容性问题。该方法确保了二维码扫码功能的正常使用，适用于公众号关注、活动跳转等场景。
2025-06-18 15:38:49
770
原创 解决移动端浏览器无法使用 navigator.clipboard 的问题
最近在开发H5项目实现物流单号复制功能时，采用PC端的navigator.clipboard.writeText()方法存在兼容性问题。经测试发现，该方法在移动端微信浏览器及其他部分浏览器中不可用。
2025-05-28 16:19:05
843
原创 如何取消 fetch 的流式请求并处理错误信息
最近在做的ai项目,产品提了一个需求,要求如果ai正在输出内容,用户再次提交了prompt,终止当前的请求,去发送新的请求。
2025-04-03 16:47:09
696
原创 webpack打包优化策略
3.图片压缩，使用图片压缩插件，压缩图片，并且可以将比较小的图片转换成base64格式。1.使用CDN，将比较大的依赖包放到CDN，通过script引入项目中。2.项目分包，路由使用懒加载。
2025-02-13 13:35:52
656
原创 2025好未来前端一面面试题(新鲜出炉)
最近我参加了好未来前端开发岗位的面试，想跟大家分享一下面试经历和心得。不同于传统的面试模式，这次面试的一大特点是更注重实际场景的考察，而不是单纯的技术知识点测试。题目的答案还没时间写,年前会给大家补齐(呜呜呜,别骂我)
2025-01-23 14:34:25
565
原创 微信小程序实现语音转文字
最近在做ai问答的小程序开发，需要有一个语音输入转文字发送的功能，找了网上很多教程，包括还有问了ai，发现都没有很好的解决，这里给大家一个标准的解决方案。
2025-01-09 15:42:35
2059
原创 解决微信小程序中调用流式接口，处理unicode编码时 TextDecoder 不兼容的问题
【摘要】开发AI问答小程序时，发现TextDecoder API在生产环境不兼容，导致流式Unicode数据无法解析。尝试多个polyfill库无效后，作者自行实现了一个UTF-8解码器：通过判断字节序列长度（1-4字节）逐字符转换，并处理UTF-16代理对。解决方案包括创建TextDecoder类，支持ArrayBuffer/Uint8Array输入，将代码封装为textDecoder.js并在app.js全局引入。该方法有效解决了小程序生产环境下的Unicode解码问题，代码可直接复用
2025-01-07 11:31:55
2011
22
原创 React 常见 bug 排查指南：方法绑定与全局状态管理问题
在 React 中，状态管理可以通过多种方式实现。从useState到useReducer，再到像 Redux 或 Zustand 这样的全局状态管理库，开发者可以根据应用的需求选择合适的工具。尤其是随着应用的复杂度增加，使用全局状态管理来共享数据变得尤为重要。但无论我们是使用 React 内置的状态管理还是外部库，都难免会遇到一个常见问题——方法绑定和this指向问题，尤其是在函数式组件中。
2024-12-30 17:28:37
960
原创 解决slice截取字符串出现乱码的问题
在开发中，我们经常会截取字符串，平常用的比较多的方法就是slice和substring，但是有的小伙伴通过slice截取的时候，经常会出现乱码的问题，我们来看一下现在有这样一段代码，截取字符串0-1位置的字符诶，很奇怪，怎么出现乱码了呢？？？我们再打印一下0-2位置的字符呢诶，正确了！我们打印一下表情的lentgh属性试一下我们会发现，输出了2，可是我们的表情明明只是一个字符啊。
2024-10-22 18:16:24
379
原创 一道价值很高的事件循环面试题（promise和setTimeout）
虽然promise.then是微任务，应该在setTimeout之前执行，但是运行到promise.then的时候，promise还没有resolve，所以不会执行，只有等到promise的状态变化，才会执行promise.then。6.查找任务队列，执行setTimeout中的代码，先输出 timeStart,然后将success resolve出去，但是会等到当前执行栈执行完才会执行下一个，所以先输出timeEnd。4.promise.then() ———— 异步任务（微任务）
2024-10-21 20:26:48
276
原创 操纵DOM元素产生死循环，你遇到过吗（附解决方案）
在业务开发中，需求各种各样，我们来看这样一段代码，页面中有几个div，我想点击按钮，复制一份到list中,并且打印一下索引值看一下但是我们去浏览器运行一下试试我们发现输出了很大的索引，并且我的页面还在无限的打印，我们的获取的item集合应该只有4个呀 ，为什么会有这种情况？
2024-09-20 16:14:13
466
原创 奇怪的面试题——怎么使 if（a==1&&a==2&&a==3）为true
大家来看这样一道题，怎么使这乍一看，他就不可能啊，怎么可能a既等于1，又等于2，还等于三？绝对是出这道题的人脑子瓦特了🤬，但是大家细想，出这种奇怪的面试题，其实主要是对我们js基础的考察，我们来一步一步的分解它。
2024-09-19 16:40:18
516
原创 var、let、const的区别以及暂时性死区（重点：let和const是有变量提升的！！）
但是呢，其实真正意义上说，let和const是有变量提升的！我们先来看一下MDN上是怎么说的其实let和const有变量提升的，只是因为产生了。
2024-09-14 11:48:04
390
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人