- 博客(368)
- 资源 (13)
- 收藏
- 关注
RSS订阅原创 为 fnm 配置镜像源（附：fnm 安装教程）
摘要：本文针对fnm工具安装Node.js时遇到的下载问题，提供了详细解决方案。主要问题源于国外服务器访问慢，建议切换至国内镜像源（如清华大学镜像站）。
2026-01-01 02:06:56
276
原创 nodejs：nvm vs fnm 详细对比
Node版本管理工具对比指南：nvm vs fnm fnm作为新一代Node版本管理工具，在性能、易用性和跨平台支持方面全面超越传统nvm。
2026-01-01 01:01:13
828
原创 使用 Docker 的 Node.js（附：三种 Node.js 环境详细对比）
本文介绍了在Docker容器中运行Node.js应用的核心概念和优势。与传统本地安装相比，Docker化的Node.js具有环境一致性、多版本共存和项目隔离等优点。
2026-01-01 00:53:55
550
原创 已有 WSL 环境的情况下，在 Windows 本地安装 Node.js（附：VSCode 的三种工作模式）
本文介绍了在已有WSL环境下如何在Windows本地安装Node.js的三种方案：1)直接在Windows安装Node.js（推荐）；2)共享WSL中的Node.js；3)双环境共存灵活切换。详细说明了每种方案的安装步骤、验证方法和配置技巧，包括环境变量设置、编辑器配置等。同时提供了VSCode的三种工作模式（双窗口独立、单一窗口切换、多文件夹工作区）以及常见问题解决方案。最佳实践建议根据项目类型选择环境，前端项目用Windows本地，需要Linux特性的项目用WSL，两个环境可并行工作。
2026-01-01 00:34:46
724
原创 VSCode 终端快捷键
VSCode终端提供多种快捷键提升效率：Tab键自动补全路径/命令，Ctrl+Space触发建议；方向键浏览建议列表，Enter确认选择。常用操作包括Ctrl+`切换终端显示，Ctrl+Shift+P打开命令面板。建议安装zsh插件或TabNine扩展增强补全功能，并在设置中启用自动建议。历史命令可通过↑键快速调用，Shift+Enter输入多行命令。这些快捷键组合能显著减少鼠标依赖，优化终端操作体验。
2026-01-01 00:13:33
182
原创 在 Vue 3 的 setup() 函数中，this 是 undefined。
Vue3的setup()函数中this为undefined，这是Composition API的重要改变。
2025-12-31 11:29:17
205
原创 Vue：useSlots 和 useAttrs 深度解析
Vue3 Composition API中的useSlots和useAttrs是处理组件插槽和属性的关键工具。
2025-12-30 15:31:11
235
原创 Vue：defineProps、defineEmits、defineExpose 深度解析
本文深度解析Vue3 <script setup> 语法中的三个核心编译器宏：defineProps、defineEmits 和 defineExpose。
2025-12-30 15:06:42
241
原创 Vue：Props 和 Emits 对比总结
Props与Emits对比摘要 核心区别：Props实现父→子单向数据流（用于配置），Emits实现子→父事件通知（用于交互）。 特性对比： 数据流：Props向下传递只读数据，Emits向上触发事件 验证：Props支持类型/默认值验证，Emits无内置验证 Vue3优化：均支持TS类型推断，Composition API提供defineProps/defineEmits 使用场景： Props：初始化配置/展示数据 Emits：用户交互反馈/状态变更通知 最佳实践： 遵循单向数据流原则 为复杂数据添加验
2025-12-30 14:54:19
791
原创 Vue 3 中编写单文件组件（SFC）的编译时语法糖：＜script setup＞
Vue3的<script setup>语法糖简化了Composition API的使用，主要特点包括：自动暴露顶级变量给模板、组件自动注册、使用defineProps/defineEmits声明属性和事件、通过defineExpose暴露方法。它显著减少了样板代码，支持TypeScript类型推断和顶层await，使组件开发更简洁高效。相比传统Options API，<script setup>代码量减少约30%，更适合现代JavaScript开发模式，是Vue3项目的推荐写法。
2025-12-30 14:42:10
645
原创 Vue 3 Composition API 中创建响应式数据的两个核心 API（ref 和 reactive）
Vue3 Composition API 中，ref 和 reactive 是创建响应式数据的核心 API。ref 可以包装任何类型的值，通过 .value 访问（模板自动解包），适合基本类型和需要重新赋值的变量；reactive 专为对象/数组设计，实现深层响应式，适合复杂数据结构。主要区别在于数据类型支持、访问方式和重新赋值能力。实际开发中，建议基本类型用 ref，复杂对象用 reactive，组合函数返回多值时优先使用 ref 以便解构。两者性能相当，选择应基于代码组织和开发体验。
2025-12-30 14:25:56
532
原创 Vue2 中 Options API：组织组件逻辑的主要方式
Vue2 Options API 是组织组件逻辑的主要方式，通过 data、methods、computed、watch 等选项定义组件。其优势在于结构清晰、学习成本低，适合中小型组件。但随着复杂度增加，会出现逻辑分散、复用困难等问题。Vue3 的 Composition API 通过逻辑组合解决了这些问题，使相关功能代码更集中，并提供更好的 TypeScript 支持。两者可以共存，开发者可根据项目需求选择适合的方式。
2025-12-30 14:04:06
512
原创 Bash、PowerShell 常见操作总结
本文总结了Bash和PowerShell中常见的目录操作命令。Bash部分包括cd导航、pwd查看路径、目录栈管理(pushd/popd)以及相对路径使用技巧。PowerShell部分涵盖Set-Location(cd)导航、Get-ChildItem(ls)查看内容、目录栈操作和特有的PSDrive功能。两者都支持返回上级目录、主目录和目录历史管理，但PowerShell提供了更丰富的路径处理功能，如跨平台路径操作和访问注册表等特殊存储。文章还对比了两者在路径分隔符、命令分隔符等方面的差异。
2025-12-30 10:37:18
401
原创 文档加密加水印只读分享：WPS/PPT编辑后导出PDF（附：百度网盘分享流程）
PDF和WPS是两种不同的文件格式，PDF用于固定文档展示，WPS用于文档编辑。PDF兼容性强、格式固定，适合分发；WPS可编辑性强，适合创作。两者常配合使用：WPS编辑后导出PDF分享。要将文件设为只读，可通过密码保护、属性设置或转换为PDF/图片。DOCX转PDF时需调整批注显示方式以避免丢失。PPTX可添加水印并通过母版实现全局保护。百度网盘分享需先上传文件，再生成带提取码的链接供他人下载。注意设置有效期和管理已分享内容以确保安全。
2025-12-29 15:55:51
784
原创 19万字498页的《JavaScript高级程序设计第四版》读书笔记完成了！（附：笔记下载链接）
19万字498页的《JavaScript高级程序设计第四版》读书笔记已完成并分享，文档已从docx转换为pdf格式并保留批注。笔记设置了只读权限。下载链接：百度网盘。这份元旦前完成的笔记为JavaScript学习者提供了宝贵的学习资料。
2025-12-29 15:07:43
122
原创 代码编辑器选择建议
WebStorm提供30天免费试用、教育许可和开源许可证等合法免费使用方式，建议避免破解版。HBuilderX适合uni-app和小程序开发，中文支持好但生态较封闭。微信公众号/小程序开发推荐VSCode（插件丰富）配合微信开发者工具（必备），辅以Figma、Git等工具。原生开发选VSCode+微信工具，框架开发（如Taro/uni-app）可搭配对应IDE。团队建议统一工具链，注重协作与自动化。所有工具均需正版，避免安全风险。
2025-12-29 12:08:01
742
原创 JavaScript 静态模块声明（静态分析、动态导入）
JavaScript的静态模块声明（ES6 Modules）要求在代码执行前确定模块依赖关系。核心特点包括：1）导入/导出必须在顶层作用域，不能动态生成；2）支持编译时分析，实现Tree Shaking优化；3）提供循环依赖安全处理。与CommonJS的动态加载不同，ES6模块路径必须静态确定。动态导入（import()）作为补充允许运行时加载。优势包括提前错误检测、更好的代码优化和打包体积缩减。这种设计平衡了灵活性与性能，更适合大型应用开发。
2025-12-29 10:47:54
476
原创 实时集合导致的循环问题
实时DOM集合在循环操作时存在四大问题：1)循环删除元素时因集合实时更新导致漏删；2)重复计算集合长度造成性能损耗；3)索引错位引发逻辑错误；4)并发修改可能产生无限循环。解决方案包括：反向遍历、转为静态数组（推荐Array.from或展开运算符）、使用while循环或querySelectorAll获取静态集合。核心原则是避免直接操作实时集合，优先转换为静态数据后再处理，其中转为数组是最安全可靠的通用方案。
2025-12-29 09:53:10
714
原创 虚拟滚动（Virtual Scrolling）详解
虚拟滚动是一种优化大数据列表渲染性能的技术，通过仅渲染可视区域内容来提升用户体验。其核心原理是动态计算可见范围，只创建和销毁当前视窗内的DOM元素，保持页面中元素数量恒定。相比传统渲染方式，虚拟滚动能显著降低内存占用（从约10MB降至0.1MB）、加快初始渲染速度（从500ms+缩短到50ms内），并保证流畅的滚动体验（60FPS）。该技术适用于聊天记录、社交媒体Feed、大型数据表格等场景，但不推荐用于少量数据或高度不固定的项目。主流框架如React和Vue都提供了成熟的虚拟滚动解决方案。
2025-12-29 09:40:56
688
原创 Array.from() 转换为数组的实际开发场景举例
Array.from()方法在DOM操作中具有重要作用，能够将类数组对象转换为真正的数组。主要应用场景包括：1）安全操作DOM集合，避免实时集合导致的循环问题；2）批量处理元素样式和数据；3）优化大数据量DOM操作性能；4）扩展DOM集合功能，支持数组方法。通过转换为数组，开发者可以更安全、高效地操作DOM，同时获得更清晰的代码结构和更好的性能表现。在实际开发中，当需要对DOM元素集合进行复杂操作时，应优先考虑使用Array.from()进行转换。
2025-12-28 23:34:08
889
原创 实时动态 DOM 节点集合 HTMLCollection 详解（附：NodeList、返回不同集合类型的属性/方法总结、快照 ）
HTMLCollection是动态实时更新的DOM节点集合，每次访问其属性或方法都会触发DOM查询，影响性能。关键特性包括：1）类数组结构但非真正数组；2）实时性导致DOM变化会立即反映；3）只读但可修改元素。与静态快照的NodeList相比，HTMLCollection在循环遍历时存在性能损耗和逻辑陷阱（如删除元素导致集合动态变化）。最佳实践：1）缓存length属性减少查询；2）优先使用querySelectorAll获取静态NodeList；3）将实时集合转为数组操作。快照机制如同时间胶囊，记录创建时
2025-12-28 23:28:10
782
原创 事件委托（Event Delegation）
事件委托是一种优化网页性能的技术，通过利用事件冒泡机制，在父元素而非每个子元素上绑定事件处理程序。这种方法减少了内存占用，提升了响应速度，特别适合处理动态添加的元素。实现时需注意验证事件目标、选择适当的委托层级，并谨慎使用事件阻止。最佳实践是在最近的公共祖先元素上处理事件，同时可使用特定选择器提高效率。事件委托能显著改善页面性能，是现代Web开发中的重要优化手段。
2025-12-28 19:52:48
550
原创 insertAdjacentHTML() 详解
insertAdjacentHTML()是DOM操作中性能优越的方法，支持四种插入位置（beforebegin/afterbegin/beforeend/afterend），比innerHTML更灵活且不会破坏现有内容。它保留了事件监听器和元素状态，兼容所有现代浏览器（包括IE5.5+）。最佳实践包括：追加内容使用beforeend、插入开头用afterbegin，同时需注意XSS防护（转义用户输入）。适用于动态列表、分页加载、实时聊天等场景，是现代Web开发推荐的高效HTML插入方式。
2025-12-28 18:33:00
656
原创 Vue 如何避免 XSS 攻击等常见前端安全问题
Vue.js通过多重机制防范XSS攻击：1.默认转义文本插值内容；2.要求显式使用v-html指令处理HTML；3.自动过滤危险属性值（如javascript:协议）；4.服务端渲染时自动转义内容；5.提供安全开发建议（使用净化库、验证URL等）。Vue3还增强了对动态属性的防护。关键安全原则包括：不信任用户输入、结合内容安全策略(CSP)、对动态内容进行严格验证。开发者需注意，框架提供的防护需要配合良好的安全实践才能构建真正安全的Vue应用。
2025-12-28 17:38:28
740
原创 JavaScript位操作及性能分析
JavaScript位操作在特定场景下可优化性能，但需注意其32位整数转换的特性。常见操作包括：按位与判断奇偶/标志位，按位或快速取整，异或交换变量，非运算替代indexOf检查，位移实现乘除2的幂运算。实用技巧含RGB颜色处理、判断2的幂等。需注意类型转换开销（仅支持±2^31-1范围）、可读性损失及适用场景（二进制处理、性能关键循环）。现代JS引擎已高度优化，建议优先保证代码清晰，仅在必要场景使用位操作。
2025-12-27 00:37:35
885
原创 达夫设备（Duff’s Device）与循环展开优化技巧
达夫设备是一种循环展开优化技术，通过结合switch和while语句处理非固定循环次数，以减少循环控制开销。该技术由Tom Duff在C语言中提出，适用于性能关键场景，但现代编译器已能自动实现类似优化。在JavaScript中使用达夫设备意义有限，因其可读性差且现代JS引擎已具备自动优化能力。JS中更推荐使用内置方法、for...of循环或TypedArray等清晰高效的替代方案。达夫设备作为编程技巧展示仍有价值，但在实际项目中应优先考虑代码可读性和现代优化方法。
2025-12-26 21:19:43
599
原创 JavaScript 常见算法复杂度总结（大O表示法）
本文系统介绍了算法复杂度分析中的大O表示法。主要内容包括：1）时间复杂度等级对比，从O(1)到O(n!)的性能曲线和实例；2）空间复杂度分类；3）常见算法复杂度详解（排序、搜索等）；4）实际应用建议，包括不同数据规模下的算法选择原则；5）JavaScript内置方法复杂度分析。文章强调大O表示法反映算法随规模增长的趋势，实际开发需结合具体场景测试。最后提供复杂度速查表，帮助开发者快速评估算法性能。
2025-12-26 20:29:45
915
原创 JavaScript 从纯解释型演变为 JIT混合型（附：解释型 VS 编译型语言）
JavaScript最初是纯解释型语言，执行速度较慢。现代浏览器引入JIT（即时编译）技术，将JavaScript编译为机器码，显著提升了性能。JIT混合了编译型和解释型的优点：解释器快速启动执行代码，监控器识别热点代码后编译优化，执行时直接运行机器码。这使得现代JavaScript引擎（如V8）的执行速度接近编译型语言的70-80%，同时保持了解释型语言的跨平台优势。这种演进使JavaScript在Web前端和Node.js后端都能高效运行。
2025-12-26 15:33:12
643
原创 JavaScript addEventListener() 第三个参数(capture、once、passive、signal)详解
JavaScript的addEventListener()方法第三个参数有两种形式：布尔值（控制捕获/冒泡阶段）和对象配置（支持更多选项）。对象配置包含capture、once（单次执行）、passive（优化滚动性能）和signal（事件管理）等属性。实际开发中建议为滚动/触摸事件设置passive:true提升性能，使用once:true处理一次性事件，并通过AbortSignal管理事件生命周期。需注意IE不支持对象参数形式，传统布尔值参数与对象配置的capture属性功能相同。
2025-12-26 14:49:12
823
原创 异步操作中止机制 AbortController() 详解
AbortController详解：异步操作中止机制 AbortController是现代JavaScript中管理异步操作的重要工具，提供统一的中止机制。它通过signal属性与fetch请求、事件监听器等Web API结合使用，能有效避免内存泄漏和竞态条件。主要应用场景包括：取消用户操作（搜索/上传）、组件生命周期管理、超时控制和事件清理。使用时需注意：每次创建新控制器、正确处理AbortError、及时清理资源，并考虑浏览器兼容性。最佳实践建议结合防抖/节流使用，为耗时操作提供中止选项。
2025-12-26 14:48:31
649
原创 JavaScript 三种类型检测方法对比（instanceof、typeoff、Object.prototype.toString.call()）
JavaScript类型检测方法对比摘要：本文对比了JavaScript中三种主要类型检测方法。typeof用于检测基本数据类型，返回字符串结果，但对null返回"object"且无法区分对象具体类型。instanceof检查对象是否为特定类实例，通过原型链检测，但不适用于基本类型且跨框架时可能失效。Object.prototype.toString.call()是最精确的方法，返回标准化类型字符串如"[object Array]"，可识别所有内置类型但语法较复杂。
2025-12-26 14:03:06
847
原创 JavaScript 字符串和数组方法总结（默写版：同9则6 Str21 Arr27）
本文总结了JavaScript字符串和数组的常用方法，包括9个相同方法、6个字符串正则方法、21个其他字符串方法和27个数组方法。作者通过反复默写将这些方法系统化记忆，使字符串和数组操作不再混乱。文中按功能分类列举了各方法的基本用法，如字符串的增删改查、数组的遍历过滤等，并推荐了更详细的参考文档。强调编程基础需要扎实记忆和练习，这些方法的熟练掌握能显著提升开发效率。
2025-12-26 11:41:47
788
原创 主线程订阅推送，Service Worker 处理推送事件
本文介绍了Web推送通知的实现机制，重点比较了服务工作者线程和主线程两种订阅方式的差异。服务工作者线程通过PushManager订阅推送消息，并在push事件中处理通知，适合后台运行；主线程订阅则需等待服务工作者就绪，但能结合用户交互。最佳实践建议在主线程触发订阅，在服务工作者中处理推送事件，并使用waitUntil()保持线程活跃以确保通知显示。文章还提供了VAPID协议实现示例，并强调错误处理、超时控制和资源清理等注意事项，以平衡通知可靠性与性能消耗。
2025-12-25 15:55:14
480
原创 Service Worker 的 clients.openWindow() 方法详解
ServiceWorker中的clients.openWindow()方法主要用于在用户点击推送通知时打开新窗口，但需遵循严格限制：1. 只能在notificationclick事件中调用；2. URL必须同源；3. 需优先检查并聚焦已有窗口。禁止在notificationclose或push事件中使用，否则会被浏览器阻止。最佳实践包括错误处理、使用event.waitUntil()包裹操作，并尊重用户意图。不同浏览器对API的支持程度存在差异，iOS限制尤为严格。
2025-12-25 14:54:56
625
原创 使用 Notification API 在 Service Worker 中显示通知
在ServiceWorker中显示通知有两种方法：newNotification()和registration.showNotification()。前者只能在主线程中使用，需要用户授权且页面关闭时通知消失；后者专为ServiceWorker设计，支持推送通知和操作按钮，即使网站关闭也能显示。
2025-12-25 13:14:55
826
Beetl2.8中文文档
2018-06-01
质量管理学习资料分享.zip
2020-06-03
权限树tree-multiselect.js-demo
2018-01-19
2018-1-23_tree-multiselect-mydemo真实模拟项目中的添加和编辑功能
2018-01-23
js权威指南知识梳理.zip
2020-04-29
《GS14-2013 工商行政管理基础代码集》
2018-01-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人