- 博客(53)
- 收藏
- 关注
RSS订阅原创 彻底搞懂回调函数与“回调地狱”：从原理到解决方案
回调函数是一个通过参数传递给其他函数的函数，并在特定条件满足时被调用。就像网购时填写的收货地址，当快递到达时（事件发生），快递员（系统）就会按照我提供的地址（回调函数）进行配送（执行）。// 经典示例：setTimeoutconsole.log('🍕披萨制作中...');callback('您的披萨好了！')}，3000)// 使用回调// 3秒后输出})代码可读性极差错误处理困难维护成本飙升// 经典回调地狱示例。
2025-05-29 10:33:51
597
原创 深入解析Node.js文件系统（fs模块）：从基础到进阶实践
优先使用异步方法大文件操作必用流处理生产环境监控推荐 chokidartry {3.性能监控建议console.log(`操作耗时 ${diff[0]}秒 ${diff[1]/1e6}毫秒`);});
2025-05-20 16:34:49
618
原创 Node.js路径处理指南：如何安全获取当前脚本目录路径
明确需求：选择__dirname(固定位置） 还是(动态位置)坚持使用path模块：避免手动拼接路径注意模块系统差异：CommonJS与ES Modules的不同处理方式防御性编程：总是检查文件是否存在记住这些黄金法则，你将能游刃有余地处理各种路径问题，写出更健壮的Node.js应用！
2025-05-20 10:03:03
1088
原创 Node.js 同步加载问题详解：原理、危害与优化策略
1.核心概念在 Node.js 的 CommonJS 模块系统中，require()// 模块加载会阻塞后续代码执行// 卡在这里直到加载完成console.log('后续代码');// 要等 heavyModul 完全加载后才会执行2.工作流程解析事件循环暂停 -> 读取文件 -> 编译执行 -> 返回 export -> 恢复事件循环。
2025-05-16 14:17:19
299
原创 Node.js 循环依赖问题详解：原理、案例与解决方案
当两个或者多个模块互相直接或者间接引用时，就会形成循环依赖。A.js → 依赖 → B.js↑ ↓← 依赖 ←这种场景下模块的加载顺序会打破常规，导致意外结果。
2025-05-15 11:23:03
440
原创 深入理解 Node.js 模块化（CommonJS）：原理、用法与避坑指南
虽然现在 Node.js 也支持 ES Modules，但是掌握 CommonJS 仍然是 Node.js 开发者的必备技能！
2025-05-07 16:29:26
1087
原创 Node.js vs 浏览器中的JavaScript：区别全解析
当需要与用户直接交互、操作网页内容时（前端开发）。当需要构建后端服务、工具链或操作本地文件时（后端/全栈开发）。
2025-05-07 13:21:14
644
原创 Vue 权限管理终极实践：动态路由 + 按钮级权限控制
建议使用 name 作为权限标识，比 path 更稳定。推荐直接移除 DOM 而非隐藏，避免通过开发者工具修改。前端控制仅为体验优化，关键接口必须后端校验。需在 Vuex 持久化存储权限数据。动态路由需最后添加404页面。
2025-05-06 13:28:07
298
原创 在 UniApp 中实现 App 与 H5 页面的跳转及通信
通过web-view组件和, UniApp 实现了 App 与 H5 页面的无缝跳转和双向通信。内嵌 H5：保持应用内体验，适合常规内容展示外部跳转：适合需要调用系统能力的场景（如支付）。通信机制：通过消息事件和 JS 执行实现双向交互。
2025-04-27 13:47:00
1762
原创 Vue 3 双向绑定完全指南：从 v-model 到高级模式
v-model通过实现自定义修饰符// 父组件// 子组件});</script>// 自定义开关组件<template><div></div></script>方法适用场景优点注意事项标准v-model简单双向绑定语法简洁只能绑定单个值多个v-model多值控制的复杂组件清晰分离关注点需要合理命名参数宏Vue 3.3+ 项目极简代码需启用实验性功能useModel工具需要额外逻辑控制灵活扩展依赖 VueUse 库。
2025-04-24 16:36:27
899
原创 Vue Transition 组件详解：让元素动起来
使类名语义更清晰（明确表示起始状态）。实现更复杂的动画逻辑（如结合GSAP）解决进入和离开同时发生的冲突。
2025-04-22 17:53:15
776
原创 Vue3 异步组件详解：从原理到实战的保姆级指南
提升首屏加载速度，优化用户体验1.非首屏组件（弹窗、抽屉、Tab内容）2.路由页面懒加载3.按需加载第三方库（如富文本编辑器）1.避免过度拆分导致网络请求过多2.始终处理加载失败状态3.生成环境测试代码分割效果。
2025-04-22 11:03:29
447
原创 Promise 原理、用法与在 Vue 中的最佳实践
始终处理错误：使用 .catch() 或 try/catch避免嵌套：用链式调用替代回调金字塔合理使用静态方法：Promise.all 并行请求， Promise.race 超时控制与 async/await 结合：让异步代码看起来像同步代码在 Vue 中管理状态：结合 loading、error 等状态提升用户体验。
2025-04-21 16:48:05
835
原创 Web加密算法详解：原理、应用与代码实践
算法类型典型代表速度密钥管理适用场景对称加密AES快需安全传输密钥大数据加密（如文件传输）非对称加密RSA慢公钥公开，私钥保密密钥交换、数字签名哈希算法SHA-256快无需密钥密钥存储、数据完整性校验。
2025-04-21 10:19:35
677
原创 Vue —— 实用的工具函数
快速获取 ref 的值（如果是 ref 返回 .value，否则返回原值）。在 script setup 中访问组件的 attrs 和 slots。标记对象为 “ 非响应式 ”，避免被 Vue 转换为代理。将响应式对象的属性转换为 ref，保持解构后的响应性。解构 reactive 对象时避免丢失响应性。创建浅层响应式数据（只跟踪顶层的属性变化）。处理未声明为 props 的属性或动态插槽。创建依赖其他响应式数据的计算属性。简化 ref 和普通值的混合处理。优化性能，避免深度监听大对象。
2025-04-16 17:22:16
647
原创 深入理解 Vuex：核心概念、API 详解与最佳实践
Vuex 是 Vue.js 的官方状态管理库，专为复杂应用设计，用于集中管理所有组件的共享状态。它通过严格的规则确保状态变更的可预测性，并与 Vue 的响应式系统深度集成。为什么需要 Vuex?避免通过层层传递 props 或事件管理数据。通过 DevTools 实现时间旅行调试统一处理 API 请求等异步任务。
2025-04-09 20:56:10
322
原创 数据结构详细笔记——图
图G由顶点集V和边集E组成，记为G=(V,E)，其中V(G)表示图G中顶点的有限非空集；E(G)表示图G中顶点之间的关系（边）集合，用|V|表示图G中顶点的个数，也称图G的阶，用|E|表示图G中边的条数注意：线性表可以是空表，树可以是空树，但图不可以是空，即V一定是非空集有向图若E是有向边（也称弧）的有限集合时，则图G为有向图。弧是顶点的有序对，记为，其中v、w是顶点，v称为弧尾，w称为弧头。 不等于 无向图若E是无向边。
2023-11-17 15:50:48
500
原创 数据结构详细笔记——并查集
优化思路：在每次Union操作构建树的时候，尽可能让树不长高。优化思路：先找到根结点，再将查找路径上所有结点都挂到根结点上。集合：将各个元素划分为若干个互不相交的子集的集合。森林是m(m>=0)棵互不相交的树的集合。①用根结点的绝对值表示树的结点的总数。②Union操作，让小树合并到大树。
2023-11-01 15:28:50
449
原创 数据结构详细笔记——二叉树
二叉树的基本概念二叉树是n（n>=0）个结点的有限集合①或者为空的二叉树，即n=0②或者由一个根结点和两个互不相交的被称为根的左子树和右子树组成，左子树和右子树又分别是一颗二叉树特点：1、每一个结点至多只有两棵子树2、左右子树不能颠倒（二叉树是有序树）注意区别：度为2的有序树与二叉树的区别度为2的树：肯定是非空树，所有结点的度
2023-11-01 14:34:32
585
2
原创 数据结构详细笔记——树
树是n(n>=0)个结点的有限集合，n=0时，称为空树，这是一种特殊情况。在任意一棵非空树中应满足：1、有且仅有一个特定的称为根的结点2、当n>1时，其余结点可分为m(m>0)个互不相交的有限集合，其中每一个集合本身又是一棵树，并且称为根结点的子树。在含有n个带权叶结点的二叉树中，其中带权路径长度（WPL）最小的二叉树称为哈夫曼树，也称为最优二叉树。
2023-10-23 14:35:48
336
原创 数据结构详细笔记——串
串，即字符串（String）是由零个或多个字符组成的有限序列，串中字符的个数 n 称为串的长度。n=0 时的串称为空串。串是一个特殊的线性表，数据元素之间呈线性关系子串：串中任意个连续的字符组成的子序列主串：包含子串的串字符在主串中的位置：字符在串中的序号子串在主串中的位置：子串的第一个字符在主串中的位置。
2023-10-19 09:19:49
403
原创 数据结构详细笔记——栈与队列
栈是只允许在一端进行插入或删除操作的线性表后进先出（LIFO）队列是只允许在一端进行插入，在另一端删除的线性表先进先出（FIFO）
2023-10-17 15:35:49
284
原创 数据结构详细笔记——线性表
线性表是具有相同数据类型的n（n>=0）个数据元素的有限序列，其中n为表长，当n=0时线性表是一个空表。若用L命名线性表，则一般表示为 L= (a1,a2,…,ai,ai+1,…an)总结一下：线性表的逻辑结构只需要掌握以下几点：1、数据元素同类型、有限、有序2、表长为0则是一个空表3、数据元素的位序（从1开始），数组的位序（从0开始）顺序表——用顺序存储的方式实现线性表，把逻辑上相邻的元素存储在物理位置上也相邻的存储单元中顺序表的实现——静态分配10。
2023-10-11 18:27:12
541
原创 Vue3 全屏模式展示元素及监听全屏状态事件
举个🌰：这里有一个需求，点击开启大屏按钮，使展示数据的元素全屏展示，全屏中当然还有一个关闭全屏按钮，这两个操作就需要调用开启全屏和关闭全屏的方法。但是必须要考虑一点就是当用户按 Esc 键时，也应该将全屏关闭，这就需要对全屏状态进行监听了。浏览器之间的差异性，比如 Gecko 自动为元素添加了 CSS 规则，使其拉伸以填满屏幕。用户总是可以自行退出全屏模式的：按下 Esc 键，这时候我们就可以监听全屏的状态来做一些需求需要的操作。对于一个你想要以全屏模式的元素，可以通过调用它的。
2023-03-01 16:04:06
3994
1
原创 前端缓存——浏览器缓存
1. 浏览器会率先查找内存缓存，如果资源在内存中存在，那么直接从内存中加载 2. 如果内存中没找到，接下去会去磁盘中查找，找到便从磁盘中获取 3. 如果磁盘中也没有找到，那么就进行网络请求，并将请求后符合条件的资源存入内存和磁盘中
2022-12-19 14:31:28
660
原创 ＜link＞ 元素中 preload和 prefetch 的使用和区别
preload 也被称为预加载，其用于 link 标签中，可以指明哪些资源是在页面加载完成后即刻需要的，浏览器会在主渲染机制介入前预先加载这些资源，并不阻塞页面的初步渲染。该资源一直会从磁盘缓存中读取，JS、CSS 及图片资源都有同样的表现，这主要还是和资源的渲染时机有关，在渲染机制还没有介入前的资源加载不会被内存缓存。使用 prefetch 加载的资源，刷新页面时大概率会从磁盘缓存中读取，如果跳转到使用它的页面，则直接会从磁盘中加载该资源。
2022-12-09 17:43:19
2101
原创 浏览器三种加载模式
相信大家在开发调试 web 项目的过程中，每次更新代码时，都要刷新网页看看有没有出现自己想要的结果。如上图所示，打开调试器，鼠标移入刷新按钮，点击右键，就会出现三种页面加载的选择框。快捷键：Ctrl + Shift + R / Ctrl + F5。将浏览器存储的本地缓存都清空掉后再重新向服务器发送请求。优先读取内存缓存（memory cache）快捷键：Ctrl + R / F5。并没有清空缓存，而是禁用缓存。所有资源都重新向服务器获取。清空缓存并硬性重新加载。硬性重新加载模式会将。
2022-12-08 18:14:49
1192
原创 什么是前端缓存
**相信大家一定遇到过这两种情况：这两种情况都与前端缓存息息相关。**那么什么又是前端缓存呢？大家都知道前端开发脱离不了网络和浏览器，前端缓存也可以直接看作是 HTTP 缓存 和 浏览器缓存 的结合，两者是相辅相成的关系。缓存的合理使用会直接影响到网页的性能，提高网页访问速度。HTTP 缓存是产生于客户端于服务器之间通信的一种缓存，利用这一缓存可以提升服务器资源的重复利用率，在有效的时间内不必每次都向服务器请求相同的资源，大大减少服务器的压力浏览器缓存则是浏览器提供的一种缓存机制，可以将服务器资源和网页访问
2022-12-07 15:15:31
415
原创 grunt 使用教程及步骤
grunt 是一套前端自动化构建工具，一个基于 NodeJs 的命令行工具，它是一个任务运行器，配合器丰富强大的插件
2022-10-08 16:30:42
2922
原创 Pinia——Actions
与 getters 一样，操作可以通过 this 访问整个 store 内容，不同的是，actions 可以是异步的。可以完全自由的设置想要的任何参数并返回任何东西，调用 Action 时，一切都会自动推断。
2022-09-14 15:31:38
811
原创 Pinia——Getters
Getter 完全等同于 Store 状态的计算值，在 defineStore() 中的 getters 属性中定义当它接收“状态”作为第一个参数时，鼓励箭头函数的使用getter 只会依赖状态，可能会使用到其他 getter，因此可以在定义常规函数时通过 this 访问到整个 store 的实例// 自动将返回类型推断为 Number// 返回类型必须明确设置在使用 this 访问时，需要定义返回类型（在 TypeScript 中），这是因为 TypeScript 中的一个已知限制。
2022-09-14 15:21:19
1739
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人