奔跑的web.-CSDN博客

原创 UniApp 路由导航守

UniApp实现路由守卫的解决方案是通过拦截器(interceptor)来替代Vue-Router的beforeEach。核心思路是拦截uni.navigateTo等路由API，在invoke方法中进行权限校验：白名单直接放行，无token则跳转登录页并携带原路径参数。关键点包括：1)在App.vue的onLaunch中初始化拦截器；2)完整路径匹配白名单；3)登录成功后通过redirect参数回跳原页面。该方案支持tabBar拦截，可扩展权限控制，已在多端项目中验证稳定性。相比Vue-Router方案，U

2026-02-08 22:11:06 597

原创 tsdown 快速上手实操：零配置也能跑的TS极速构建工具

本文介绍了基于tsdown构建TypeScript项目的最佳实践。tsdown具有极速构建、零配置友好、功能全面和上手简单等优势，特别适合开发TS工具库和NPM包。内容涵盖项目初始化、标准目录结构、示例代码编写、配置文件详解（包含空配置和完整配置模板）、package.json脚本配置、构建验证以及核心配置速查表。通过简明的步骤指导，帮助开发者快速搭建高效TS开发环境，实现从开发到构建的全流程标准化。

2026-02-05 22:02:53 539

原创前端使用7种设计模式的核心原则

本文介绍了7种前端常用的设计模式，分为三大类：结构型（亨元模式、单例模式）、行为型（备忘录、中介者、迭代器、发布-订阅）和创建型（工厂模式）。这些模式能解决80%的前端开发场景问题，包括代码复用、对象交互和实例创建等核心需求。通过具体代码案例展示了每种模式的应用场景和实现方式，如亨元模式优化图标渲染性能、单例模式管理全局Toast、发布-订阅模式实现组件通信等。掌握这些设计模式可显著提升代码质量和开发效率。

2026-01-29 22:46:53 676

原创 TypeScript 装饰器入门核心用法

本文介绍了TypeScript装饰器的基本概念和常见用法。装饰器是普通函数，通过@符号附加到类、方法或属性上，用于扩展功能。主要内容包括：类装饰器可添加静态属性；方法装饰器能添加日志或设置只读；属性装饰器可为属性设置默认值；装饰器工厂允许传入自定义参数；多个装饰器执行顺序是从下往上。使用装饰器需在tsconfig.json中启用experimentalDecorators选项。装饰器提供了一种简洁的方式来增强类及其成员的功能。

2026-01-27 22:42:16 312

原创 TypeScript namespace 详解：语法用法与使用建议

TypeScript的namespace是一种代码组织方式，用于归类相关变量、函数和类，避免命名冲突。它通过export暴露成员，编译后生成全局对象。支持嵌套、别名和跨文件引用，并能自动合并同名命名空间或与函数、类、枚举合并。但由于ES模块已成为标准，官方推荐优先使用import/export。namespace仅建议在维护旧代码、扩展全局对象或简单脚本时使用。新项目应使用ES模块以获得更好的兼容性和可维护性。

2026-01-26 22:38:59 941

原创 TypeScript 类型断言

TypeScript 类型断言一、类型断言举个简单例子：这里 foo 明明是 'a'，但 TS 推断成了 string 类型（T 的父类型），父类型不能赋值给子类型，就报错了。而类型断言就是用

2026-01-25 21:39:11 504

原创 npm install发生了什么？

本文解析了npm install的核心流程：首先读取配置文件确定安装规则，然后检查package-lock.json是否存在作为关键分叉点。有lock文件时会校验版本一致性并构建扁平化依赖树，优先使用缓存；没有则直接按package.json处理并生成新lock文件。日常开发建议保留lock文件确保版本稳定，遇到问题可清理缓存重装。整个流程保证了依赖安装的高效性和版本一致性。

2026-01-24 13:13:47 334

原创 TypeScript Enum 类型入门：从基础到实战

