风茫-优快云博客

原创关于解决VSCode中在JSON文件添加注释出现红色波浪线的问题

摘要：针对uniapp CLI项目中JSON文件添加注释报错的问题，可通过将manifest.json和pages.json关联为jsonc格式解决。在VSCode设置中添加文件关联配置后，即可使用单行(//)或多行(/* */)注释。该方案仅适用于开发环境，生产环境需移除注释。部分工具链可能需要额外配置支持JSONC格式。

2025-11-15 17:36:14 366

原创 env.d.ts 文件工作机制

env.d.ts文件是TypeScript项目的类型声明文件，在编译、开发和构建阶段提供类型支持。它通过定义ImportMeta接口实现与import.meta对象的自动关联：TypeScript会查找该接口并通过接口合并机制将env属性与内置接口合并，从而为环境变量提供类型安全访问。在项目中应用时，该文件能为VITE_APP_PORT等环境变量提供准确的类型提示和检查，避免运行时错误，符合ECMAScript标准和TypeScript规范。

2025-11-15 17:23:43 232

原创 JavaScript中的 “!!“ 是什么语法? 在什么时候使用?

!!是JavaScript中的双重否定运算符，可将任意值转换为布尔值。它将falsy值（如false、0、空字符串等）转为false，truthy值（如true、非空字符串、数组对象等）转为true。典型用法如const isLogin = !!token.value，比传统判断更简洁。适用于状态检查、表单验证和条件渲染等场景，但不推荐用于需要严格类型检查或具体值判断的情况。这种写法在Vue/React中常用于计算属性的布尔值转换，既高效又语义明确。

2025-11-15 17:12:20 403

原创 NodeJS 和 Javascript 之间有什么区别？

Node.js和JavaScript的关系是运行环境与编程语言的关系。JavaScript是一门语言，而Node.js是让JavaScript能在服务器端运行的运行时环境，基于V8引擎。关键区别包括：运行环境不同（浏览器vs服务器）、API差异（DOM操作vs系统级功能）、模块系统不同。Node.js扩展了JavaScript的能力，使其可用于后端开发、文件操作等。两者语法相同但用途互补，通常配合使用实现全栈开发。

2025-11-04 23:28:20 986

原创 Node.js 安装与常用命令详解

摘要：Node.js是基于Chrome V8引擎的JavaScript运行时环境，用于构建高性能网络应用。本文介绍了Node.js的核心特点、安装方法、常用命令、项目结构及常见问题。内容包括通过npm管理依赖包、运行脚本、开发辅助工具（如nodemon）的使用，以及项目初始化流程和版本管理等实用技巧，帮助开发者快速上手Node.js开发。

2025-11-04 23:07:28 950

原创 Node.js是什么？能做什么？

Node.js是一个开源、跨平台的JavaScript运行时环境，基于V8引擎构建，使JavaScript能够用于服务器端开发。其事件驱动和非阻塞I/O模型使其擅长处理高并发和I/O密集型任务，如API服务、实时应用等。核心功能包括构建后端服务、开发全栈应用、创建工具链和实现实时通信。典型应用场景涵盖Web服务、微服务架构和SSR等，但不适合CPU密集型任务。Node.js拥有丰富的npm生态和主流框架支持，使JavaScript成为全栈开发语言。学习路径建议从JavaScript基础开始，逐步掌握核心模块

2025-11-04 22:53:08 587

原创深入理解 TypeScript 中的 `Required＜T＞`：作用、基本使用与实战场景

TypeScript的Required<T>工具类型将对象类型的所有可选属性转为必填属性，确保类型完整性。它通过映射类型实现（[P in keyof T]-?: T[P]），移除?修饰符。典型应用包括数据校验、配置合并和表单提交等场景，可与Partial、Pick等工具类型组合使用，但需注意其仅作用于顶层属性且无运行时检查。与Partial<T>形成互补关系，共同构建更健壮的类型系统，特别适合需要强制完整数据的开发场景。

2025-10-23 17:49:56 1020

原创深入理解 TypeScript 中的 `Partial＜T＞`：作用、用法与实战场景

TypeScript的Partial<T>工具类型可将对象类型的所有属性变为可选，常用于对象更新、可选配置和表单初始值等场景。其实现基于映射类型，通过keyof遍历属性并添加?修饰符。典型应用包括：更新函数参数、可选配置对象和表单初始值。Partial可与其他工具类型组合使用，如Pick选择特定可选字段或DeepPartial处理嵌套对象。但需注意它仅作用于对象属性且不递归处理嵌套结构。掌握Partial能提升类型安全性，使代码更灵活优雅，是处理不完整对象时的实用工具。

2025-10-23 12:06:53 912

原创 Vue3 + Vite 工程化项目环境配置指南

这篇文章介绍了如何搭建一个规范的Vue3+Vite前端项目，主要包括以下内容：使用Vite创建Vue3项目，推荐使用pnpm作为包管理工具安装并配置ESLint进行代码质量检查，包括JavaScript/TypeScript/Vue文件的校验规则安装Prettier实现代码风格统一，并解决与ESLint的规则冲突配置EditorConfig统一编辑器设置，确保团队协作时编码格式一致集成lint-staged和husky，实现Git提交前的自动化代码检查与格式化文章提供了详细的配置文件示例

2025-10-12 17:38:58 1280

原创如何使用 ESLint

ESLint 是现代前端开发中不可或缺的代码质量管理工具，主要解决代码风格不统一、潜在错误和不良编码习惯等问题。它通过加载配置、解析代码为AST、遍历节点并执行规则检查来识别问题，支持自动修复。安装ESLint后，通过配置文件和自定义规则（如禁用console、检查未使用变量等）可统一团队代码风格，提升代码质量。ESLint的执行过程包括初始化、文件解析、规则应用和结果输出，是提升代码健壮性和团队协作效率的关键工具。

2025-10-12 16:26:08 837

原创 VSCode 常用插件总结

本文介绍了VSCode各类实用插件，包括：1）通用类（中文界面、浏览器预览、代码补全等）；2）格式类（代码格式化工具）；3）工具类（代码运行、Git增强等）；4）美化类（主题、图标等）；5）框架类（Vue/React/Tailwind等框架支持）；6）AI编程助手（通义灵码、GitHub Copilot）。这些插件可提升开发效率，改善编码体验，开发者可根据技术栈选择安装。

2025-10-12 03:58:37 997

原创前端截图方案全面解析：html2canvas、dom-to-image、Canvas API 和 MediaRecorder 对比

前端截图技术方案对比摘要本文详细介绍了四种主流前端截图方案：html2canvas、dom-to-image、原生Canvas API和MediaRecorder。其中重点分析了html2canvas的实现，通过示例代码展示了如何将DOM元素转换为Canvas图像，并提供了完整的HTML实现模板，包含样式优化、错误处理等细节。该方案支持大部分CSS样式，能选择特定DOM区域截图，且实现简单，适合大多数Web应用需求。文章还对比了不同方案的优缺点，为开发者选择合适截图技术提供了实用参考。

2025-10-10 11:16:18 617

原创如何使用git add 添加单个文件

使用 git add 添加单个文件时，路径写法取决于当前目录与文件的相对位置。常见场景包括：在项目根目录直接写相对路径（如 git add src/main.js）；在子目录中使用 ../ 表示上级目录（如 git add ../README.md）。路径区分大小写，含空格的文件名需加引号。建议在项目根目录操作以避免路径错误。可通过 pwd 命令确认当前路径。

2025-10-10 10:09:07 396

原创解决 Unexpected lexical declaration in case block 问题

ESLint的no-case-declarations规则禁止在switch语句的case子句中直接使用词法声明（如let、const、function等），因为这会导致变量作用域提升到整个switch块，可能引发意外行为。解决方法是：1）用花括号{}包裹每个含声明的case以创建独立作用域；2）将变量声明移出case外。该规则旨在提高代码安全性，避免作用域污染。

2025-09-22 21:21:57 568

原创 Git 本地仓库分支名和远程仓库分支名不一致时如何提交代码？

摘要：GitLab远程仓库与本地分支名不一致时，Git提供多种解决方案。可通过git push gitlab 本地分支:远程分支推送不同名分支，或使用git branch -m重命名本地分支以保持统一。也可创建本地分支跟踪远程分支（git checkout -b 本地名 gitlab/远程名）。建议先git fetch gitlab查看远程分支列表避免冲突，最终推荐保持本地与远程分支命名一致以便于团队协作。

2025-09-22 21:12:15 577

原创如何在 Gitee（码云）上进行 Pull Request（PR）

摘要：本文详细介绍了在Gitee上进行Pull Request（合并请求）的完整流程。从创建功能分支、推送代码，到发起合并请求、等待审核和最终合并，覆盖了团队协作开发的各个环节。文章提供了具体命令、分支命名规范、提交信息建议等实用技巧，并强调了同步更新本地仓库的重要性。通过清晰的步骤图解和最佳实践建议，帮助开发者高效参与开源项目或团队协作，确保代码质量和可追溯性。核心流程可概括为：创建分支→推送代码→发起PR→团队Review→合并到主干。

2025-09-21 23:55:28 1346

原创标准化的Git 协作流程

本文介绍了基于Feature Branch + PR + Dev Integration + Release模式的Git协作流程。主要内容包括：1）开发流程：从创建功能分支、编码、提交PR到合并至dev分支、测试环境验证，最终发布到生产环境；2）关键操作命令示例；3）分支命名规范和代码审查要求；4）分支管理建议，强调及时清理已合并分支。该模式通过独立分支开发、强制Code Review和自动化CI/CD，实现了安全可控的并行开发，虽然会产生较多分支，但通过规范命名和定期清理可保持清晰。

2025-09-21 17:27:59 902

原创 Git 如何进行多远程仓库管理？

摘要：本文介绍了如何配置Git多远程仓库，实现代码同步到多个平台（如Gitee、GitHub）。内容包括：通过git remote add添加远程仓库；首次推送时-u参数的作用（设置默认上游分支）；分别推送与一键同步的三种方法（别名、多URL配置、自动化工具）；以及常见问题与最佳实践，如查看/修改上游分支、避免误操作等。适用于需要跨平台协作或备份代码的开发者，兼顾灵活性与效率。

2025-09-17 23:16:07 875

原创 JavaScript 事件循环详解

本文深入解析了JavaScript的事件循环机制，通过调用栈、任务队列和微任务队列的协同工作，解释了单线程JS如何实现异步处理。文章详细剖析了事件循环的工作流程，通过代码示例对比了微任务与宏任务的执行优先级和时机，并分析了浏览器与Node.js环境的差异。最后提供了避免UI阻塞和控制执行顺序的实用技巧，帮助开发者更好地理解和应用这一核心机制。

2025-09-10 10:39:47 991

原创 JavaScript 生成器详解

本文介绍了 ES6 引入的生成器(Generator)特性，这是一种可以暂停和恢复执行的特殊函数。生成器通过 yield 表达式实现执行流程控制，支持双向通信，既能产出值也能接收值。文章详细讲解了生成器的基本语法、关键特性(yield、yield*、双向通信)、控制方法(next/return/throw)以及典型应用场景(可迭代对象实现、异步编程、惰性求值)。生成器为 JavaScript 提供了更灵活的控制流方案，特别适合处理异步操作、无限序列等场景。

2025-09-10 10:24:49 867

原创 JavaScript 迭代器详解

本文系统解析了JavaScript中的迭代器(Iterator)机制，包含以下核心内容：迭代器协议要求对象实现返回{value, done}的next()方法；可迭代协议通过[Symbol.iterator]使对象支持for...of遍历。文章详细介绍了数组、字符串等内置可迭代对象，以及迭代器在展开运算符、解构赋值等场景的应用。特别讲解了生成器函数作为创建迭代器的便捷方式，演示了yield关键字和无限序列的实现。最后总结了迭代器内存效率高、代码简洁等优势，并指出普通对象默认不可迭代等注意事项。

2025-09-09 23:33:16 821

原创 JavaScript Reflect 对象详解

`Reflect` 是 ES6 引入的一个**内置静态对象**，它提供了一套统一、合理、函数式的 API 来执行 JavaScript 的底层对象操作，是元编程（meta-programming）和 `Proxy` 的核心搭档。本文介绍了Reflect的设计动机，14种方法详解，reciver的作用，以及Reflect配合Proxy实现响应式的核心。

2025-09-09 07:26:49 1333

原创 JavaScript Proxy详解

摘要： Proxy 是 ES6 提供的元编程工具，通过拦截对象操作实现高级功能（如数据响应式、校验等）。其核心是 13 种捕获器（Traps），覆盖对象基本操作：数据操作：get/set/deleteProperty 属性控制：has/ownKeys/defineProperty 函数拦截：apply（函数调用）、construct（new 操作）原型与扩展：getPrototypeOf/preventExtensions 元信息拦截：如 getOwnPropertyDescriptor...

2025-09-08 16:06:51 1058

原创 JavaScript Object.defineProperty()详解

📝 摘要： Object.defineProperty() 是 JavaScript 中用于精确控制对象属性的核心方法，允许定义或修改属性的特性（如可写性、可枚举性、可配置性）。它支持数据描述符（value、writable）和访问器描述符（get/set），默认属性不可写、不可枚举、不可配置。 🔹 应用场景：实现私有属性（不可枚举） Vue 2 响应式原理（数据劫持）冻结属性（细粒度控制）局限性：无法监听数组索引变化需逐个定义属性不支持动态添加属性

2025-09-08 15:10:49 749

原创 JavaScript Promise详解

JavaScript Promise 详解：解决回调地狱的利器 Promise 是 JavaScript 处理异步操作的核心机制，它将异步操作封装为对象，通过状态（pending/fulfilled/rejected）管理操作结果。核心特性包括：链式调用：通过.then()/.catch()/.finally()实现清晰流程控制，解决回调嵌套问题状态不可逆：从pending到fulfilled/rejected的单一状态转换

2025-09-08 07:33:44 1469

原创 JavaScript WeakSet详解

摘要： WeakSet 是一种仅存储对象且持有弱引用的集合，核心特性是对象若无其他强引用会被自动回收，避免内存泄漏。与 Set 不同，它不可遍历、无 size 属性，适用于对象标记（如已处理状态）或 DOM 元素管理。典型场景包括跟踪对象元数据或关联临时信息，尤其适合需自动清理引用的场景。适用条件：无需遍历、仅检查存在性（.has()）、关注内存安全；不适用需存储原始值或查询集合大小的场景。通过弱引用机制，WeakSet 为对象生命周期管理提供了简洁高效的解决方案。（字数：150）

2025-09-08 06:52:49 819

原创 JavaScript WeakMap详解

WeakMap 是一种键值对集合，其键必须是对象且为弱引用（无其他引用时会被自动回收），适合存储对象的私有数据或缓存计算结果。与 Map 不同，WeakMap 不可遍历、没有大小属性和清空方法，主要用途包括：对象私有数据存储（如类私有属性）缓存DOM元素计算（自动清理无用缓存）管理监听器（避免内存泄漏）。核心API仅支持 set()、get()、has() 和 delete()，通过弱引用特性实现内存高效管理。

2025-09-08 06:51:53 728

原创 JavaScript 深入理解Set：从基础到高级用法

本文全面介绍了ES6中Set数据结构的特点与用法。Set作为唯一值集合，具有自动去重、有序存储、高效查找(O(1))等优势。文章详细讲解了Set的创建、增删查API、遍历方法，并与Array进行性能对比，指出Set在去重、集合运算等场景下的优越性。同时介绍了WeakSet的特性及适用场景，解答了常见问题。最后总结了Set的核心价值：简洁高效地处理唯一性问题，特别适合数组去重、集合运算等场景。通过合理使用Set，可以显著提升代码质量和性能表现。

2025-09-08 01:47:41 1474

原创 JavaScript 深入理解Map：从基础到高级用法

JavaScript 中的 Map 是 ES6 引入的高效键值对数据结构，相比 Object 具有以下优势：支持任意类型键（对象/函数等）保持插入顺序可直接获取大小（size）无原型污染频繁操作性能更优主要 API 包括 set/get/has/delete/clear 等，提供 keys()/values()/entries() 三种遍历方式。Map 适合需要动态键、频繁修改的场景，而 Object 更适合静态数据。WeakMap 是特殊版本，键为弱引用对象，适合缓存和 DOM 关联存储。

2025-09-08 01:41:38 944

原创【JavaScript手写篇】函数式编程之手写节流函数

本文介绍了JavaScript中的节流技术(Throttle)，用于优化高频触发事件的性能处理。节流的核心思想是固定时间间隔内最多执行一次函数，避免频繁触发导致的性能问题。文章从定义、原理、实现三个版本（基础时间戳、定时器、双剑合璧版）到实际应用场景（滚动事件、鼠标移动、游戏按键）进行了详细说明，并比较了节流与防抖的区别。最后给出了Vue和React框架中的实践方案，强调要根据场景选择合适实现方式，避免滥用节流影响关键交互体验。

2025-09-07 08:46:45 1245

原创【JavaScript手写篇】函数式编程之手写防抖函数

摘要：防抖（Debounce）是一种优化高频事件触发的技术，通过延迟执行函数，确保在连续触发后只执行最后一次。其核心原理是利用闭包和定时器（setTimeout/clearTimeout）实现延迟与取消。基础实现包括保存this指向和参数传递，进阶版本支持立即执行。典型应用场景包括搜索框自动补全、窗口resize事件和按钮防重复点击。注意事项包括避免滥用、处理内存泄漏风险及正确绑定this指向。与节流（Throttle）不同，防抖侧重“最后一次触发”，而节流保证固定频率执行。在React/Vue中可通过h

2025-09-07 08:46:44 1199

原创【JavaScript手写篇】基础对象操作之深拷贝方案选哪种？

深拷贝方案对比指南根据工程需求可分为5类深拷贝方案：数据纯净化（JSON方案） - 仅保留可序列化数据，适合表单提交和配置处理基础深拷贝 - 通用方案，支持循环引用和Symbol，适合状态管理完整元信息拷贝 - 保留属性描述符，适合框架开发可枚举属性拷贝 - 类似Object.assign行为，只复制可枚举属性迭代式深拷贝 - 避免递归栈溢出，适合大数据处理关键选择因素包括：是否需要保留函数/Symbol等特殊类型是否处理循环引用性能要求（递归vs迭代）元信息保留需求每种方案各有利弊

2025-09-06 07:48:56 745

原创【JavaScript手写篇】基础对象操作之深拷贝实现

深拷贝是前端开发中创建独立对象副本的核心技能。本文系统介绍了深拷贝的定义、与浅拷贝的区别，以及常见实现方法的局限性。重点讲解了手写深拷贝的完整实现方案，包括处理基本类型、对象/数组、Date/RegExp等特殊对象、Set/Map数据结构，以及循环引用问题。通过WeakMap缓存机制解决循环引用，提供了详细的测试用例验证实现正确性。文章还对比了JSON.stringify和structuredClone的不足，最终给出了支持Symbol键、函数等特性的完整代码，帮助开发者全面掌握这一关键技能。

2025-09-06 06:57:06 853

原创【JavaScript手写篇】基础对象操作之浅拷贝实现

JavaScript浅拷贝是创建新对象并复制原对象属性的过程，对基本类型拷贝值，对引用类型拷贝地址。常见方法包括展开运算符、Object.assign()、slice()等。手写实现需处理基本类型、对象/数组、可枚举字符串键和Symbol键。浅拷贝仅复制自身属性，不处理继承属性，与Object.assign行为类似但更专注。其核心是区分值拷贝和地址拷贝，掌握浅拷贝是理解对象复制机制和深拷贝的基础。

2025-09-06 05:50:21 339

原创【JavaScript手写篇】基础对象操作之手写 Object.asign()

摘要： Object.assign() 是 JavaScript 中用于对象浅拷贝和属性合并的方法。其核心功能是将源对象的可枚举属性（包括字符串和 Symbol 键）复制到目标对象，并返回修改后的目标对象。手写实现需注意：1）处理 null/undefined 目标对象时抛错；2）转换非对象目标为对象；3）通过 for...in 和 hasOwnProperty 复制字符串键；4）用 Object.getOwnPropertySymbols 复制 Symbol 键；5）跳过 null/undefined 源

2025-09-06 03:49:32 933

原创【JavaScript手写篇】基础对象操作之手写 new 操作符

本文深入解析JavaScript中new操作符的工作原理，并详细演示如何手写实现。new操作符执行四个关键步骤：创建新对象、设置原型链、绑定this并执行构造函数、处理返回值。手写实现需注意：使用Object.create设置原型、正确处理构造函数返回值（对象或基本类型）、进行边界检查。完整版实现通过Object.create(Constructor.prototype)创建对象，用apply绑定this，并优先返回构造函数返回的对象（若为对象类型）。测试案例验证了普通构造函数、带方法构造函数、返回对象/基

2025-09-06 02:46:35 585

空空如也

空空如也