- 博客(69)
- 收藏
- 关注
RSS订阅原创 webSocket 封装
摘要：本文介绍了基于SockJS和Stomp实现WebSocket大小屏联动的方案。通过封装WebSocket Store，实现了以下核心功能：1) 使用SockJS建立连接，Stomp协议通信；2) 心跳检测机制（20秒PING/25秒PONG超时）；3) 自动重连策略（最大10次，支持指数退避）；4) 消息订阅与广播处理；5) 完善的连接状态管理。该方案提供了稳定的实时通信能力，适用于需要保持长连接的跨屏互动场景。
2025-08-08 10:15:22
164
原创 Node.js- express的基本使用
Express 框架核心概念与应用 Express 是基于 Node.js 的轻量级 Web 框架，提供 HTTP 服务封装、路由管理、中间件等核心功能，简化 Web 应用开发。其核心优势包括模块化的中间件架构、直观的路由系统以及高性能的非阻塞 I/O 模型。 基础使用包含快速启动服务、路由定义和请求处理。Express 支持丰富的路由方法（GET/POST/ALL 等），可处理路径参数、查询字符串和请求体数据。响应设置支持链式调用，提供 JSON 响应、文件下载等便捷方法。 中间件机制是其核心特性，包括全
2025-08-06 16:22:18
461
原创 Node.js- node管理工具nvm
NVM（Node Version Manager）是一个管理Node.js版本的工具，支持快速切换不同版本。安装时需从GitHub下载nvm-setup.exe，配置环境变量后即可使用。常用命令包括：查看本地版本（nvm list）、安装指定版本（nvm install）、切换版本（nvm use）、卸载版本（nvm uninstall）等，方便开发者灵活管理Node环境。
2025-07-21 16:57:59
189
原创 伪数组转换为真正的数组
摘要：本文介绍了5种将JavaScript伪数组转换为真数组的方法：1）使用Array.from()，支持映射处理；2）扩展运算符...，简洁高效；3）Array.prototype.slice.call()传统方法；4）Array.concat()；5）for循环手动转换。推荐使用Array.from()或扩展运算符，它们支持映射且高效；旧浏览器可选用slice.call()或循环。伪数组常见于DOM集合和arguments对象，具有数字索引和length属性但缺少数组方法。
2025-07-18 14:28:01
254
原创 包管理工具npm cnpm yarn的使用
本文介绍了四种常见的Node.js包管理工具：npm、cnpm、yarn和pnpm。npm是Node.js默认的包管理器，支持安装、更新、卸载依赖等操作，可通过命令配置淘宝镜像提升下载速度。cnpm是淘宝开发的npm镜像，专为国内用户优化下载速度。yarn由Facebook开发，强调安装速度和稳定性，使用符号链接管理依赖。文章详细说明了各工具的安装方法、基本使用命令、环境区分配置等核心功能，并提供了npm切换镜像源、yarn常用命令等实用技巧，帮助开发者高效管理项目依赖。
2025-07-18 13:27:25
848
原创 Typescript -字面量类型
TypeScript的字面量类型将具体值作为类型，用于精确约束变量取值。主要分为字符串、数字和布尔三种字面量类型，常通过联合类型组合使用。典型应用包括：限制对象属性值、函数参数范围、结合类型守卫进行精准检查，以及与映射类型和模板字面量配合创建灵活类型。通过as const断言可以确保值不可变且类型精确推断。字面量类型显著增强了代码的类型安全性，确保开发时只能使用预定义的特定值，避免无效输入。
2025-07-11 13:05:47
210
原创 Node.js-模块化
模块化是将复杂系统分解为独立功能模块的技术方案。核心特点包括：模块私有数据、接口暴露、明确通信机制。优势体现在避免命名冲突、提高复用性和维护性、优化依赖管理和团队协作。Node.js模块系统通过module.exports和exports.name两种方式暴露数据，后者需注意exports=value无效。模块加载机制包含路径解析、缓存检测、代码读取、函数包裹、缓存写入等步骤，最终返回module.exports值。该机制支持.js、.json等文件类型，并通过require.cache实现高效缓存。
2025-07-04 10:08:47
348
1
原创 Node.js-http模块
HTTP协议摘要：HTTP是应用层通信协议，规范浏览器与服务器交互规则。请求报文包含请求行（方法、URL、版本）、请求头（键值对元数据）、空行和请求体（POST数据）。响应报文包括状态行（版本、状态码）、响应头、空行和响应体（HTML/JSON等数据）。Node.js可通过http模块创建服务器，处理请求和设置响应。关键点包括MIME类型、连接管理、中文编码处理和端口配置。协议支持GET/POST等方法，使用状态码表示结果，并通过Content-Type指定数据类型。
2025-07-02 17:44:37
1041
3
原创 Node.js-path模块
本文介绍了 Node.js 中 path 模块的常用 API，包括： path.resolve()：解析绝对路径，从右向左拼接，遇到绝对路径停止 path.sep：返回系统路径分隔符（Windows是\，POSIX是/） path.parse()：解析路径为对象，包含 root、dir、base 等属性 路径获取方法：basename（文件名）、dirname（目录名）、extname（扩展名） 其他功能：isAbsolute（判断绝对路径）、normalize（规范化路径） 比较：resolve()返回绝
2025-07-01 16:49:54
217
原创 ES6新特性
ES6的class语法提供了面向对象编程的清晰结构，本质上是基于原型的继承的语法糖。摘要如下： 类定义方式：可通过类声明或表达式定义类 核心特性： 类本质是函数（typeof为function） 原型链关系：实例→类原型→Object.prototype→null 关键组成部分： 构造函数constructor用于初始化实例 实例方法定义在原型上 访问器方法（get/set）控制属性访问 静态方法通过类名直接调用 继承机制： 使用extends实现继承 super关键字用于调用父类构造函数/方法 必须在子类
2025-06-30 11:25:33
1103
原创 Git 常用命令、常用错误的总结
Git常用命令摘要：本文整理了Git版本控制的核心操作，涵盖初始化配置、仓库管理、分支操作、远程协作等场景。主要内容包括：1) 基础配置与仓库初始化命令；2) 文件状态检查与提交操作；3) 分支创建/切换/删除等管理方法；4) 远程仓库推送与拉取；5) 合并(merge)与变基(rebase)操作对比；6) 临时保存工作的stash用法；7) 日志查看与差异比较；8) 撤销修改与版本回退技巧。特别强调了变基操作的适用场景与注意事项，并提供了重置操作(reset)三种模式的对比表。适用于开发者快速查阅Git核
2025-06-30 11:22:13
638
原创 Node.js-fs模块
Node.js文件系统操作摘要 本文介绍了Node.js中fs模块的核心文件操作方法。主要内容包括： 文件写入：异步写入(fs.writeFile)、同步写入(fs.writeFileSync)、追加写入(appendFile/appendFileSync)以及流式写入(fs.createWriteStream) 文件读取：异步读取(fs.readFile)、同步读取(fs.readFileSync)和流式读取(fs.createReadStream) 文件管理：移动/重命名(rename)、删除(unli
2025-06-25 17:14:15
1099
原创 面向对象-对象的继承（二）
JavaScript中的原型链是继承机制的核心。每个函数创建时会生成prototype属性指向原型对象，该对象包含共享方法且constructor指向构造函数。实例对象通过__proto__访问构造函数的原型，形成原型链。查找属性时沿链向上直至Object.prototype（终点为null）。构造函数通过new创建实例时，会将实例的__proto__指向构造函数的prototype。Object.prototype是所有对象的顶层原型，而Object构造函数本身通过Function.prototype继承
2025-06-18 11:54:26
767
原创 面向对象-对象和属性描述符详解（一）
本文介绍了JavaScript中面向对象编程的核心概念和实现方式，主要包括对象创建方法和属性描述符。 在对象创建方面，详细讲解了6种常用方式： new Object()原生构造函数 字面量方式（最简洁直观） 工厂函数（返回新对象） Object.create()（指定原型对象） 构造函数（批量生成对象） 类语法（ES6语法糖） 特别强调了原型继承的优化实现（寄生组合继承），解决了父类构造函数重复调用的问题。 在属性描述符部分，重点解析了： 数据描述符（value/writable/enumerable/co
2025-06-13 18:06:23
1028
原创 JavaScript 中 apply、call 和 bind 方法的手写实现
本文介绍了JavaScript中apply、call和bind三个方法的手写实现。call方法通过将函数绑定到context对象并以逗号分隔参数执行；apply方法与call类似但参数以数组传递；bind方法返回新函数并永久绑定this和预设参数。每个方法实现都包含参数处理、this绑定、函数执行和清理临时属性等步骤，并提供了测试代码验证其正确性。这些自定义实现有助于深入理解这三个核心方法的工作原理，展示了如何通过原型扩展为所有函数添加新方法。
2025-06-12 15:56:30
602
原创 vue防止按钮重复点击方案
本文总结了Vue中防止按钮重复点击的4种方案：1)禁用按钮与状态锁定，通过isLoading控制按钮状态；2)使用CSS的pointer-events属性禁用点击；3)自定义指令实现统一防重逻辑；4)使用防抖函数延迟执行。重点推荐自定义指令方案，可复用性强，支持配置防抖时间和加载状态。文中提供了完整的代码示例，包括禁用样式、加载动画等实现细节，适用于表单提交等常见场景。
2025-06-11 15:27:06
669
原创 javaScript switch语句替代方案
JavaScript中替代switch语句的优雅方案包括：对象映射（使用键值对关联处理逻辑）、Map数据结构（支持任意键类型）、策略模式（封装独立函数）、函数式编程（高阶函数组合）以及数组映射（利用includes检查值）。这些方法相比传统switch更简洁、易维护且扩展性强，如actions[action]?.()和strategies[action]?.()的调用方式避免了冗长的case语句，同时保持高性能和可读性。根据不同场景可选择最合适的方案优化代码结构。
2025-06-10 13:59:07
823
原创 vue3 简易的pc端音频播放器组件
本文介绍了一个基于Vue3的简易PC端音频播放器组件，主要功能包括：播放/暂停控制、进度条拖动、当前播放时间/总时长显示以及音频文件名展示。该组件采用Composition API实现，核心功能包含：通过audio元素实现音频控制，通过进度条事件处理实现播放进度交互，以及格式化显示播放时间。组件封装了完整的播放控制逻辑，包括鼠标/触摸事件处理，支持响应式操作。代码展示了模板结构、脚本逻辑（如播放控制、进度更新等）和样式实现，是一个轻量级且功能完备的音频播放解决方案。
2025-06-09 15:20:22
431
原创 javascript中Cookie、BOM、DOM的使用
DOM 是浏览器提供的一个接口，用于操作 HTML 文档的结构和内容。DOM 提供了一组对象和方法，用于访问和修改 HTML 文档的元素、属性和内容。BOM（Browser Object Model）是指浏览器对象模型，它提供了与浏览器交互的接口和对象。BOM 提供了丰富的方法和属性，用于与浏览器进行交互，例如打开新窗口、导航、获取用户输入等。在客户端存储小型文本数据（通常 ≤ 4KB），常用于会话管理、个性化设置等场景。
2025-06-06 23:20:38
1519
原创 javascript 中 函数this的指向
JavaScript 中 this 的指向规则总结： 全局环境：浏览器指向 window，Node.js 指向 global；严格模式下为 undefined。 绑定规则： 默认绑定：独立调用时指向全局对象 隐式绑定：通过对象调用时指向调用对象 显式绑定：call/apply 指定 this，bind 永久绑定 new 绑定：指向新创建的实例 特殊情况： DOM 事件：this 指向触发元素 箭头函数：继承定义时外层作用域的 this，无法修改 核心特点： this 指向取决于调用方式，而非定义位置（箭头函
2025-06-04 13:26:10
711
原创 ES7、ES8、ES9、ES10、ES11、ES12新特性
ES7和ES8引入了多个重要新特性：ES7新增了Array.prototype.includes()方法用于更直观地检查数组元素，以及指数运算符**简化幂运算；ES8提供了Object.values()/entries()获取对象键值对，字符串填充方法padStart/padEnd实现格式化效果，Async/Await异步编程语法简化Promise使用，以及Object.getOwnPropertyDescriptors()获取对象属性描述符。这些特性分别增强了数组操作、对象处理、字符串格式化和异步编程能力
2025-05-30 13:37:23
1444
原创 vue3自定义指令来实现 v-focus 功能
本文介绍了在Vue 3中实现v-focus指令的方法。通过创建focus.ts文件定义自定义指令，在元素插入DOM后自动聚焦，并在值更新时重新聚焦。随后在main.ts中注册指令，最终在Vue组件中通过v-focus使用该功能。该指令可方便地为输入元素添加自动聚焦特性，提升用户体验。实现过程包括指令定义、全局注册和组件使用三个步骤。
2025-05-27 17:48:14
485
原创 vue3自定义指令来实现 v-lazyImg 功能
本文介绍了在Vue 3中实现图片懒加载的自定义指令v-lazyImg。通过IntersectionObserver API监听图片是否进入视口，当图片可见时才加载真实图片地址。实现要点包括：创建观察器配置阈值参数，定义图片加载成功/失败的处理逻辑，在指令生命周期中管理观察行为，并提供错误图片回退方案。使用时只需在img标签上添加v-lazyImg指令并传入图片URL即可。该方案能有效提升长列表页面的加载性能。
2025-05-26 17:18:26
511
原创 vue3自定义指令来实现 v-copy 功能
本文介绍了在Vue 3中实现复制功能的v-copy自定义指令。指令通过Element Plus的ElMessage提供反馈，支持click/dblclick事件和静默模式。核心实现包含现代API(navigator.clipboard)和传统方法(execCommand)两种复制方式，并通过指令参数定制提示消息。使用示例展示了如何通过按钮和输入框绑定要复制的文本，支持动态更新复制内容。该指令具有良好的兼容性和可定制性，适合需要复制功能的Vue项目。
2025-05-23 22:43:15
922
原创 vue2、vue3项目打包生成txt文件-自动记录打包日期：git版本、当前分支、提交人姓名、提交日期、提交描述等信息 和 前端项目的版本号json文件
在Vue2项目中，通过自定义Webpack插件BranchVersionWebpackPlugin，可以在打包时自动生成两个文件：version.txt和version.json。version.txt记录Git版本信息，包括当前分支、提交人姓名、提交日期、提交描述等；version.json记录项目版本号和打包时间。插件通过读取package.json文件更新版本号，并根据Git命令获取相关信息
2025-05-19 17:32:17
713
原创 vue3 事件处理stop、self、prevent
在Vue.js中，事件处理通过v-on指令（简写为@）实现，用于监听DOM事件并执行相应的JavaScript代码。事件处理器可以是内联的JavaScript语句，也可以是指向组件方法的属性名或路径。Vue支持事件修饰符（如.stop、.prevent等）来改变事件的默认行为，按键修饰符（如.enter、.tab等）来监听特定按键事件，以及系统按键修饰符（如.ctrl、.alt等）来监听组合键事件。此外，鼠标按键修饰符（如.left、.right等）允许监听特定的鼠标按键事件。这些功能使得Vue.js在事件
2025-05-16 11:21:58
577
原创 vue3中无全局的过滤器, 推荐方案。
在Vue 3中，由于移除了全局过滤器的支持，开发者可以通过多种方式实现类似功能。首先，可以将过滤器挂载到全局属性globalProperties上，通过app.config.globalProperties.$filters来访问。其次，可以使用组合式函数（hooks）来实现时间格式化等功能，这种方式更加灵活且符合Vue 3的组合式API设计理念。最后，还可以通过计算属性来实现数据的格式化处理。这些方法都能有效替代Vue 2中的全局过滤器，且更具可维护性和扩展性。
2025-05-16 09:37:14
575
原创 vue3的深入组件-组件 v-model
Vue 3.4 引入了 defineModel() 宏，简化了组件中 v-model 的双向绑定实现。通过 defineModel()，子组件可以轻松与父组件同步数据，并支持默认值、修饰符等功能。defineModel() 返回一个 ref，其值与父组件的 v-model 同步，子组件的修改也会触发父组件的更新。此外，v-model 支持参数和多个绑定，允许在不同属性上使用不同的修饰符。例如，v-model:username.trim 可以处理 username 的 trim 修饰符，而 v-model:a
2025-05-08 22:27:19
957
原创 vue3的深入组件-透传 Attributes
click 监听器会被添加到 <MyButton> 的根元素，即那个原生的 <button> 元素之上。同样的，如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。需要注意的是，虽然这里的 attrs 对象总是反映为最新的透传 attribute，但它并不是响应式的 (考虑到性能因素)。“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。
2025-05-07 18:04:20
895
原创 vue3的深入组件-Props
Vue 组件可以更细致地声明对传入的 props 的校验要求。所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。如果声明了 default 值，那么在 prop 的值被解析为 undefined 时，无论 prop 是未被传递还是显式指明的 undefined，都会改为 default 值。另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。
2025-05-06 16:14:08
1804
原创 vue3内置组件Suspense的使用
Suspense> 组件会触发三个事件：pending、resolve 和 fallback。这意味着如果组件关系链上有一个<Suspense>，那么这个异步组件就会被当作这个<Suspense> 的一个异步依赖。在这种情况下，加载状态是由 <Suspense> 控制，而该组件自己的加载、报错、延时和超时等选项都将被忽略。<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。
2025-05-01 22:23:14
466
原创 vue3基础侦听器 watch watchEffect的详细使用
在setup函数中调用了watchEffect函数，并给该函数传递了一个回调函数，传入的回调函数会被立即执行一次，并且在执行的过程中会收集依赖（收集count的依赖）。注意，onWatcherCleanup 仅在 Vue 3.5+ 中支持，并且必须在 watchEffect 效果函数或 watch 回调函数的同步执行期间调用：你不能在异步函数的 await 语句之后调用它。而当DOM挂载时，会给buttonRef变量的ref对象赋值新的值，副作用函数会再次执行，打印出对应的元素。
2025-04-30 08:44:18
2119
原创 vue3 app.component组件注册、全局注册、组件名格式
如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。但需要注意的是，在 JavaScript 中定义和注册组件时，仍需使用 PascalCase。相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。在父组件中使用子组件时，不太容易定位子组件的实现。一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。动态注册组件允许你在运行时根据需要注册组件，这在构建复杂的单页面应用时非常有用。
2025-04-29 10:20:04
2050
原创 Vue3的内置组件-Teleport详细使用方法
理想情况下，我们希望触发模态框的按钮和模态框本身的代码是在同一个单文件组件中，因为它们都与组件的开关状态有关。对于此类场景，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上，但都在目标元素中。有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在其他地方，甚至在整个 Vue 应用外部。这样可以确保模态框在页面上的定位不受当前组件的样式影响。
2025-04-28 10:46:35
769
原创 vue3 内置组件KeepAlive的使用
当缓存实例数量超过 max 时，最早缓存的实例会被移除。当 current 的值切换时，被缓存的组件不会被销毁，而是被保留在内存中，以便下次切换时快速渲染。keepAlive 提供了 include 和 exclude 属性，用于控制哪些组件需要被缓存，哪些组件需要被排除。onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。keepAlive 通常用于包裹动态组件，以实现缓存功能。这两个钩子不仅适用于 缓存的根组件，也适用于缓存树中的后代组件。
2025-04-27 14:49:45
562
原创 Vue3的内置组件 -实现过渡动画 TransitionGroup
你还可以通过向 传递 moveClass prop 为移动元素指定自定义过渡 class，类似于自定义过渡 class。enter-active-class：定义进入时的活动类。leave-active-class：定义离开时的活动类。move-class：定义移动时的类（用于列表项的重新排序动画）。这些类允许你自定义进入、离开和移动时的动画效果。
2025-04-26 14:36:25
440
原创 vue3内置组件过渡动画transition
template></div></div><script>setup() {// 在元素被插入到 DOM 之前被调用// 用这个来设置元素的 "enter-from" 状态// 在元素被插入到 DOM 之后的下一帧被调用// 用这个来开始进入动画done();}, 100);// 当进入过渡完成时调用。// 在 leave 钩子之前调用// 大多数时候，你应该只会用到 leave 钩子// 在离开过渡开始时调用// 用这个来开始离开动画。
2025-04-25 23:29:39
1257
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人