本文介绍了TypeScript中的枚举(Enum)类型，主要包含数字枚举和字符串枚举两种常用类型。枚举的核心价值在于提高代码可读性、确保类型安全和便于维护。数字枚举支持自动递增和反向映射，而字符串枚举必须显式赋值且更直观。文章还介绍了常量枚举(const enum)的高效特性，以及枚举在管理接口状态码和前端下拉框选项等实际场景中的应用，展示了枚举如何替代魔法值并优化代码结构。

2026-01-19 22:47:01 204

原创 TypeScript 泛型完全指南：写法、四大应用场景与高级用法

本文详细介绍了 TypeScript 泛型的核心概念和四大应用场景。泛型作为"类型占位符"，可在函数、接口、类和类型别名中实现代码复用。文章通过具体示例展示了泛型的基础写法与高级用法，包括类型参数默认值、多类型参数等特性。重点讲解了泛型在函数(最常用场景)、接口(API响应类型)、类(数据容器)和类型别名(自定义类型)中的实践应用，帮助开发者编写更灵活且类型安全的代码，避免any类型带来的风险。

2026-01-19 22:34:44 749

原创 JavaScript 对象属性遍历Object.entries Object.keys：6 种常用方法详解与对比

本文详细介绍了 JavaScript 中遍历对象属性的 6 种常用方法：Object.keys()、Object.values()、Object.entries() 获取普通字符串键及其值；Object.getOwnPropertyNames() 获取所有字符串键；Object.getOwnPropertySymbols() 专门处理 Symbol 键；以及全能型的 Reflect.ownKeys()。这些方法均只返回对象自身属性，不包含继承属性。通过对比表格可清晰看出各方法的功能差异，开发者可根据实际需求

2026-01-15 23:01:21 508

原创 Vue 3.6 重磅新特性：Vapor Mode 深度解析

Vue 3.6引入的Vapor Mode通过跳过虚拟DOM环节，直接编译生成原生DOM操作代码，大幅提升了静态内容场景下的性能表现。其核心原理是在编译时进行最大化优化，运行时仅执行必要的最小化开销操作。通过Vite或Vue CLI配置即可开启该模式，特别适合静态官网页面和简单信息展示组件等场景。相比传统虚拟DOM模式，Vapor Mode消除了VNode创建、diff算法等中间层开销，使首次渲染耗时显著降低，为前端性能优化提供了新思路。

2026-01-14 22:33:26 1417

原创 TypeScript 接口（interface）完全指南：语法、特性与实战技巧

TypeScript接口(interface)全面解析：从基础到高级应用本文深入探讨TypeScript接口的核心概念和使用方法。主要内容包括：基础用法：介绍接口定义与实现，以及属性类型提取技巧成员类型：详细讲解5种接口成员（对象属性、属性索引、方法、函数、构造函数）继承机制：分析接口继承规则，包括多重继承和冲突处理文章通过大量代码示例展示了接口的各种应用场景，如可选属性、只读属性、函数重载等特性。同时比较了接口与type的区别，帮助开发者选择合适的方式定义类型。特别强调了属性索引的约束规则和继承

2026-01-13 23:04:27 1017

原创 TypeScript 全面详解：对象类型的语法规则

本文详细介绍了TypeScript中对象类型的语法规则和使用规范。主要内容包括：对象类型的基础声明方式（字面量声明、属性分隔符规则）、严格的属性匹配要求、对象方法的两种声明语法（函数签名和箭头函数）。文章还讲解了如何读取对象属性类型、使用type和interface定义类型别名、可选属性的声明与注意事项，以及严格可选属性配置ExactOptionalPropertyTypes的作用。通过丰富的代码示例，帮助开发者掌握TypeScript对象类型的核心概念和使用技巧。

2026-01-12 22:24:49 809

原创 Vue createRenderer 自定义渲染器从入门到实战

