- 博客(54)
- 收藏
- 关注
RSS订阅原创 原生 JavaScript 方法实战指南
平时开发中经常用到各种 JS 方法，但有些细节老是记不住，踩过不少坑。整理了这份笔记，记录一下常用方法的实际用法和注意事项。
2025-09-26 12:03:51
582
原创 JavaScript 沙箱技术实践指南
最近在做微前端项目的时候，遇到了一个棘手的问题：如何安全地执行第三方代码？传统的 iframe 和 eval 方案都有各种问题，于是深入研究了一下 JavaScript 的沙箱技术，踩了不少坑，在这里分享一下经验。做微前端的时候，需要动态加载第三方模块，但是直接 eval 太危险了：传统方案的坑iframe 的各种问题刚开始想用 iframe 搞定：结果发现问题一堆：eval 更危险所以必须找更好的方案。ShadowRealm 是个很有前景的新 API，虽然还在提案阶段，但已经能解决很多问题了
2025-09-26 10:52:51
1286
原创 前端老旧项目全面性能优化指南与面试攻略
核心 Web VitalsLCP (Largest Contentful Paint): 最大内容绘制时间FID (First Input Delay): 首次输入延迟CLS (Cumulative Layout Shift): 累积布局偏移其他重要指标浏览器开发者工具Lighthouse 自动化分析WebPageTest 分析加载性能问题运行时性能问题代码分割与懒加载避免阻塞主线程内存优化2. CSS 优化关键 CSS 提取CSS 优化技巧CSS 加载优化资源加载优化1. 图片优化
2025-09-25 14:31:54
963
原创 前端如何判断用户是否离开当前页面完整指南
推荐组合pagehide（条件性）移动端优先：主要依赖事件现代浏览器：使用 Page Lifecycle API 获得最佳体验数据保存：结合keepalive选项确保请求成功错误处理：添加适当的错误处理和降级方案选择合适的方法组合，能够为用户提供更好的体验，确保重要数据不会丢失。
2025-09-24 10:27:55
666
原创 前端代码规范设计与团队管理指南
/ 软性管理motivation: ["技术分享", "榜样激励", "培训提升"],// 硬性管理enforcement: ["绩效考核", "Code Review必过", "晋升考量"],// 终极手段condition: "多次沟通无效，严重影响团队",action: "考虑团队调整"rules: {// 强制使用团队API封装meta: {docs: {description: '强制使用团队统一的API封装'},return {if () {node,
2025-09-23 15:48:06
1007
原创 优雅的 async/await 错误处理模式指南
本文介绍了优雅处理async/await错误的几种模式，帮助开发者避免冗余的try-catch代码块。传统方式存在代码重复、嵌套复杂等问题，而文中提出的解决方案包括：1）Go语言风格的to()函数模式，将Promise转换为[error, data]元组；2）类型安全的增强版to()函数；3）使用装饰器自动处理错误；4）支持链式调用的错误处理类。这些方法使代码更简洁、可维护性更强，同时保持错误处理的一致性和可靠性。
2025-09-23 11:09:38
1053
原创 一行代码实现深拷贝，别再用 JSON.stringify 了！
首选：现代浏览器的最佳选择：需要异步但功能完整的备选方案自定义函数：需要完全控制的场景避免：除非确定数据结构简单选择合适的深拷贝方案能够让你的代码更加健壮和高效。随着的普及，我们终于可以告别的各种坑了！
2025-09-18 11:03:50
467
原创 前端时间处理与时区处理完整指南
JavaScript 的 对象是处理时间的核心，但它有一些需要注意的特性：时间戳的重要性时区概念与挑战时区基础概念常见时区问题原生 JavaScript 时间处理时间格式化时区转换工具现代时间处理库Day.js - 轻量级解决方案date-fns - 函数式方案Temporal API (未来标准)时区处理最佳实践1. 数据存储策略2. 用户时区检测与设置常见时间场景解决方案1. 倒计时器2. 时间范围选择器3. 定时任务调度性能
2025-09-17 11:52:03
628
原创 TypeScript 中 Interface 与 Type 的深度对比分析
TypeScript 中 Interface 与 Type 的深度对比 TypeScript 中 interface 和 type 都用于定义类型，但存在关键差异： 核心区别： interface 专用于对象类型定义，支持声明合并 type 更灵活，支持联合类型、交叉类型等复杂类型操作 语法对比： interface 使用继承 (extends)，type 使用交叉类型 (&) type 支持计算属性、映射类型等高级特性 interface 天然支持函数重载 适用场景： 使用 interface 定
2025-09-16 14:33:51
1127
原创 前端如何优雅地设计自定义 Hook 及面试指南
前端自定义 Hook 设计与面试指南 本文介绍了 React 自定义 Hook 的设计原则与实践方法。自定义 Hook 是以 use 开头的函数，用于封装可复用的组件逻辑，实现状态管理的解耦和复用。文章阐述了自定义 Hook 的核心设计原则：单一职责、接口一致性和错误处理，并提供了 useLocalStorage 和 useFetch 两个典型实现案例。此外，还总结了面试中展示自定义 Hook 能力的策略，包括准备高质量代码示例、解释设计思路和避免常见错误。通过合理设计自定义 Hook，开发者可以提升代码可
2025-09-16 11:58:21
1216
原创 JSON.stringify 深入与实战指南
JSON.stringify 深入指南摘要 本文全面解析 JSON.stringify 方法，涵盖： 性能对比：与 MessagePack、Protocol Buffers 等序列化方案的基准测试，分析不同场景的适用性 错误处理：循环引用检测、安全序列化实现及验证工具 调试技巧：提供对象分析工具，追踪属性变化和类型转换 最佳实践：根据应用场景（Web API、微服务等）推荐序列化策略 安全防护：处理敏感数据、防范注入攻击的实用方案 包含丰富的代码示例，如错误处理类、性能测试工具和调试分析器，帮助开发者规避常
2025-09-15 13:35:08
1178
原创 JSON.stringify 基础与进阶用法指南
本文全面介绍了JavaScript中JSON.stringify方法的基础与进阶用法。主要内容包括：核心特性（支持复杂数据结构、自动过滤不安全类型）、灵活转换方式（replacer函数、白名单模式）、格式化输出（缩进美化）和安全性保障。文章还详细解析了参数设置、特殊值处理、循环引用解决方案和性能优化技巧，并提供了实际应用场景示例。JSON.stringify因其原生支持、高性能和标准兼容性，成为数据序列化的首选工具，适用于前端开发、API交互和数据存储等多种场景。
2025-09-15 13:34:05
1334
原创 前端组件优雅设计与面试指南
前端组件优雅设计与面试指南摘要 本文系统介绍了前端组件设计的核心原则与实践方法，帮助开发者提升组件设计能力并应对技术面试。主要内容包括： 组件设计核心原则：强调SOLID原则应用，特别是单一职责与开放封闭原则，提出可复用性、可维护性等六大组件设计标准 设计思路与架构：提供组件设计流程模板，从需求分析到文档编写的完整路径，展示接口设计中的Props和Events规范 技术实现要点：结合Vue3 Composition API，演示搜索组件的响应式数据管理、计算属性应用和防抖处理等最佳实践 面试准备：包含组件设
2025-09-15 10:25:32
1569
原创 Vue-Ellipse-Progress 使用指南
🎨 高度可定制的圆形进度条📊 支持多种数据展示格式🎬 平滑的动画效果🎯 支持多个进度线🌈 丰富的颜色配置📱 响应式设计⚡ 轻量级，性能优秀使用angle-- 从顶部开始 -->/>size?: number;thickness?: number;: number;color?emptyColor?: string;lineCap?angle?: number;clockwise?: 1 | -1;animation?dot?}>;easing?
2025-09-12 14:01:00
1156
原创 有趣的 npm 包：vite-auto-i18n-plugin 完整学习指南
是一个前端自动翻译插件，支持所有编译成 JS 的前端框架（例如 Vue2/3 和 React）。无需修改源码，通过多种翻译服务，一键轻松实现多语言支持！name: '我的翻译器',from=${import {name : '我的翻译器' , fetchMethod :(str , fromKey , toKey , _separator) => {} , interval : 1000 , // 接口触发间隔 });import {
2025-09-11 14:11:20
1302
原创 用户疯狂点击按钮，如何确保你的函数只执行一次
在前端开发中，用户的疯狂点击行为会导致以下问题：示例问题代码：🔧 解决方案概览方案适用场景优点缺点防抖搜索输入、表单验证延迟执行，减少执行次数可能延迟用户操作节流滚动事件、按钮点击控制执行频率仍会执行多次状态锁API 请求、异步操作精确控制，性能好需要手动管理状态按钮禁用表单提交用户体验直观可能影响交互体验Promise 管理复杂异步流程状态管理清晰代码复杂度较高AbortControllerHTTP 请求可以
2025-09-11 10:59:25
1134
原创 把 DeepSeek 变成“多功能助理”：一套可落地的使用方法
这篇文章系统介绍了如何将DeepSeek AI打造成高效的多功能助理，提出了可落地的使用方法框架。主要内容包括：明确AI的特定角色定位（如技术裁判、需求拆解员等）；建立上下文资产包提升输入质量；详细列举代码、产品、文档等场景下的具体应用模板；设计度量指标评估效果；指出常见误区并提供改进方案；最后给出三天快速启动计划和持续迭代建议。强调通过结构化思考和标准化模板，将AI作为"机械放大"工具，而保留人的决策权，实现人机协作效能最大化。
2025-09-05 11:20:39
1005
原创 Vue 3 `v-memo` 指令使用指南
Vue 3的v-memo指令是一种精准优化渲染性能的工具，它通过声明依赖数组来跳过不必要的子树diff过程。当所有依赖值在更新时保持浅层相等时，整个子树会被复用，避免虚拟DOM比较、指令执行和属性patch等开销。该指令适用于大块静态内容、图表包装、非激活面板等场景，能显著减少递归深度和GC压力。使用时需注意依赖稳定性、子树规模和命中率，建议与computed、组件拆分等优化手段配合使用。性能收益与子树规模成正比，适用于节点数较多且更新频率低的场景。
2025-09-05 10:43:37
1243
原创 HTML + CSS 创建图片倒影的 5 种方法
本文介绍了5种使用HTML和CSS创建图片倒影效果的实现方法，包括-webkit-box-reflect、伪元素+翻转、伪元素+遮罩、SVG复制+渐变遮罩和Canvas绘制。每种方法在代码量、兼容性、动态适配和可控性方面各有特点：-webkit-box-reflect最简单但仅限WebKit内核；伪元素+翻转是通用推荐方案；伪元素+遮罩可实现更自然的渐隐效果；SVG适合复杂视觉效果；Canvas则提供像素级控制。文章对比了各方法的优缺点，并给出了选择建议，帮助开发者根据不同场景选择最佳方案。
2025-09-04 15:39:56
1291
原创 AI 的发展对前端的影响与机遇
AI技术正在深刻重塑前端开发，主要影响体现在开发流程自动化、交互范式升级和架构革新。大模型能力提升使自然语言驱动开发成为可能，Web平台硬件加速支持浏览器端推理，推动前端向"意图捕获"和智能交互转型。开发流程中，需求原型、组件搭建等环节可通过AI生成初稿后人工优化；代码生成效率提升30-60%，但需建立规则护栏确保质量。新架构呈现分层特点：从意图解析到AI能力调用，再到结果可视化。前端角色从基础实现转向AI编排者，需掌握Prompt工程、边缘计算等新技能，主导智能交互协议设计。典型应用场
2025-09-04 13:11:44
848
原创 摒弃 `for` 循环，让 JavaScript 代码更丝滑
摘要：现代 JavaScript 迭代方法优化指南 本文系统介绍了如何用现代 JavaScript 迭代方法替代传统 for 循环，提升代码质量。核心观点包括： 传统 for 循环存在噪音变量、易越界、可读性差等问题，推荐优先使用声明式方法 数组迭代方法家族（map、filter、reduce等）各司其职，可组合使用 for...of 支持可迭代对象，比索引式 for 更语义化 对象遍历推荐 Object.keys/values/entries 构造数组可用 Array.from 等现代方式 函数式组合和小
2025-09-04 13:05:37
1579
原创 不要再用 Math.random()！用这个 API 做到真随机
/ Math.random() 的问题演示console.log('连续调用 Math.random():');i < 5;i++) {// 输出示例：// 看起来很随机，但实际上是可预测的！现代浏览器提供了，其中的方法能够生成密码学安全的随机数。// 浏览器兼容性检查console.log('✅ 支持 Web Crypto API');} else {console.log('❌ 不支持 Web Crypto API');特性Crypto API随机性质伪随机真随机安全性。
2025-09-04 11:27:31
615
原创 Vue 3.5 重磅更新：响应式 Props 解构，让组件开发更简洁高效
在 Vue 3.5 之前，如果我们想要在组件中解构 props 并保持响应性，需要使用toRefs()或其他响应式 API。而现在，Vue 3.5 允许我们直接在中进行解构，同时自动保持响应性！
2025-09-04 11:26:27
1037
1
原创 12个移动端常见问题解决方案
本文总结了12个移动端开发中的常见问题及解决方案，包括：响应式布局适配、点击延迟、iOS兼容性、WebView性能优化、输入框聚焦问题等。针对每个问题，提供了具体的代码实现方案，如使用媒体查询、FastClick库、硬件加速、Intersection Observer API等技术手段。这些方案能有效解决移动端开发中的布局、性能、交互等痛点问题，帮助开发者提升应用质量和用户体验。
2025-09-04 11:26:03
494
原创 Vue 3 useModel vs defineModel：选择正确的双向绑定方案
Vue 3 中实现双向绑定的两种主要方案对比：defineModel 是 Vue 3.4+ 推荐的官方方案，作为编译时宏无需导入，语法简洁且类型安全；useModel 来自 VueUse 库，功能更丰富但需要运行时导入。defineModel 适合简单场景和新项目，性能更优；useModel 则提供更多高级选项，适合复杂需求或低版本 Vue。开发者应根据项目需求选择，新项目推荐优先考虑 defineModel。
2025-09-02 17:51:42
1254
原创 Vue.js 中深度选择器的区别与应用指南
Vue深度选择器对比指南 Vue中深度选择器用于穿透scoped样式限制，不同版本支持不同语法： 1️⃣ >>> (Vue2早期，已废弃) 2️⃣ /deep/ (Vue2，已废弃) 3️⃣ ::v-deep (Vue2.6+) 4️⃣ ::v-deep() (Vue3推荐) 5️⃣ :deep() (Vue3.2+最新语法) 最佳实践： ✔️ Vue3项目使用:deep() ✔️ 添加父级类名限定作用域 ✔️ 避免全局样式穿透影响性能 适用于修改第三方组件样式、子组件特定元素等场景，注意
2025-09-02 17:46:04
1099
原创 async/await 到底要不要加 try catch？
是否使用 try-catch 处理 async/await 错误需根据具体场景判断。关键原则是在适当位置以恰当方式处理错误。需要错误恢复、日志记录、资源清理或顶层入口时，应使用 try-catch；中间层函数可让错误向上传播，有统一错误处理机制时也可省略。对于简单错误处理，.catch() 可能更简洁，而纯数据转换函数通常无需 try-catch。最佳实践是区分不同场景，避免不必要的错误捕获，同时确保关键错误得到处理。
2025-09-02 17:30:51
722
原创 Vue 3.5 重磅新特性：useTemplateRef 让模板引用更优雅、更高效！
Vue 3.5 引入的 useTemplateRef 优化了模板引用操作，提供了更简洁的API和更好的类型安全。相比传统ref方式，它解决了类型推断复杂、生命周期依赖等问题，同时提升了性能。文章详细介绍了其基础用法（DOM元素和组件引用）、优势（类型安全、性能优化）以及与传统方式的对比，并提供了实际应用示例。这个新特性让Vue开发者在处理模板引用时能编写更优雅、高效的代码。
2025-09-02 17:14:01
1371
原创 移动端 H5 rem 适配的数学逻辑
移动端H5 rem适配基于数学比例缩放原理，通过动态计算根元素字体大小实现响应式布局。核心公式为：html font-size = (设备宽度/设计稿宽度) × 基准值（如100px）。设计稿中的px值转换为rem只需除以基准值。实现时需JavaScript动态计算根字体大小，配合CSS预处理器简化单位转换。该方法能保持设计稿比例，适配各种屏幕尺寸，但需注意1px边框、文字大小等特殊处理。通过这套数学逻辑，可构建灵活、可维护的移动端适配方案。
2025-09-02 16:58:20
802
原创 Vue指令完整指南
Vue指令指南摘要 Vue指令是带有v-前缀的特殊属性，用于响应式地操作DOM。本文介绍了Vue内置指令的使用方法： 文本指令：v-text更新文本内容，v-html更新innerHTML（需注意XSS风险） 条件渲染：v-show切换display属性，v-if/v-else-if/v-else条件性渲染元素 列表渲染：v-for遍历数组/对象/数字，必须提供唯一key属性 事件处理：v-on或@监听事件，支持修饰符(.stop/.prevent等)和按键修饰符(.enter等) 属性绑定：v-bind或
2025-08-27 10:01:42
346
原创 Barba.js 完全使用指南
Barba.js 是一个轻量级(仅7KB)的JavaScript库，用于创建多页面网站间的流畅转场动画。它通过拦截页面导航、异步加载内容并提供生命周期钩子，让传统网站拥有SPA般的用户体验。本文涵盖从基础到进阶的使用指南，包括核心概念、安装方法、基础淡入淡出示例、GSAP动画集成，以及Vue3兼容性说明。特别适合企业官网、博客等静态站点，但不推荐纯SPA项目使用。通过简单的API和丰富的动画库支持，Barba.js能快速实现60fps的丝滑页面过渡效果。
2025-08-26 17:03:22
1301
原创 Promise.all 速查与扩展实战
本文是一份面向实战的Promise.all使用指南，重点介绍了其核心概念、常见用法与扩展技巧。主要内容包括： Promise.all核心特性：并行执行、顺序保持、错误短路机制 常见场景实践：与async/await的正确搭配、错误收集处理 高级控制技巧：并发限制实现、超时处理、请求取消、重试机制 对比分析Promise相关方法：allSettled/any/race的适用场景 TypeScript类型友好用法和实用工具函数 文章提供了大量可直接使用的代码示例，包括并发控制(pLimit)、超时处理、请求重试
2025-08-20 18:18:28
1083
原创 JavaScript 性能优化实战（易懂版）
这篇文章摘要： JavaScript性能优化实战指南，涵盖核心优化策略与代码示例。主要内容包括：1）关键指标监控（LCP/INP/CLS）与性能预算设定；2）网络层优化技术（预加载/CDN/Service Worker缓存策略）；3）构建优化（代码分割/按需加载/依赖瘦身）；4）运行时优化（事件节流/长任务切片/内存管理）；5）DOM渲染优化技巧；6）Web Worker并行计算等。提供可直接落地的代码片段，如性能监控上报、资源预加载、Service Worker实现、防抖节流函数等，并强调测量优先的优化方
2025-08-20 17:21:04
1076
原创 JavaScript 中如何实现大文件并行下载
摘要：JavaScript实现大文件并行下载方案 本文介绍了一种前端实现大文件并行下载的技术方案，通过分片下载和并发请求提升下载速度。核心原理包括：将文件分割为多个片段，并发请求各片段，最后合并为完整文件。适用于视频、安装包等大文件下载场景，支持断点续传和错误重试。文章提供了完整实例代码，涵盖分片区间计算、并发控制、分片合并等关键步骤，并介绍了错误重试和基于localStorage/IndexedDB的断点续传实现方案。这种方案可显著提升大文件下载效率和稳定性，适合云盘、网盘等需要处理大文件下载的应用场景。
2025-08-11 18:17:00
1062
原创 JavaScript 中的并发控制详解
本文将详细介绍JavaScript中的并发控制技术。并发控制通过限制同时执行的异步任务数量，可有效解决大量并发请求导致的服务器压力、浏览器卡顿等问题。文章首先通过直观的流程图和时间线演示，展示了6个任务在并发限制为2时的执行过程。随后将介绍多种实现方法，包括简单并发限制、高级并发池、队列控制以及第三方库使用等方案，并分析其实际应用场景、性能对比和常见问题解决方案。最后提供最佳实践建议，帮助开发者根据需求选择合适的并发控制策略。
2025-08-07 10:59:57
465
原创 Git Cherry-Pick 指南
Cherry-pick 是 Git 中一个强大的功能，它允许你从一个分支中选择特定的提交（commit），并将其应用到当前分支上。这就像从果树上挑选成熟的樱桃一样，只选择你需要的部分。🔧 紧急修复的跨分支应用🎯 选择性功能合并🔄 维护多个版本分支🚀 部分功能的快速部署谨慎使用：优先考虑 merge 和 rebase保持追溯：使用 -x 选项记录来源处理冲突：仔细解决并测试团队协作：与团队成员充分沟通。
2025-08-06 19:10:44
1102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人