- 博客(91)
- 收藏
- 关注
RSS订阅
原创 [知识库] 什么是 Token？LLM 的“计量单位”全解析
在使用 Cursor、ChatGPT 或调用 API 时，我们常看到“Token”这个词。它既不是字符，也不完全是单词。本文深入解析 Token 的本质、中英文差异、计费逻辑以及如何估算用量，帮助开发者更好地控制成本与上下文。
2026-03-26 08:49:18
420
原创 【复习笔记】TypeScript 真的方便吗？类型定义到底该写在哪里？
摘要：TypeScript（TS）在长期项目维护中优势显著，通过编译时错误拦截、智能提示和重构保障提升开发效率，尤其适合大型项目。其核心价值在于将问题前置，避免线上错误。类型定义应分层管理：局部类型就近定义，全局类型集中存放，简单变量依赖自动推断，第三方扩展使用声明文件。最佳实践包括避免滥用any、善用工具类型、优先选择interface，并保持组件props的简洁性。TS已成为现代前端开发的必备工具，合理使用类型系统能显著提升代码质量和可维护性。
2026-03-25 14:46:48
343
原创 【Vue3实战】El-Table实现“超过3行省略，悬停显示全文”的完美方案（附性能优化）
本文介绍了一个在Vue 3中实现表格文本智能省略与悬停展示的解决方案。通过结合CSS的-webkit-line-clamp和JS的DOM高度检测(scrollHeight > clientHeight)，可以精准判断文本是否溢出，从而动态控制el-popover的显隐。
2026-03-20 17:05:23
407
原创 【深度思考】从“代码工匠”到“产品导演”：程序员如何转型 Vibe Coding 思维？
随着AI辅助编程工具的普及，"Vibe Coding"（直觉编程）正推动程序员从传统技术思维向产品/逻辑思维转型。本文对比了两种思维模式的核心差异：传统思维关注代码实现细节（How），而Vibe Coding更重视产品效果（What&Why）、用户体验和业务逻辑闭环。
2026-03-20 09:48:31
637
原创 【设计模式】策略模式：告别嵌套 if-else，让代码像搭积木一样优雅
摘要：本文探讨了 JavaScript 中如何利用策略模式优化复杂业务逻辑，如价格计算和表单验证。通过对比传统 if-else 和策略模式的两种实现（对象映射和类多态），展示了策略模式在可扩展性、可维护性和代码复用性上的优势。对象映射方案简洁直观，适合轻量级场景；类多态方案则适用于复杂状态管理。文章以折扣计算和表单验证为例，演示了策略模式在实际开发中的应用价值，帮助开发者构建更灵活的前端架构。
2026-03-19 08:51:30
396
原创 【深度思考】用了 Cursor 之后，为什么我反而更焦虑了？——AI 时代的程序员生存法则
本文探讨了AI编程助手（如Cursor）带来的效率提升与知识空心化问题。作者指出，AI辅助编程使程序员角色从"砖瓦工"转变为"架构师/监理"，但若缺乏基础知识，将无法有效审查AI生成的代码质量。文章强调在AI时代，代码审查能力、系统设计、调试技巧和语言特性理解等基础能力比编写能力更重要，并通过TypeScript案例说明基础知识的价值。最后建议将AI工具转化为学习助手，通过主动提问和对比学习来强化基础。作者认为，只有扎实基础与AI工具结合，才能实现程序员的真正进化。
2026-03-18 16:29:03
473
原创 【架构思考】AI 辅助开发时代：我们还需要手动提取组件吗？一份代码维护的生存指南
摘要：AI编程助手降低了编码门槛，但也带来了代码维护的痛点。本文指出，组件化在AI时代更为重要，是防止"代码熵增"的关键。文章分析了无架构约束的AI代码会导致风格不一致、类型不安全等问题，并提出四步维护策略：建立单一数据源、设定组件化检查点、使用组合式API剥离逻辑、以及AI辅助代码审查。作者强调开发者需从"代码搬运工"转变为"系统架构师"，将80%精力用于规划组件结构和审查代码质量，才能避免生成不可维护的"屎山代码"。
2026-03-12 16:48:43
399
原创 前端架构师必备：一份超实用的需求评审 Checklist（附详细说明）
本文针对前端开发中因需求模糊导致的返工、边界bug等问题，提出一份覆盖10大维度的需求评审清单。从业务场景到性能安全，包含UI交互细节、接口规范、兼容性要求等关键检查点，帮助团队在需求阶段规避潜在风险。通过工具化、流程化应用该清单，可显著降低沟通成本，确保交付质量，同时提升系统可维护性和用户体验。适用于前端架构师、技术组长在需求评审阶段使用，是预防技术债的有效协作工具。
2026-02-13 23:27:09
569
原创 AI Native 详解：下一代软件的原生智能范式
摘要： AI Native（原生AI）指从设计之初就以AI为核心构建的应用，其交互逻辑、架构均围绕智能展开，而非简单叠加AI功能。与“传统软件+AI”不同，AI Native产品依赖AI驱动核心价值，具备对话式交互、上下文记忆、自主任务规划等特征，典型案例如Trae、Cursor等开发工具。
2026-02-11 15:51:52
694
原创 完整演示 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
381
原创 Git Flow 详解与最佳实践：打造规范高效的团队协作流程
本文深入解析Git Flow分支管理模型，介绍其五大分支角色（main、develop、feature、release、hotfix）及其标准化工作流程。通过三个典型场景（功能开发、版本发布、热修复）演示具体操作步骤，并推荐使用git-flow工具实现自动化。文章指出Git Flow适合版本化项目，但可能过于复杂，建议根据项目特点选择合适模型，同时提供保护关键分支、命名规范等最佳实践。最后强调Git Flow虽非万能，但在大型项目中能有效提升协作效率和代码可靠性。
2026-02-09 10:04:38
666
原创 CSS中的 `dvh` 与 `vh`: 深入理解视口单位
本文探讨了响应式设计中视口单位vh和dvh的区别与应用。传统vh单位在移动设备虚拟键盘弹出时可能导致布局问题，而dvh能动态适应视口高度变化，提供更稳定的用户体验。文章比较了两者的适用场景，建议表单密集的移动端页面使用dvh，并提供兼容性回退方案。正确选择视口单位能有效提升页面适配性和用户体验。
2026-02-03 09:20:04
652
原创 为什么访问图片地址时浏览器会直接下载而不是显示？
摘要：浏览器下载而非显示图片等资源的核心原因是服务器返回了Content-Disposition: attachment响应头。该头文件强制触发下载行为，而默认inline则允许内联显示。其他影响因素包括错误的Content-Type（如application/octet-stream）或CDN参数覆盖。解决方案是检查并修改响应头，移除attachment或设为inline。通过开发者工具的Network面板可验证具体原因。
2026-01-28 08:55:53
493
原创 “直接 URL 下载” vs “前端 Blob 下载”：原理、区别与最佳实践
本文对比了Web开发中两种文件下载方式：直接URL下载（后端控制）和前端Blob下载。直接URL下载通过后端响应头Content-Disposition触发，兼容性好、内存占用低，适合大文件和全平台支持。前端Blob下载需将数据转为Blob对象，虽可处理文件内容，但在iOS上存在兼容性问题且内存占用高。核心区别在于文件名控制和适用场景，推荐优先使用直接URL下载，特别是需要支持iOS和大文件的情况，而Blob下载仅适用于前端处理小文件的特定场景。
2026-01-28 08:48:24
1057
原创 在 iOS H5 中正确下载文件：为什么 Blob 下载会显示“unknown”，以及如何真正解决？
iOS Safari 和微信浏览器不支持 a 标签的 download 属性，导致 H5 下载文件名失效。本文揭示了根本原因并提供了生产级解决方案：后端需提供带 Content-Disposition 响应头的下载链接，前端直接跳转即可实现全平台兼容下载。文章对比了 Blob 下载和直接 URL 访问的差异，澄清常见误区，强调二进制流本质，并给出验证方法和最佳实践建议，帮助开发者彻底解决 iOS 下载文件名问题。
2026-01-28 08:43:19
1005
原创 深入理解 Vue.js 中的「运行时」与「编译时」：从模板到虚拟 DOM 的全过程
本文解析了两者本质区别：编译时发生在构建阶段（如模板转render函数），运行时则在浏览器执行（如虚拟DOM渲染）。
2026-01-04 16:42:44
736
原创 Vite 项目中 `node_modules/.vite/deps` 文件夹详解
Vite开发模式下会在node_modules/.vite/deps/目录生成预构建缓存，这是其优化开发体验的核心机制。
2025-12-19 16:49:56
1112
原创 PostCSS 详解、最佳实践及其与 Less/SCSS 的关系
PostCSS 是现代前端开发中强大的 CSS 处理工具，通过插件系统实现代码转换和优化。本文解析了 PostCSS 的核心原理，对比其与 Less/SCSS 预处理器的差异，并介绍常用插件如 Autoprefixer、postcss-preset-env 和 cssnano 的功能。文章详细说明了 PostCSS 在 Vite 和 Webpack 中的配置方式，以及如何与预处理器协同工作。最佳实践建议指出：PostCSS 适合处理兼容性和优化，而复杂项目仍需预处理器。最终结论是两者应协同使用，PostCS
2025-12-18 16:14:31
1202
原创 JavaScript：IntersectionObserver 详解与最佳实践
IntersectionObserver 是现代 Web 开发中用于高效检测元素可见性的原生 API，解决了传统滚动检测方案的性能问题。本文深入解析其原理、API 使用及工程实践，涵盖懒加载、无限滚动、曝光埋点等典型场景。详细讲解 Entry 对象、多阈值监听、rootMargin 等高级技巧，强调性能优化与内存管理，并提供兼容性处理方案。通过对比 ResizeObserver 等 API，帮助开发者规避常见陷阱，实现高性能的可见性检测功能。
2025-12-18 15:05:15
1258
原创 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
969
原创 Vite 环境变量配置详解及最佳实践
文章详细介绍了环境变量文件加载优先级、自定义前缀配置（envPrefix）、TypeScript类型支持及多环境管理技巧。重点强调了安全最佳实践：敏感配置应使用无前缀变量并通过process.env访问，避免空字符串前缀导致全量暴露。同时澄清了常见误区，指出环境变量是静态注入无法运行时修改。通过合理使用Vite的环境变量机
2025-12-12 11:46:54
892
原创 ES6 Module 导入导出完全指南：语法、原理与最佳实践
ES6模块系统通过import/export语法解决了传统JS全局污染和依赖管理问题，具有作用域隔离、静态分析和异步加载等优势。核心用法包括：命名导出（多值导出）、默认导出（单值导出）及动态导入（按需加载）。关键特性强调静态结构和实时绑定，最佳实践推荐优先使用命名导出、避免混合模式、合理组织目录结构。开发者需注意扩展名要求、MIME类型声明等细节，遵循"显式优于隐式"的原则，才能编写出清晰高效的模块化代码。
2025-12-11 10:17:25
1197
原创 前端构建工具详解：Vite 与 Webpack 深度对比与实战指南
Vite 与 Webpack 是当前主流前端构建工具。Webpack 功能强大、生态成熟，适合复杂项目和 IE11 兼容；Vite 基于原生 ESM，启动快、热更新迅速，适合现代浏览器的新项目。新项目推荐优先选用 Vite，追求极致开发体验。
2025-12-10 17:11:25
820
原创 JavaScript 中 Map 和 Set 的使用教程与最佳实践
ES6引入了Map和Set数据结构，弥补了Object和Array的不足。Map支持任意类型键值对，保留插入顺序，无原型污染；Set自动去重，快速判断元素存在。与Object相比，Map适合动态键名和大数据操作；与Array相比，Set在去重和查找时更高效。实用场景包括缓存计算、数据统计和双向映射等。最佳实践建议：键非字符串用Map，需要唯一值用Set。注意对象键比较引用，以及序列化问题。性能上，大数据量时Map/Set更优。
2025-12-08 11:29:11
746
原创 JavaScript `Array.prototype.reduce()` 的妙用：不只是求和！
JavaScript 的 reduce() 方法远不止求和功能，它是一个极其灵活的数组高阶函数。本文深入探讨了 reduce 的 10+ 种高级用法，包括模拟 map/filter、数组去重、数据分组、频次统计、扁平化数组、链式操作合并、对象转换等场景。文章强调 reduce 的核心思想是通过单次遍历构建任意类型的累积结果，同时提供了最佳实践建议：在保证可读性的前提下，合理利用 reduce 替代多重遍历操作。掌握这些技巧能显著提升处理复杂数据转换的能力，但需注意避免滥用以保持代码清晰。
2025-12-04 14:05:43
517
原创 类型收窄 vs 类型守卫：TypeScript 中的类型细化机制详解
本文深入解析了TypeScript中类型收窄(Type Narrowing)和类型守卫(Type Guard)的关系与区别。类型收窄是编译器将宽泛类型缩小为具体子类型的过程，而类型守卫是触发收窄的运行时检查逻辑。文章详细介绍了三种类型守卫形式：内置操作符(typeof/instanceof/in)、自定义类型谓词函数和可辨识联合，并通过示例展示了它们如何实现类型收窄。同时澄清了常见误区，指出类型守卫是"手段"，类型收窄是"结果"，二者配合可提升代码类型安全性。最后给出
2025-12-04 10:06:42
784
原创 JavaScript 尾递归（Tail Recursion）详解
JavaScript尾递归是一种特殊的递归形式，递归调用作为函数的最后一步操作。理论上，尾递归可以被优化为循环，避免栈溢出问题。然而，目前主流JavaScript引擎（除Safari外）并未完全实现尾调用优化（TCO）。文章详细介绍了尾递归的概念、优势，以及如何手动将尾递归转换为循环来确保代码安全性。尽管不能依赖TCO，理解尾递归仍有价值，可用于算法教学、函数式编程等场景。最后强调：在JavaScript中，尾递归不等于防栈溢出，生产环境应优先使用迭代方案。
2025-12-03 15:49:32
762
原创 JavaScript 遍历对象与数组的方法详解：优缺点与最佳实践
JavaScript遍历方法精要 JavaScript提供了多种遍历对象和数组的方法，各有优缺点。数组遍历中，for循环性能最优但代码冗长；for...of简洁且支持中断；forEach函数式风格但无法中断；高阶函数map/filter表达力强但内存开销大。对象遍历推荐Object.keys()或Object.entries()，避免for...in的原型链问题。关键实践包括：优先语义化方法、避免forEach处理异步、性能关键路径用for循环、不修改遍历中的数据结构。根据场景选择合适方法，可写出高效可维护
2025-12-02 21:31:32
833
原创 Server-Sent Events（SSE）详解：轻量级服务端推送方案
是一种基于 HTTP 的单向服务器推送技术，允许服务端主动向浏览器客户端持续发送文本数据流。✅标准 Web API：浏览器原生支持对象✅自动重连：断开后自动尝试恢复连接✅轻量简单：比 WebSocket 更易实现，比轮询更高效❌仅支持文本：不能传输二进制数据❌单向通信：只能服务端 → 客户端（不能反向发）💡典型应用：ChatGPT 网页版早期流式回复、实时构建日志、系统状态推送SSE = 简单 + 高效 + 原生支持的服务端推送方案。当你需要从服务端向浏览器持续推送文本数据。
2025-11-14 22:51:17
1319
原创 随笔记：计算机基础及进制计数法
记录一下最近接触的基本的概念，便于想看的时候随时来翻看一下。还是比较重要滴，还是比较重要滴，还是比较重要滴现代计算机是用和来表示的，
2022-11-17 15:59:50
441
1原创 随笔记：重新认识 else if
重新认识else if认识后else if 不是JavaScript这门语言的标准语法，而是社区朋友们根据标准语法自己发明的写法原因：if 或者 else 后面如果只有一行语句的话，是可以省略花括号的(不推荐这样写 ⚠️ )非简写模式...
2022-06-23 12:00:51
327
原创 五一假期：记录一次微信小程序开发流程
记录一次微信小程序开发流程一眨眼就到了2022年的五月一假期了，时光过的是有点快。希望疫情抓紧结束吧，我想过上正常的生活。这几天趁着月底没事，正好有个微信小程序项目，那就拿来练练手吧，好久不写了，刚开始着实有点手生。XXXX微信小程序开发工具：HBuilderX ：官网下载地址：https://www.dcloud.io/微信开发者工具：微信公众平台下载地址：https://mp.weixin.qq.com/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直
2022-05-17 20:43:14
337
原创 随笔记：获取当前页面有多少种类的标签
随笔记：获取当前页面有多少种类的标签实现思路首先，获取当前页面的所有标签使用 document.getElementByTagName(“*”) — HTMLCollection 实时的或使用 document.querySelectorAll(“*”) — NodeList 快照更多差异学习，参考 🔴 红宝书 📖上面获取的结果都是类数组将类数组转换为数组扩展运算符 … 最简单方便的方法es6 Array.from()slice循环–2.0版本 vue.
2022-05-13 10:43:31
489
原创 随笔记：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
586
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人