Vue 3的createRenderer函数支持自定义渲染逻辑，突破DOM限制实现多端适配。本文通过一个完整示例演示如何创建支持事件绑定的DOM渲染器：1) 引入createRenderer和h函数；2) 定义6个核心渲染方法，重点改造patchProp使其支持onClick等事件处理；3) 通过初始节点和1秒后更新的带事件节点，展示虚拟DOM的更新流程。运行效果显示文本更新、属性变更和事件触发均正常工作，控制台日志清晰呈现渲染过程。该方案为跨平台开发提供了基础，只需调整渲染方法即可适配不同环境。

2026-01-10 23:46:51 807

原创 Vue 事件系统核心：createInvoker 函数深度解析

Vue事件系统的核心机制createInvoker函数通过三个巧妙设计实现高效事件处理：1）将函数作为对象存储回调逻辑；2）使用箭头函数确保this指向组件实例；3）通过闭包实现动态更新逻辑而无需重新绑定DOM事件。该函数创建的事件调用器既作为事件入口又存储实际回调，更新时只需修改invoker.value属性即可，避免频繁的DOM操作。这种设计使Vue事件系统具备高性能和灵活性，是理解Vue响应式事件处理的关键所在。

2026-01-08 23:35:58 717 1

原创 TypeScript函数类型全攻略：从基础约束到高级玩法

本文全面介绍TypeScript函数类型的核心知识点，从基础到高级应用。首先对比了宽泛的Function类型和精准的函数类型表达式，强调后者在日常开发中的重要性。接着详细讲解了参数进阶用法，包括可选参数、默认值、解构、rest参数和readonly约束。在返回值方面，重点解析了void和never类型的区别与适用场景。文章还介绍了函数内部定义局部类型的技巧，以及高阶函数的类型处理方式，包括函数作为参数和返回值的类型约束。最后讲解了函数重载的实现方法，用于处理不同参数类型对应不同返回值类型的复杂场景。全文覆盖

2026-01-07 21:24:09 523

原创 TypeScript类型系统核心速通：从基础到常用复合类型包装类

TypeScript类型系统核心速通本文系统梳理了TypeScript类型系统的核心要点：基础类型：TS完全继承JS的8种基础类型（boolean/string/number等），注意undefined/null的特殊性以及strictNullChecks选项的影响包装类与大小写类型：原始类型（小写）与包装对象（大写）的区别 5种原始类型对应的包装类关系 Object与object的关键差异：Object包含所有值（不建议使用），object仅包含对象类型常用复合类型：联合类型（|）实现&quo

2026-01-06 20:46:34 530

原创彻底搞懂 TypeScript 数组与元组

本文深入解析TypeScript中数组和元组的核心差异与使用场景。数组(Array)适用于存储同类型的动态集合，支持增删元素，主要解决同类数据存储问题；元组(Tuple)则用于固定长度的异构数据组合，每个索引位置的类型严格定义，适合结构化不同类型数据。文章通过代码示例展示了数组的基础用法、多维数组以及元组在函数返回值等场景的应用，并提供了6个维度的对比表格，帮助开发者快速掌握"数组用于动态同类数据，元组用于固定异构数据"的核心原则。

2026-01-05 21:10:41 802

原创解决深拷贝循环引用痛点：一篇看懂 WeakMap 实现方案

本文深入解析了JavaScript深拷贝中的循环引用问题及解决方案。文章首先通过实例说明循环引用的概念，指出普通递归深拷贝在处理自引用或互引用对象时会导致栈溢出。随后提出核心解决思路：使用WeakMap作为缓存容器记录已拷贝对象，避免重复递归。文章详细展示了带循环引用检测的深拷贝实现代码，并通过测试验证了该方案能正确处理自引用、互引用等情况，同时保持拷贝对象的独立性。最终总结指出，WeakMap因其弱引用特性成为解决循环引用问题的最优选择。

2025-12-30 23:40:16 411

原创 JS 链表详解：基于固定示例的单向/双向链表与中间节点删除实

