- 博客(85)
- 收藏
- 关注
RSS订阅
原创 【架构思考】AI 辅助开发时代：我们还需要手动提取组件吗？一份代码维护的生存指南
摘要：AI编程助手降低了编码门槛，但也带来了代码维护的痛点。本文指出，组件化在AI时代更为重要，是防止"代码熵增"的关键。文章分析了无架构约束的AI代码会导致风格不一致、类型不安全等问题，并提出四步维护策略：建立单一数据源、设定组件化检查点、使用组合式API剥离逻辑、以及AI辅助代码审查。作者强调开发者需从"代码搬运工"转变为"系统架构师"，将80%精力用于规划组件结构和审查代码质量，才能避免生成不可维护的"屎山代码"。
2026-03-12 16:48:43
354
原创 前端架构师必备：一份超实用的需求评审 Checklist（附详细说明）
本文针对前端开发中因需求模糊导致的返工、边界bug等问题，提出一份覆盖10大维度的需求评审清单。从业务场景到性能安全，包含UI交互细节、接口规范、兼容性要求等关键检查点，帮助团队在需求阶段规避潜在风险。通过工具化、流程化应用该清单，可显著降低沟通成本，确保交付质量，同时提升系统可维护性和用户体验。适用于前端架构师、技术组长在需求评审阶段使用，是预防技术债的有效协作工具。
2026-02-13 23:27:09
562
原创 AI Native 详解：下一代软件的原生智能范式
摘要： AI Native（原生AI）指从设计之初就以AI为核心构建的应用，其交互逻辑、架构均围绕智能展开，而非简单叠加AI功能。与“传统软件+AI”不同，AI Native产品依赖AI驱动核心价值，具备对话式交互、上下文记忆、自主任务规划等特征，典型案例如Trae、Cursor等开发工具。
2026-02-11 15:51:52
520
原创 完整演示 Git Flow 所有分支的创建与流转过程的 实操命令示例
本文详细演示了Git Flow工作流的完整周期操作流程：1) 初始化项目并创建develop分支；2) 基于develop创建feature分支开发新功能；3) 合并feature到develop；4) 从develop创建release分支准备发布；5) 将release合并到main和develop并打标签；6) 出现线上问题时基于main创建hotfix分支；7) 将hotfix合并回main和develop。
2026-02-09 10:10:33
364
原创 Git Flow 详解与最佳实践：打造规范高效的团队协作流程
本文深入解析Git Flow分支管理模型，介绍其五大分支角色（main、develop、feature、release、hotfix）及其标准化工作流程。通过三个典型场景（功能开发、版本发布、热修复）演示具体操作步骤，并推荐使用git-flow工具实现自动化。文章指出Git Flow适合版本化项目，但可能过于复杂，建议根据项目特点选择合适模型，同时提供保护关键分支、命名规范等最佳实践。最后强调Git Flow虽非万能，但在大型项目中能有效提升协作效率和代码可靠性。
2026-02-09 10:04:38
645
原创 CSS中的 `dvh` 与 `vh`: 深入理解视口单位
本文探讨了响应式设计中视口单位vh和dvh的区别与应用。传统vh单位在移动设备虚拟键盘弹出时可能导致布局问题，而dvh能动态适应视口高度变化，提供更稳定的用户体验。文章比较了两者的适用场景，建议表单密集的移动端页面使用dvh，并提供兼容性回退方案。正确选择视口单位能有效提升页面适配性和用户体验。
2026-02-03 09:20:04
608
原创 为什么访问图片地址时浏览器会直接下载而不是显示？
摘要：浏览器下载而非显示图片等资源的核心原因是服务器返回了Content-Disposition: attachment响应头。该头文件强制触发下载行为，而默认inline则允许内联显示。其他影响因素包括错误的Content-Type（如application/octet-stream）或CDN参数覆盖。解决方案是检查并修改响应头，移除attachment或设为inline。通过开发者工具的Network面板可验证具体原因。
2026-01-28 08:55:53
433
原创 “直接 URL 下载” vs “前端 Blob 下载”：原理、区别与最佳实践
本文对比了Web开发中两种文件下载方式：直接URL下载（后端控制）和前端Blob下载。直接URL下载通过后端响应头Content-Disposition触发，兼容性好、内存占用低，适合大文件和全平台支持。前端Blob下载需将数据转为Blob对象，虽可处理文件内容，但在iOS上存在兼容性问题且内存占用高。核心区别在于文件名控制和适用场景，推荐优先使用直接URL下载，特别是需要支持iOS和大文件的情况，而Blob下载仅适用于前端处理小文件的特定场景。
2026-01-28 08:48:24
1000
原创 在 iOS H5 中正确下载文件：为什么 Blob 下载会显示“unknown”，以及如何真正解决？
iOS Safari 和微信浏览器不支持 a 标签的 download 属性，导致 H5 下载文件名失效。本文揭示了根本原因并提供了生产级解决方案：后端需提供带 Content-Disposition 响应头的下载链接，前端直接跳转即可实现全平台兼容下载。文章对比了 Blob 下载和直接 URL 访问的差异，澄清常见误区，强调二进制流本质，并给出验证方法和最佳实践建议，帮助开发者彻底解决 iOS 下载文件名问题。
2026-01-28 08:43:19
928
原创 深入理解 Vue.js 中的「运行时」与「编译时」：从模板到虚拟 DOM 的全过程
本文解析了两者本质区别：编译时发生在构建阶段（如模板转render函数），运行时则在浏览器执行（如虚拟DOM渲染）。
2026-01-04 16:42:44
711
原创 Vite 项目中 `node_modules/.vite/deps` 文件夹详解
Vite开发模式下会在node_modules/.vite/deps/目录生成预构建缓存，这是其优化开发体验的核心机制。
2025-12-19 16:49:56
1055
原创 PostCSS 详解、最佳实践及其与 Less/SCSS 的关系
PostCSS 是现代前端开发中强大的 CSS 处理工具，通过插件系统实现代码转换和优化。本文解析了 PostCSS 的核心原理，对比其与 Less/SCSS 预处理器的差异，并介绍常用插件如 Autoprefixer、postcss-preset-env 和 cssnano 的功能。文章详细说明了 PostCSS 在 Vite 和 Webpack 中的配置方式，以及如何与预处理器协同工作。最佳实践建议指出：PostCSS 适合处理兼容性和优化，而复杂项目仍需预处理器。最终结论是两者应协同使用，PostCS
2025-12-18 16:14:31
1192
原创 JavaScript：IntersectionObserver 详解与最佳实践
IntersectionObserver 是现代 Web 开发中用于高效检测元素可见性的原生 API，解决了传统滚动检测方案的性能问题。本文深入解析其原理、API 使用及工程实践，涵盖懒加载、无限滚动、曝光埋点等典型场景。详细讲解 Entry 对象、多阈值监听、rootMargin 等高级技巧，强调性能优化与内存管理，并提供兼容性处理方案。通过对比 ResizeObserver 等 API，帮助开发者规避常见陷阱，实现高性能的可见性检测功能。
2025-12-18 15:05:15
1237
原创 Vue 中 `scoped` 样式的实现原理详解
本文深入解析Vue单文件组件中<style scoped>的实现原理。通过编译时为组件生成唯一hash标识符（如data-v-1a2b3c4d），并将该属性添加到所有DOM元素上，同时重写CSS选择器为[data-v-xxx]形式，实现样式作用域隔离。文章详细介绍了深度选择器:deep()的使用、特殊场景处理（如插槽和v-html内容），并与CSS Modules进行了对比分析。
2025-12-15 15:46:03
948
原创 Vite 环境变量配置详解及最佳实践
文章详细介绍了环境变量文件加载优先级、自定义前缀配置（envPrefix）、TypeScript类型支持及多环境管理技巧。重点强调了安全最佳实践：敏感配置应使用无前缀变量并通过process.env访问，避免空字符串前缀导致全量暴露。同时澄清了常见误区，指出环境变量是静态注入无法运行时修改。通过合理使用Vite的环境变量机
2025-12-12 11:46:54
858
原创 ES6 Module 导入导出完全指南：语法、原理与最佳实践
ES6模块系统通过import/export语法解决了传统JS全局污染和依赖管理问题，具有作用域隔离、静态分析和异步加载等优势。核心用法包括：命名导出（多值导出）、默认导出（单值导出）及动态导入（按需加载）。关键特性强调静态结构和实时绑定，最佳实践推荐优先使用命名导出、避免混合模式、合理组织目录结构。开发者需注意扩展名要求、MIME类型声明等细节，遵循"显式优于隐式"的原则，才能编写出清晰高效的模块化代码。
2025-12-11 10:17:25
1176
原创 前端构建工具详解：Vite 与 Webpack 深度对比与实战指南
Vite 与 Webpack 是当前主流前端构建工具。Webpack 功能强大、生态成熟，适合复杂项目和 IE11 兼容；Vite 基于原生 ESM，启动快、热更新迅速，适合现代浏览器的新项目。新项目推荐优先选用 Vite，追求极致开发体验。
2025-12-10 17:11:25
789
原创 JavaScript 中 Map 和 Set 的使用教程与最佳实践
ES6引入了Map和Set数据结构，弥补了Object和Array的不足。Map支持任意类型键值对，保留插入顺序，无原型污染；Set自动去重，快速判断元素存在。与Object相比，Map适合动态键名和大数据操作；与Array相比，Set在去重和查找时更高效。实用场景包括缓存计算、数据统计和双向映射等。最佳实践建议：键非字符串用Map，需要唯一值用Set。注意对象键比较引用，以及序列化问题。性能上，大数据量时Map/Set更优。
2025-12-08 11:29:11
725
原创 JavaScript `Array.prototype.reduce()` 的妙用：不只是求和！
JavaScript 的 reduce() 方法远不止求和功能，它是一个极其灵活的数组高阶函数。本文深入探讨了 reduce 的 10+ 种高级用法，包括模拟 map/filter、数组去重、数据分组、频次统计、扁平化数组、链式操作合并、对象转换等场景。文章强调 reduce 的核心思想是通过单次遍历构建任意类型的累积结果，同时提供了最佳实践建议：在保证可读性的前提下，合理利用 reduce 替代多重遍历操作。掌握这些技巧能显著提升处理复杂数据转换的能力，但需注意避免滥用以保持代码清晰。
2025-12-04 14:05:43
500
原创 类型收窄 vs 类型守卫：TypeScript 中的类型细化机制详解
本文深入解析了TypeScript中类型收窄(Type Narrowing)和类型守卫(Type Guard)的关系与区别。类型收窄是编译器将宽泛类型缩小为具体子类型的过程，而类型守卫是触发收窄的运行时检查逻辑。文章详细介绍了三种类型守卫形式：内置操作符(typeof/instanceof/in)、自定义类型谓词函数和可辨识联合，并通过示例展示了它们如何实现类型收窄。同时澄清了常见误区，指出类型守卫是"手段"，类型收窄是"结果"，二者配合可提升代码类型安全性。最后给出
2025-12-04 10:06:42
775
原创 JavaScript 尾递归（Tail Recursion）详解
JavaScript尾递归是一种特殊的递归形式，递归调用作为函数的最后一步操作。理论上，尾递归可以被优化为循环，避免栈溢出问题。然而，目前主流JavaScript引擎（除Safari外）并未完全实现尾调用优化（TCO）。文章详细介绍了尾递归的概念、优势，以及如何手动将尾递归转换为循环来确保代码安全性。尽管不能依赖TCO，理解尾递归仍有价值，可用于算法教学、函数式编程等场景。最后强调：在JavaScript中，尾递归不等于防栈溢出，生产环境应优先使用迭代方案。
2025-12-03 15:49:32
743
原创 JavaScript 遍历对象与数组的方法详解：优缺点与最佳实践
JavaScript遍历方法精要 JavaScript提供了多种遍历对象和数组的方法，各有优缺点。数组遍历中，for循环性能最优但代码冗长；for...of简洁且支持中断；forEach函数式风格但无法中断；高阶函数map/filter表达力强但内存开销大。对象遍历推荐Object.keys()或Object.entries()，避免for...in的原型链问题。关键实践包括：优先语义化方法、避免forEach处理异步、性能关键路径用for循环、不修改遍历中的数据结构。根据场景选择合适方法，可写出高效可维护
2025-12-02 21:31:32
825
原创 Server-Sent Events（SSE）详解：轻量级服务端推送方案
是一种基于 HTTP 的单向服务器推送技术，允许服务端主动向浏览器客户端持续发送文本数据流。✅标准 Web API：浏览器原生支持对象✅自动重连：断开后自动尝试恢复连接✅轻量简单：比 WebSocket 更易实现，比轮询更高效❌仅支持文本：不能传输二进制数据❌单向通信：只能服务端 → 客户端（不能反向发）💡典型应用：ChatGPT 网页版早期流式回复、实时构建日志、系统状态推送SSE = 简单 + 高效 + 原生支持的服务端推送方案。当你需要从服务端向浏览器持续推送文本数据。
2025-11-14 22:51:17
1221
原创 随笔记：计算机基础及进制计数法
记录一下最近接触的基本的概念，便于想看的时候随时来翻看一下。还是比较重要滴，还是比较重要滴，还是比较重要滴现代计算机是用和来表示的，
2022-11-17 15:59:50
436
原创 随笔记：重新认识 else if
重新认识else if认识后else if 不是JavaScript这门语言的标准语法，而是社区朋友们根据标准语法自己发明的写法原因：if 或者 else 后面如果只有一行语句的话，是可以省略花括号的(不推荐这样写 ⚠️ )非简写模式...
2022-06-23 12:00:51
323
原创 五一假期：记录一次微信小程序开发流程
记录一次微信小程序开发流程一眨眼就到了2022年的五月一假期了，时光过的是有点快。希望疫情抓紧结束吧，我想过上正常的生活。这几天趁着月底没事，正好有个微信小程序项目，那就拿来练练手吧，好久不写了，刚开始着实有点手生。XXXX微信小程序开发工具：HBuilderX ：官网下载地址：https://www.dcloud.io/微信开发者工具：微信公众平台下载地址：https://mp.weixin.qq.com/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直
2022-05-17 20:43:14
333
原创 随笔记：获取当前页面有多少种类的标签
随笔记：获取当前页面有多少种类的标签实现思路首先，获取当前页面的所有标签使用 document.getElementByTagName(“*”) — HTMLCollection 实时的或使用 document.querySelectorAll(“*”) — NodeList 快照更多差异学习，参考 🔴 红宝书 📖上面获取的结果都是类数组将类数组转换为数组扩展运算符 … 最简单方便的方法es6 Array.from()slice循环–2.0版本 vue.
2022-05-13 10:43:31
487
原创 随笔记：Promise 封装ajax
随笔记：Promise 封装ajax上次工作中用到了利用Promise封装ajax，对外部客户端进行调用，今天忽然想起来了，总结一下。希望疫情抓紧结束 👐Code const promiseAjax = new Promise((resolve, reject) => { // let timeoutXmlhttp = null; //创建XMLHttpRequest if (window.XMLHttpRequest) { //
2022-03-25 08:49:09
585
原创 随笔记：HTML5之拖放
随笔记：HTML5之拖放学习一下HTML5 拖放知识 — 2022年3月2号drag 释义：拖 拽drop 释义：投 丢拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。拖放过程中会触发的事件在拖动目标上触发事件(源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发ondragend- 用户完成元素拖动后触发释放目标时触发的事件:ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件on
2022-03-02 16:48:18
163
原创 JavaScript普通函数调用与闭包调用
JavaScript普通函数调用与闭包调用差异今天是2022年2月4号，新年假期已经过去了七分之四，这几天杭州的天气xue微的不太好，阴天下雨的都持续一个月了，最近也下了几场小雪。今天三喜临门，首先时女朋友的生日，然后也是2022年北京冬奥会开幕式，还是一个新的节气—立春。从今天开始，新的一年慢慢步入正规。今天总结下普通函数的调用和闭包调用。概念函数执行时，每个执行上下文中都会有一个包含其中变量的对象。【变量对象】全局上下文中叫变量对象，它会在代码执行期间始终存在。【活动对象】函数局部上
2022-02-04 22:18:21
970
原创 JavaScript：按值传递的理解
JavaScript：按值传递的理解ECMAscript中所有的参数都是按值传递。不可能按引用传递。如果把整个对象作为参数传递，那么传递的值就是这个对象的引用。function setName(obj){ obj.name = 'wcc'; obj = new Object();//函数执行完毕后，就销毁掉了 obj.name = 'hzm'; //console.log(obj);//{name:hzm}
2022-02-03 23:10:30
828
原创 随笔记：达夫设备（Duff‘s Device）学习
随笔记：达夫设备（Duff’s Device）学习今天是2022年1月9号星期日，从郑州回来杭州的第六天，已经在集中隔离点的第五天。怎么说呢，既倒霉又幸运！今天在看《高性能JavaScript》一书，学习到了关于“达夫设备”的知识，记录一下吧！达夫设备（Duff’s Device）定义：是一种用来限制循环迭代次数的模式。示例 <script> var items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
2022-01-09 22:12:05
590
原创 安全算法：公开密钥加密之RSA算法
安全算法：公开密钥加密之RSA算法今天是2021年12月18号周六⏲04点53分，距离2022年仅剩了13天了。睡醒了，那就整理一下这周接触到的用于加密的RSA算法吧！当时第一次接触这个知识点是在《我的第一本算法书》???? 中，有兴趣的朋友可以去看看，算是一本算法基础的书。公开密钥加密：简介公开密钥加密（又称“非对称加密”）是加密和解密使用不同密钥的一种加密方法。包括公开密钥和私有密钥（成对生成的，网上有工具网站，可以自行找一下）。公开密钥（public key，后面简称P）：加密用的密钥
2021-12-18 06:06:51
1805
原创 Vue项目基础配置：二次封装Axios 全流程解析
Vue项目基础配置：二次封装Axios 全流程解析简述????,自己对axios及二次封装流程有点陌生了，那就来整理一下吧???? 。整理???? 的详细 一点，便于自己现在的学习，也有利于后期的复习???? 。概述：本篇主要包括：axios的基础概念和二次封装axios的流程什么是Axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。安装npm install axios或 npm install axios --S或 n
2021-12-11 00:27:59
1536
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人