前端
关注
分享
扫一扫
文章平均质量分 73
关于前端的技术文章都在这里
YahirQ
你好，我是YahirQ，一个写了十年代码的“老”程序员。
我的技术地图有点广：以 .NET 为根据地，也曾远征 Java、C++、Python 的江湖，并用 Vue、SQL 和 iOS 开发过不少应用。这些经历让我明白，技术之道，万变不离其宗。
而现在，我选择了一条“向下扎根”的道路——嵌入式开发。我着迷于代码如何直接驱动硬件，享受在资源受限的环境下创造价值的乐趣。这对我而言，是一个全新的起点。
在这里，我将以一个“资深新手”的视角，记录并分享从传统软件到嵌入式世界的转型之路。我的文章会力求通俗易懂，既有硬核的代码分析，也有踩坑填坑的实战记录。期待能与志同道合的你一起学习，共同成长！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
为什么你的 SPA 网址必须包含 `#`？—— 前端路由 Hash 模式深度解析
本文深入解析了单页应用(SPA)中URL必须包含#的原因及其技术原理。主要内容包括：现象分析：对比Hash模式(#/path)和直接路径访问的不同结果HTTP协议基础：URL结构中Hash部分不会被发送到服务器Hash模式原理：利用window.location.hash和hashchange事件实现前端路由index.html的作用：作为SPA的唯一入口文件两种模式对比：Hash模式兼容性好但URL不美观，History模式需要服务器配置迁移方案：如何从Hash模式切换到History模式原创 2026-05-07 18:46:56 · 456 阅读 · 0 评论 -
表单验证 trigger 中 blur 与 change 的区别与最佳实践
本文探讨了表单验证中 blur 与 change 触发器的区别与应用场景。blur 在元素失去焦点时触发，适合必填字段验证；change 在值变化时触发，适合格式校验和实时反馈。最佳实践推荐组合使用 ['blur', 'change']，兼顾用户体验与数据准确性，同时需注意性能优化。不同表单框架配置方式类似，核心思想一致。合理选择触发器能提升表单交互友好度，降低用户挫败感。原创 2026-04-02 20:21:15 · 441 阅读 · 0 评论 -
深入解析前端页面在 Safari 与 Chrome 浏览器中的差异及解决方案
本文全面分析了Safari与Chrome浏览器在前端开发中的核心差异及解决方案。文章从两大浏览器的技术路线分歧入手，系统梳理了它们在渲染引擎、JavaScript引擎、版本更新节奏等方面的根本性差异。针对CSS属性支持、盒模型、Flexbox/Grid布局、视口单位vh等常见兼容性问题，提供了详细的代码解决方案和最佳实践。在JavaScript方面，重点分析了新API支持滞后、日期解析严格性等关键差异，并给出了包括Polyfill、条件判断、降级处理等系统性兼容方案。原创 2026-03-31 20:00:10 · 1320 阅读 · 0 评论 -
JavaScript 中 == 和 === 的区别
JavaScript 中的 == 和 === 运算符用于比较值是否相等，主要区别在于类型转换。=== 是严格相等，不进行类型转换，若类型不同直接返回 false。== 会先进行类型转换再比较，如将布尔值转为数字、字符串转为数字等。建议优先使用 === 以避免意外类型转换导致的错误，仅在明确需要类型转换时使用 ==。ES6 的 Object.is() 方法可更精确地比较 NaN 和 ±0 的情况。原创 2026-02-24 22:56:08 · 675 阅读 · 0 评论 -
VSCode 下如何检查 Vue 项目中未使用的依赖？
在VSCode中检查Vue项目未使用的依赖，推荐使用depcheck工具（安装后运行npx depcheck）。也可使用npm-check或安装VSCode插件辅助分析。手动方法包括grep搜索和Node.js脚本检查。Webpack项目可配置webpack-bundle-analyzer。建议定期检查，删除前测试验证，注意间接引用和全局注册的情况。depcheck是最简单直接的方法，能识别大多数使用场景。原创 2026-02-01 21:51:08 · 613 阅读 · 0 评论 -
Vue 中如何修改地址栏参数并重新加载？
Vue 中修改地址栏参数并重新加载的常用方法包括：1) 使用 Vue Router 的 replace 或 push 方法更新查询参数；2) 在 Composition API 中使用 useRouter；3) 监听 $route.query 变化自动重载数据；4) 封装可复用的工具函数。最佳实践建议使用 replace 避免历史记录堆积，配合防抖处理频繁更新，并通过扩展运算符保留现有参数。根据需求可选择仅更新参数、组件级重载或完整页面刷新等不同方案。原创 2026-02-01 21:30:22 · 376 阅读 · 0 评论 -
[高质量代码分享] JavaScript 空值判断（工具）函数
本文分享了一个高质量的JavaScript空值判断工具函数，该函数具有以下特点： 全面支持多种数据类型判断，包括基本类型、对象类型和特殊内置对象 提供灵活配置选项，允许自定义空值判断逻辑 采用分层检查机制，先处理基本类型再处理复杂对象 特别处理了类实例的判断逻辑，可配置是否检查类实例属性 包含详细的注释和类型定义，便于维护和使用 该函数适用于需要精确空值判断的场景，相比简单的null/undefined检查更加全面可靠。原创 2026-01-26 22:54:08 · 845 阅读 · 0 评论 -
Vue 中的 keep-alive 组件
Vue的keep-alive组件是一个内置抽象组件，用于缓存非活动组件实例而非销毁它们。主要功能包括保留组件状态、避免重复渲染，并提供activated和deactivated两个特殊生命周期钩子。可通过include、exclude和max属性配置缓存规则，常与Vue Router结合使用实现路由级缓存。其内部采用LRU算法管理缓存，适用于标签页切换、表单数据保留等场景。使用时需注意组件必须具有name属性，并合理设置缓存上限防止内存泄漏。Vue 3中基本功能保持不变，但在语法细节上有所调整。原创 2026-01-24 14:10:53 · 378 阅读 · 0 评论 -
Vue 中 keep-alive 组件的生命周期钩子
Vue 的 keep-alive 组件提供了缓存功能，通过 activated 和 deactivated 两个特殊生命周期钩子管理组件状态。当组件被缓存时触发 deactivated，重新激活时触发 activated。文章详细介绍了其基本用法、执行顺序、与路由结合的方式及注意事项，并对比了 Vue 3 中的变化。合理使用这些钩子可以优化性能、管理资源，同时避免内存泄漏问题，特别适合需要频繁切换但保持状态的组件场景。原创 2026-01-24 12:13:48 · 585 阅读 · 0 评论 -
Vue 中的计算属性（computed）
Vue计算属性(computed)是处理响应式数据逻辑的强大特性，具有缓存机制，只在依赖数据变化时重新计算。摘要要点：1)计算属性通过getter/setter定义，可依赖多个数据源；2)与方法相比，计算属性有缓存且自动追踪依赖；3)与watch相比更适合同步计算；4)常用于购物车统计、列表过滤等场景；5)最佳实践包括保持纯函数、避免复杂计算和命名清晰；6)Vue3组合式API中通过computed()函数使用。计算属性能高效处理数据派生逻辑，提升应用性能。原创 2026-01-18 12:46:58 · 547 阅读 · 0 评论 -
Vue 中的生命周期钩子
Vue 组件的生命周期分为创建、挂载、更新和卸载四个主要阶段。创建阶段包含 beforeCreate（无法访问数据）和 created（可访问数据但无DOM）；挂载阶段有 beforeMount（模板编译完成）和 mounted（DOM已渲染）；更新阶段包含 beforeUpdate（数据变化但DOM未更新）和 updated（DOM已更新）；卸载阶段是 beforeUnmount（清理资源）和 unmounted（组件销毁）。Vue 3新增了调试钩子 renderTracked/renderTrigger原创 2026-01-18 12:33:13 · 661 阅读 · 0 评论 -
JavaScript 字符串拼接
JavaScript 提供了多种字符串拼接方法，包括加号运算符、concat()方法、数组join()以及ES6的模板字符串。其中模板字符串功能最强大，支持多行文本和表达式插入，是现代开发首选。对于大量拼接操作，推荐使用数组join()以获得更好性能。开发者应注意不同类型拼接时的隐式转换问题，并根据场景选择合适方法。模板字符串因其可读性和功能性成为最佳实践，特别适合构建动态内容和HTML模板。原创 2026-01-16 08:00:00 · 771 阅读 · 0 评论 -
CSS 响应式布局 RWD （Responsive Web Design）
CSS响应式布局（RWD）通过流体网格、媒体查询和弹性媒体实现跨设备适配。核心方法包括：使用百分比布局替代固定像素，通过媒体查询针对不同屏幕尺寸应用样式，确保媒体元素自适应。关键技术涉及视口设置、断点策略（推荐移动优先）和现代布局技术（Flexbox/Grid）。实用技巧包含响应式字体、元素显隐控制和导航适配。最佳实践强调性能优化、多设备测试和渐进增强。完整示例展示了从移动端到桌面端的响应式结构，实现一套代码适配多种设备。原创 2026-01-13 10:02:21 · 310 阅读 · 0 评论 -
JavaScript 深拷贝方案全解析：从兼容性到健壮性的优先级指南
本文全面解析JavaScript深拷贝方案，按照可靠性优先级推荐：1) 生产级首选Lodash的_.cloneDeep()，处理各类边界情况最完善；2) 无依赖加固递归实现，修正循环引用等关键缺陷；3) 现代浏览器原生structuredClone()API；4) 仅适用于简单数据的JSON方法。文章对比各方案优缺点，提供兼容性指南和决策建议，强调避免循环引用等常见陷阱，帮助开发者根据项目需求选择最适合的深拷贝方案。原创 2026-01-03 22:48:45 · 784 阅读 · 0 评论 -
JavaScript 中的枚举
JavaScript没有原生枚举类型，但可通过多种方式模拟：1) 使用对象常量实现简单枚举；2) 通过Object.freeze()防止修改；3) 用数字模拟数字枚举；4) 使用Symbol确保唯一性；5) 在TypeScript中使用原生enum语法；6) 通过Map实现现代枚举；7) 用类实现带方法的复杂枚举。最佳实践包括：简单场景用冻结对象，需要唯一性用Symbol，需要方法用类。对于完整枚举功能，推荐使用TypeScript。原创 2025-12-26 09:00:00 · 234 阅读 · 0 评论 -
前后端分离架构中，Node.js的底层实现原理与线程池饥饿问题解析
本文分析了Node.js在Vue+Java/.NET架构中的实现原理与线程池饥饿问题。Node.js作为BFF或SSR层，通过V8引擎和libuv库实现事件驱动和非阻塞I/O模型，其单线程事件循环配合4线程的线程池处理高并发请求。但文件I/O、加密等操作可能导致线程池饥饿，使响应延迟。解决方案包括：增加线程池容量、优化代码使用流处理、架构上卸载CPU密集型任务到后端，以及实施监控。在整体架构中，Vue负责UI，Node.js处理高I/O并发，Java/.NET处理核心业务，各技术栈优势互补。原创 2025-09-09 21:04:05 · 858 阅读 · 0 评论 -
如何判断当前web页面是在钉钉内部打开的？
摘要：判断Web页面是否在钉钉打开可通过分析User-Agent字段（含"DingTalk"标识），区分手机版（含移动设备标识）和电脑版（含桌面系统标识）。还可检测钉钉JSAPI或内核版本（如Android版内核69）。备用方案包括URL参数分析或对接钉钉开放平台。需注意隐私模式和内核兼容性问题。（149字）原创 2025-06-07 10:06:39 · 1315 阅读 · 0 评论 -
npm 使用国内镜像
cmd 全局设置npm使用淘宝镜像。查看npm已注册的镜像。原创 2024-10-24 14:20:15 · 292 阅读 · 1 评论 -
Vue 文件代码组织最佳实践
通过以上组织方式，你的Vue组件将具有更好的可读性、可维护性和团队协作性。：将复杂逻辑提取到组合式函数或mixins中。：如果组件超过300行，考虑拆分子组件。：用注释将不同功能区块分开。：将相关功能代码放在一起。/* 样式部分 */原创 2025-05-08 17:10:46 · 519 阅读 · 0 评论 -
vue 中如何使用region？
在 Vue 文件中，你可以使用 **`//#region`** 和 **`//#endregion`** 注释来创建可折叠的代码区块（类似于 C# 的 region）。这可以显著提高大型 Vue 组件的可读性。原创 2025-05-08 22:38:25 · 872 阅读 · 0 评论 -
vs code 如何一键折叠 Vue 文件的代码？
打开命令面板 (或搜索 “Open Keyboard Shortcuts (JSON)”添加以下配置："key": "ctrl+alt+0", // 或你喜欢的组合键。原创 2025-05-08 17:18:48 · 1604 阅读 · 0 评论 -
JavaScript 中的 if (object) 语句解释
这是一种检查对象是否为"真值"(truthy)的条件语句。原创 2025-04-12 11:11:40 · 460 阅读 · 0 评论 -
js 判断变量是否不是空字符串(含空格与中文空格)
js判断是否是空字符串，空格或者中文空格也算空字符串。原创 2025-02-25 13:06:36 · 372 阅读 · 0 评论