本文基于固定链表示例，详细解析了JavaScript中单向链表和双向链表的核心结构差异。单向链表仅含next指针，需遍历记录前驱节点才能删除中间节点；双向链表通过prev指针可直接获取前驱节点，删除操作更高效。通过实战代码演示了两种链表删除中间节点（node3）的具体实现：单向链表需O(n)时间查找前驱，而双向链表只需O(1)时间调整指针。文章还对比了链表与数组在内存布局和操作效率上的核心差异，帮助开发者深入理解链表特性及应用场景。

2025-12-28 21:33:56 762

原创从零手写简单版Promise：吃透核心原理，为进阶打基础

本文介绍了如何从零开始手写一个简单版Promise，重点讲解了Promise的核心原理和基础实现。文章首先明确了Promise的四个核心特性：状态不可逆、结果保存、resolve/reject触发状态变更以及then方法接收结果。然后通过代码示例，详细拆解了Promise构造函数的初始化、resolve/reject函数定义、executor执行异常处理等核心逻辑，并实现了then方法的基础版本。最后通过成功和失败两种场景的测试代码，验证了这个简单版Promise的基本功能。本文适合前端初学者理解Promi

2025-12-24 22:34:43 322

原创深入理解防抖与节流：从原理到实战（附可直接复用代码）

本文深入解析前端开发中优化高频事件的两种核心方案——防抖(Debounce)和节流(Throttle)。防抖的特点是触发事件后延迟执行，重复触发则重置计时；节流则是固定时间内只执行一次。文章详细拆解了两种方法的经典实现代码，包括闭包的应用、this指向处理和参数传递等关键点。通过输入框搜索、滚动加载和按钮防重复点击三个典型场景，展示了如何在实际项目中应用这些技术。最后总结了二者的核心区别和适用场景，并提供了使用时的注意事项，帮助开发者根据具体需求选择合适方案来提升页面性能。

2025-12-23 21:53:58 930

原创一文了解 Cookie、localStorage、sessionStorage的区别与实战案例

浏览器存储方案对比与应用 Cookie、localStorage和sessionStorage是前端开发中常用的三种浏览器存储方案，它们在存储容量、生命周期、作用域等方面存在显著差异： Cookie：容量约4KB，可设置过期时间，自动随HTTP请求发送，适合存储登录状态等需与服务器交互的数据 localStorage：容量约5MB，永久存储，仅JS可访问，适合长期保存用户偏好（如主题设置） sessionStorage：容量约5MB，会话级存储（关闭标签页即清除），适合暂存表单中间数据等临时信息在Vue项

2025-12-22 22:25:37 593 1

原创一文搞懂事件冒泡与阻止方法：event.stopPropagation() 实战指南

文章摘要：事件冒泡与阻止方法实战指南本文深入讲解DOM事件流中的冒泡机制及其应用场景。首先解释事件冒泡概念（事件从目标元素向上传播触发祖先元素同名事件），然后分析阻止冒泡的必要性（如弹窗、菜单等组件需要精准触发事件）。重点对比两种阻止方法：event.stopPropagation()（标准方法）和event.cancelBubble=true（IE兼容方法），并通过三个实战案例（弹窗组件、嵌套菜单、表单按钮）演示具体应用。最后指出阻止冒泡与事件委托的关系，帮助开发者掌握精准控制事件流的技巧。（149字）

2025-12-21 21:56:52 728

原创深入理解 JavaScript 垃圾回收机制与内存泄漏防范

JavaScript 垃圾回收与内存泄漏防范指南本文深入解析JavaScript内存管理机制，重点介绍：垃圾回收原理：主流标记清除算法及其优化策略（分代/增量/并行回收）内存泄漏危害：导致性能下降、页面卡顿甚至崩溃常见泄漏场景：全局变量、闭包、未清除的定时器/事件监听、DOM引用检测方法：使用Chrome DevTools的Memory/Performance面板分析内存变化防范措施：及时释放引用、使用WeakMap/WeakSet、规范事件管理掌握这些知识能有效提升代码健壮性，避免内存问题影

2025-12-19 22:29:01 964

原创手撕call/apply/bind：从ES6用法到手写实现，吃透this指向核心

🔥 手撕call/apply/bind：彻底掌握this指向 JavaScript中call、apply、bind是改变函数执行上下文的"三剑客"。它们本质上都是修改函数执行时的this指向，但在使用方式和执行时机上有重要区别： call：接收逗号分隔的参数列表，立即执行函数 apply：接收数组参数，立即执行函数 bind：返回新函数不立即执行，支持参数分批传递手写实现的核心要点： call/apply：通过临时挂载函数到目标对象来改变this指向 bind：需要处理构造函数调用场

2025-12-18 20:44:35 717

原创彻底搞懂JavaScript块级作用域与函数作用域：var、let、const的核心区别

本文深入解析JavaScript中函数作用域与块级作用域的区别，重点对比var、let、const的特性差异。函数作用域下var声明的变量会提升且不受代码块限制，而ES6引入的let/const实现了块级作用域，变量仅在其所在的花括号内有效。关键差异包括：作用域范围、变量提升行为、重复声明规则等。块级作用域解决了变量污染全局、循环闭包等经典问题。开发建议：优先使用const，需要修改时用let，避免使用var。理解这些概念能帮助开发者编写更安全、可维护的代码。

2025-12-17 22:49:26 687

原创一篇文章了解 JavaScript 开发中函数与变量的优先级

摘要：本文解析JavaScript中函数与变量优先级的核心规则。通过三个典型场景对比函数声明、var变量和let/const变量的提升机制：1)函数声明优先于var变量；2)let/const的暂时性死区优先于函数声明；3)函数表达式等同于变量声明。文章用表格总结优先级顺序，并给出避免同名、优先使用let/const等实用建议。最后通过综合案例演示如何应用这些规则分析代码执行顺序，帮助开发者彻底理解提升机制，避免常见陷阱。

2025-12-16 22:48:52 720

原创彻底搞懂 JS 数据类型：基本类型与引用类型的核心差异

JavaScript数据类型分为基本类型（Number、String等）和引用类型（Object、Array等），核心差异在于内存存储方式不同。基本类型直接存储在栈内存，赋值时复制实际值，变量间互不影响；引用类型实际值存在堆内存，变量存储引用地址，赋值时复制地址，变量共享同一对象。这种设计优化了性能，但可能导致修改互相影响。可通过深拷贝（如JSON序列化或递归复制）解决共享问题。理解这一机制是掌握原型链、闭包等概念的基础。

2025-12-15 22:11:51 814

原创一文搞懂 JavaScript 原型链：从本质到实战应用

JavaScript 原型链是理解 JS 面向对象编程的核心机制。本文从构造函数、原型对象和实例对象的关系入手，解析了原型链的运作原理：通过 __proto__ 属性形成链式查找结构，实现属性和方法的共享继承。文章详细演示了原型链继承的实现方式，包括构造函数调用、原型指向调整和 constructor 修复等关键步骤，并指出原型链继承的潜在问题。最后强调 ES6 的 class 本质仍是基于原型链的语法糖。掌握原型链机制对深入理解 JavaScript 对象模型至关重要。

2025-12-14 22:21:58 705

原创一文吃透 JavaScript Class：从基础语法到实战应用

JavaScript Class 是 ES6 引入的重要特性，它作为原型链的语法糖，使面向对象编程更加直观规范。文章从基础语法入手，详细讲解了 Class 的定义、构造函数、实例方法、静态方法、getter/setter 等核心概念，并通过代码示例展示了继承机制（extends）、方法重写和多态特性。特别强调了静态属性和方法的定义与使用，以及如何继承内置对象扩展功能。相比 ES5 的构造函数模式，Class 提供了更清晰的代码结构和更符合传统 OOP 的书写方式，是 JavaScript 开发中必须掌握的核

2025-12-13 23:31:41 944

lsposed

微信小程序微信授权用户头像昵称获取规则调整对应

空空如也