- 博客(172)
- 收藏
- 关注
RSS订阅原创 Vue3 中 Axios 深度整合指南：从基础到高级实践引言
封装优于直接使用：创建配置好的Axios实例并统一管理类型安全：为API响应添加TypeScript类型定义模块化组织：按业务领域组织API模块错误处理：全局拦截器中统一处理错误安全考虑：实现CSRF防护和JWT自动刷新性能优化：合理使用缓存、取消重复请求src/api/modules/ # 按业务模块组织的APItypes/ # 类型定义utils/http.ts # Axios实例配置interceptors # 拦截器cache.ts # 缓存策略retry.ts # 重试机制。
2025-05-22 18:29:26
1021
1
原创 深入了解箭头函数的类型推断规则
如果箭头函数的上下文明确，例如在调用时传递了具体的类型参数，TypeScript 会根据这些信息推断参数的类型。在这个例子中，input 是一个 string | number 类型，TypeScript 会根据 typeof input 的检查来推断 input 的具体类型，并根据具体类型返回相应的值。箭头函数是 ES6 引入的一种简洁的函数定义方式，其语法相较于传统的函数表达式更为简短，同时在行为上有一些微妙的区别，最显著的是 this 绑定的方式。// result1 推断为 number 类型。
2025-05-18 18:35:13
332
原创 如何编写多个重载签名和实现函数
通过重载，我们可以根据不同的参数类型、数量，或者它们的组合，执行不同的操作。在 TypeScript 中，函数的实现部分必须只包含一个具体的函数体，而所有的重载签名只能作为类型定义出现在函数声明中。在 TypeScript 中，我们可以通过定义多个重载签名来实现这一功能，依赖于参数的类型和数量来决定函数的行为。: number): number { // 函数实现。通过遵循适当的设计原则，我们可以编写更加灵活和高效的代码，让函数能够适应多种不同的调用场景，减少重复代码的编写，同时提升系统的可扩展性。
2025-05-18 18:34:30
277
原创 理解函数重载的概念与使用场景
函数重载是编程中的一种常见技巧，尤其在支持强类型语言中，它能够让我们根据不同的输入灵活地定义多个函数实现。在这些语言中，我们可以定义具有不同参数的多个函数，编译器会根据调用时传递的参数类型来选择合适的函数版本。然而，在函数重载的实现中，实际的函数体只能有一个实现，而所有的重载签名只是为了提供不同的参数类型和数量的可能性。根据传入的参数数量和类型，函数会选择不同的重载版本，从而处理不同的绘图需求。在语言支持函数重载的情况下，编译器会根据不同的参数签名来判断调用的是哪一个重载版本。
2025-05-18 18:33:55
420
原创 剩余参数的类型约束：TypeScript 中的强大功能
在上面的例子中，...numbers: number[] 定义了一个剩余参数 numbers，它可以接收任意数量的 number 类型参数，并将其存储为一个数组。在这个例子中，message 是一个必选参数，而 names 是剩余参数，可以接受任意数量的字符串。如果你的剩余参数具有某种复杂的结构，或者你想给这些参数设置一个更具描述性的类型，TypeScript 允许你使用类型别名来定义它们的类型。
2025-05-18 18:32:53
316
原创 可选参数与默认参数的类型处理
在 TypeScript 中，函数的参数类型可以通过可选参数（Optional Parameters）和默认参数（Default Parameters）进行更灵活的定义。可选参数的值可以是 undefined，因此在类型系统中，TypeScript 会自动将其类型定义为该类型或 undefined。
2025-05-18 18:32:07
701
原创 函数声明与函数表达式的类型定义
例如，函数的参数类型和返回值类型都是通过冒号 : 后跟类型来指定的。在这个例子中，我们为 greet 变量指定了一个函数类型 (name: string) => string，这意味着 greet 是一个接收一个 string 类型参数并返回 string 类型值的函数。在函数表达式中，我们通常会为变量指定类型，以确保该函数的参数类型和返回类型是正确的。上面的例子中，greet 变量被赋值为一个匿名函数，该函数接受一个 string 类型的参数，并返回一个 string 类型的结果。
2025-05-18 18:29:33
257
原创 交叉类型的属性合并规则
在这个例子中，A 和 B 都包含一个 name 属性，但是 A 中的 name 是 string 类型，而 B 中的 name 是 number 类型。在 TypeScript 中，交叉类型（Intersection Types）是一种非常强大的类型工具，它允许我们将多个类型组合在一起，形成一个新的类型。因此，在使用交叉类型时，确保属性类型的一致性是非常关键的。本文将详细探讨交叉类型的属性合并规则，帮助你理解交叉类型如何处理多个类型的属性，特别是在属性重名的情况下，如何合并属性。
2025-05-18 18:28:37
228
原创 掌握 void 类型在函数返回值中的应用
在 TypeScript 中，void 是一个非常重要的类型，它通常用于表示函数没有返回值，或者函数的返回值不需要被使用。any 类型可以表示任何类型的值，包括返回值，然而使用 any 类型时，我们失去了类型检查的优势，可能会引发类型错误。与此相对，void 类型强调的是函数不返回任何有用的数据，具有更强的类型安全性。明确函数返回类型：尽管 TypeScript 会自动推导函数的返回类型，但在函数没有返回值的情况下，明确使用 void 类型能提高代码的可读性，并避免误用其他类型。
2025-05-12 16:10:15
747
原创 分析 any 类型的利弊及替代方案
通过使用 unknown 类型、类型推断、泛型、联合类型以及类型保护等替代方案，我们可以在不牺牲灵活性的前提下，保持代码的类型安全性和可维护性。换句话说，any 类型可以接收任何类型的值，它是一个“逃避”类型检查的工具，常常被用来解决类型不明确或动态类型的情况。在现代前端开发和 TypeScript 编程中，any 类型作为一种非常灵活且宽松的类型选项，允许开发者绕过 TypeScript 的静态类型检查。但是，与 any 类型不同的是，unknown 类型要求在使用之前进行类型检查或类型断言。
2025-04-27 22:52:02
322
原创 数组的多种声明方式：类型标注与泛型数组
这样全面细致的讲解，可以帮助读者更加深入地理解数组在 TypeScript 中的声明方式，并能够在实际开发中根据需求选择合适的方式。strings: string[] 表示 strings 是一个 string 类型的数组，即数组中的每个元素都是字符串类型。numbers: number[] 表示 numbers 是一个 number 类型的数组，即数组中的每个元素都是数字类型。语法稍显冗长：相比 类型[] 的声明方式，Array<类型> 显得稍微复杂一些，尤其是多维数组时，语法会变得更复杂。
2025-04-27 22:51:08
268
原创 在 Vue 3 setup() 函数中使用 TypeScript 处理 null 和 undefined 的最佳实践
在 JavaScript 中，undefined 表示变量尚未被赋值，而 null 则表示“空值”或“无对象”。在 TypeScript 中，如果你知道某个值可能为 null 或 undefined，你可以使用类型断言来避免编译时错误。JavaScript 会在变量声明时自动赋值为 undefined，如果某个对象的属性不存在，访问时也会得到 undefined。在 Vue 3 的 setup() 函数中结合 TypeScript 使用时，处理 null 和 undefined 是非常重要的。
2025-04-27 22:49:39
339
原创 深入剖析 TypeScript 基础类型：string、number、boolean 的声明与使用
TypeScript 是 JavaScript 的一个超集，它在 JavaScript 的基础上增加了类型系统，使得开发者可以在编写代码时指定变量的类型。在本文中，我们深入探讨了 string、number 和 boolean 类型的声明与使用，包括它们的基本操作、方法以及在实际开发中的应用。与 string 类型类似，你可以使用 number 关键字来声明一个数字类型的变量。通过理解这些基础类型的使用方式，我们可以在开发中更加高效地利用 TypeScript 的类型系统，编写出更加健壮、可维护的代码。
2025-04-27 22:49:07
390
原创 TypeScript基础数据类型详解
TypeScript 是 JavaScript 的超集，它增加了静态类型系统，为开发者提供了更强的类型安全和更好的开发体验。与 JavaScript 中的 number 类型类似，TypeScript 中的 number 可以表示任何数值，包括十进制、二进制、八进制和十六进制的数值。元组类型是一个特殊的数组类型，它允许存储不同类型的元素，并且元素的个数是固定的。在这个例子中，value 是 any 类型，因此可以赋任何类型的值，这也意味着 TypeScript 不会对 value 的类型进行检查。
2025-04-27 22:48:36
272
原创 Vue Router 核心指南：构建高效单页应用的导航艺术
Vue Router 是 Vue.js 官方路由管理器，为单页应用（SPA）提供了无缝的页面切换体验。本文将深入解析其核心功能与最佳实践。
2025-04-27 22:47:31
272
原创 Vue中Axios实战指南：高效网络请求的艺术
对于大型项目，推荐使用axios的二次封装，可以显著提升代码的可维护性。希望这篇博客对你有所帮助，如果有任何问题和建议欢迎留言讨论。：合理设置超时时间（建议5-10秒）：区分开发/生产环境API地址。：CSRF Token处理。处理复杂的网络请求场景。构建更健壮的Vue应用。实现优雅的API管理。
2025-04-27 22:40:21
728
原创 深入解析Vue.js：构建现代Web应用的高效之道
Vue.js以其渐进式的设计理念和出色的开发者体验，在现代Web开发中占据了重要地位。无论是小型项目还是大型企业应用，Vue都能提供灵活而强大的解决方案。随着Vue 3生态的成熟和周边工具的发展，Vue的未来更加值得期待。通过深入理解Vue的核心原理，掌握最佳实践，并合理利用其丰富的生态系统，开发者能够构建出高性能、易维护的现代化Web应用，在日益复杂的前端开发领域中保持竞争力。希望这篇博客对你有所帮助，如果有任何问题和建议欢迎留言讨论。
2025-04-27 10:31:57
847
原创 前端必备技能：jQuery实现中文输入法状态检测方案详解
但中文输入法存在一个特殊问题：用户在输入拼音阶段就会触发input事件。典型案例：用户输入"zhongwen"时，input事件会触发8次，但实际上用户期望只执行1次搜索。实际项目数据：某电商网站应用该方案后，搜索接口请求量下降65%，移动端用户停留时长增加18%。A[用户开始输入] --> B{触发compositionstart?showToast('请先完成中文输入');B -->|是| C[标记为输入中状态]B -->|否| D[立即处理输入]F --> G[标记输入完成]
2025-04-20 21:48:21
847
原创 JavaScript 中那些有趣的知识点
JavaScript 中还有许多像这样有趣又实用的知识点，不断探索这些特性，不仅能让我们写出更优雅、高效的代码，还能让我们在编程过程中收获更多乐趣。这是因为 setTimeout 是异步任务，会被放到任务队列中，只有当同步任务执行完，调用栈为空时，才会从任务队列中取出 setTimeout 的回调函数执行。有趣的是，在进行类型判断时，typeof null 会返回 "object" ，这其实是 JavaScript 早期的一个设计缺陷，一直保留到现在。
2025-04-20 21:47:32
257
原创 解锁 JavaScript 趣味功能，打造活力网页
然后，借助requestAnimationFrame实现高效的动画循环，不断更新雪花的位置，从而呈现出逼真的飘落效果。在未来的网页开发中，不妨发挥创意，运用 JavaScript 打造更多独特的功能，让网页在众多网站中脱颖而出，给用户带来惊喜和愉悦。JavaScript 作为网页开发的核心语言，凭借其强大的功能和灵活性，让网页变得生动有趣、充满互动性。当用户打开网页，一片片晶莹剔透的雪花纷纷扬扬飘落，营造出浪漫的冬日氛围，瞬间拉近与用户的距离，增添独特的节日氛围。开篇：奇妙的网页交互之旅。
2025-04-20 21:46:36
322
原创 Vue.js 中 v-for 的使用及其原理：深入解析与实践
例如，在一个可编辑的待办事项列表中，如果使用索引作为key，当用户删除一个待办事项后，后面的事项索引会发生变化，可能导致 Vue.js 在更新 DOM 时出现错误。无论是处理简单的数据展示，还是应对复杂的数据驱动界面，掌握v-for的精髓都将为我们的 Vue.js 开发工作带来极大的便利。假设我们有一个包含三个用户的列表，当我们删除第二个用户时，Vue.js 会根据key值找到对应的虚拟 DOM 节点，将其从旧树中移除，并在新树中进行相应调整，然后高效地更新真实 DOM，保证页面显示的正确性。
2025-04-20 21:45:37
379
原创 Vue 组件化开发
通过 Vue 组件化开发，我们可以将一个复杂的博客应用拆分成多个小的、独立的组件，从而提高代码的可维护性、可复用性和可测试性。通过将博客拆分成多个独立的组件，我们可以提高代码的可维护性、可复用性和可测试性，从而打造出高质量的博客应用。Vue 组件化开发是将一个复杂的应用拆分成多个小的、独立的组件，每个组件负责特定的功能或界面部分。例如，在博客应用中，我们可以将文章列表、文章详情、评论区等部分拆分成不同的组件。可测试性：由于组件的独立性，我们可以更容易地对每个组件进行单元测试，确保其功能的正确性。
2025-04-20 21:44:58
1430
原创 Vue3 计算属性与侦听器深度解析：优雅处理响应式数据引言
计算属性是基于响应式依赖进行缓存的派生值。它们只有在相关依赖发生改变时才会重新计算，否则会直接返回缓存值，这种机制可以显著提高性能。侦听器允许我们观察数据的变化并在变化时执行异步操作或复杂逻辑。与计算属性不同，侦听器更适合执行有副作用的操作。计算属性适合派生数据、模板渲染自动缓存、高效声明式、易于理解侦听器适合执行副作用灵活控制响应时机支持异步操作优先使用计算属性处理派生数据使用侦听器处理有副作用的操作对于高频变化的数据源，考虑使用防抖优化注意清理异步操作的副作用。
2025-04-18 14:40:23
1063
原创 Vue3 生命周期全面解析：从入门到精通
组件生命周期指的是一个Vue组件从创建、挂载、更新到销毁的整个过程。在这个过程中，Vue提供了一系列的"钩子函数"(Hook)，允许开发者在特定阶段插入自己的代码。})})// 组件中使用setup() {Vue3的生命周期系统在保留Vue2核心概念的基础上，通过Composition API提供了更灵活的组织代码方式。理解并正确使用生命周期钩子对于开发高质量的Vue应用至关重要。关键点总结：Composition API的生命周期钩子以onX形式导入，在setup中使用。
2025-04-18 14:32:57
2848
原创 Vue 3 和 Vue 2 的区别及优点
Vue 3 采用了更加高效的编译过程，生成的代码更小，解析和执行速度更快。此外，Vue 3 的 API 更加符合 TypeScript 的开发模式，使得 TypeScript 在 Vue 项目中的应用更加自然。这意味着，Vue 3 与 TypeScript 配合更加流畅，开发者能够在开发过程中获得更多的类型检查和类型推导，减少了开发中的错误。Vue 3 统一了生命周期钩子的命名，原本 Vue 2 中的一些生命周期钩子在 Vue 3 中被重新命名，以便于更好地与 Composition API 结合。
2025-04-13 22:18:53
349
1
原创 深入理解 v-for 指令及其使用方法
在上面的代码中，items 是一个数组，v-for="item in items" 表示我们将数组 items 中的每个元素赋值给 item，然后渲染为一个 <li> 元素。在使用 v-for 时，添加 key 属性是非常推荐的做法，尤其是在列表渲染中，key 可以确保 Vue 对列表中的元素进行高效更新。它帮助 Vue 识别每个元素，优化 DOM 的渲染和更新，避免不必要的元素重绘。v-for 可以与其他 Vue 指令结合使用，如 v-bind、v-on 等，来动态控制每个列表项的属性或事件。
2025-04-13 22:18:22
328
原创 深入理解 v-show 指令及其使用方法
当元素需要在显示和隐藏之间切换时，v-show 比 v-if 更有优势，因为它不会销毁 DOM 元素，而只是通过改变 display 样式来控制元素的显示与隐藏，避免了频繁的 DOM 操作。尽管 v-show 在频繁切换显隐的场景中具有较好的性能，但如果需要根据复杂的条件进行渲染，或者元素的渲染涉及到大量的逻辑处理，v-if 会更适合，因为它在条件为 false 时会完全移除元素，不占用内存。与 v-if 不同，v-show 不会销毁元素，只是简单地隐藏它，适合频繁切换显示与隐藏的场景。
2025-04-13 22:17:50
330
原创 深入理解 v-if 指令及其使用方法
使用 v-if：当条件变化较少，或者涉及复杂的 DOM 操作时，推荐使用 v-if，因为它在条件为 false 时完全移除元素，节省内存。在 Vue 中，我们可以将 v-if 与 v-for 结合使用，但需要注意的是，v-for 和 v-if 的执行顺序可能会影响渲染结果。当同时使用 v-if 和 v-for 时，Vue 会优先执行 v-for，然后根据 v-if 的条件来过滤每个元素。与 v-show 的对比：v-if 适合不频繁切换的场景，而 v-show 适合频繁切换显示隐藏的场景。
2025-04-13 21:32:22
467
原创 Vue 基础语法介绍
在这个例子中，我们通过 new Vue() 创建了一个 Vue 实例，并且将它绑定到 HTML 中的 id="app" 元素上。当用户在输入框中输入内容时，message 的值会自动更新，反之，message 的值发生变化时，输入框中的内容也会更新。这里，v-for="item in items" 会遍历 items 数组中的每一项，并为每个元素生成一个 <li> 标签。计算属性是 Vue 实例中的一种特殊属性，类似于方法，但它们是基于依赖缓存的，只有在相关依赖发生变化时才会重新计算。
2025-04-13 21:28:31
253
原创 JavaScript 错误处理：理解和应对异常
本文将深入探讨JavaScript中的错误处理机制，如何利用try...catch、throw和finally等结构来捕获和处理错误，确保我们的代码健壮而可靠。通过合理使用try...catch、throw、finally以及异步错误处理机制（如Promise和async/await），我们能够更好地管理错误，并在发生错误时提供适当的回退和恢复机制。在上面的示例中，如果riskyFunction()函数抛出异常，catch语句会捕获到这个异常并输出错误信息。当错误被抛出时，catch语句会捕获并处理它。
2025-04-13 21:01:12
249
原创 JavaScript 中的原型链与继承
在上面的代码中，dog 对象没有 speak 方法和 species 属性，但它通过原型链继承了 animal 对象的 speak 方法和 species 属性。如果对象自身没有该属性，它会查找对象的原型，如果原型没有，它会继续查找原型的原型，这一过程会一直向上查找，直到找到该属性或者到达原型链的顶端（null）。JavaScript 中的对象通常是通过构造函数来创建的，而构造函数本身也是一个函数对象，每个构造函数都有一个 prototype 属性，这个属性指向构造函数的原型对象。// 继承父类的方法。
2025-04-13 20:27:55
396
原创 使用 Git 进行仓库上传和备份的实践指南
本文将介绍如何使用 Git 进行仓库的上传和备份，帮助你更高效地管理代码和数据。远程仓库是存储在服务器上的 Git 仓库，它可以是 GitHub、GitLab 或其他 Git 服务提供商提供的仓库。在本地完成代码提交后，你可以将代码推送到远程仓库进行备份和共享。这会将当前目录下的所有文件添加到 Git 的暂存区。此命令会在项目文件夹中创建一个 .git 目录，这是 Git 用来跟踪版本和管理代码历史的地方。如果你需要在另一台设备上恢复项目，可以使用 git clone 命令将远程仓库克隆到本地。
2025-04-06 21:59:35
338
原创 JavaScript 中的异步编程：回调函数、Promise 和 async/await
随着 JavaScript 的发展，async/await 成为推荐的异步编程方式，因为它结合了 Promise 的优势，同时让异步代码更接近同步代码。async/await：是目前最简洁、最直观的异步编程方式，它将异步操作的代码写成同步的样式，易于理解和维护，错误处理也更加清晰。Promise：较回调函数更加简洁，能够避免回调地狱，支持链式调用和错误处理，但在多个异步操作时，代码可能仍然较为复杂。错误处理困难：在回调函数中处理错误较为复杂，尤其是嵌套的回调中，一旦出现错误，无法直观地捕获并处理。
2025-04-06 21:58:54
858
原创 前端 “屎山代码“ 避坑指南与重构策略
解决方案：使用语义化标签，如 <header>, <article>, <section> 等，替代不必要的 <div>，提升代码的清晰度和可维护性。让我们从今天开始，拒绝写新屎，逐步清理旧屎，培养代码洁癖，保持代码的高质量。解决方案：应遵循分离结构（HTML）、表现（CSS）和行为（JS）的原则，将样式和脚本分别提取到独立的 CSS 和 JS 文件中，保持代码的清晰和模块化。解决方案：遵循单一职责原则（SRP），将复杂的函数拆分成多个小函数，每个函数只负责一个任务，保持代码的简洁性和可读性。
2025-04-06 21:56:45
427
原创 常见的 JavaScript 框架和库
React适合组件化开发的动态界面，Vue.js适合快速上手的小型到中型应用，Angular适合大型企业级应用，Node.js则是服务器端开发的理想选择。本文将介绍四个常见的JavaScript框架和库：React、Vue.js、Angular 和 Node.js，并探讨它们的特点、使用场景及适用场合。Vue.js是一个渐进式的JavaScript框架，适用于构建从小型到中型的Web应用。Angular是由Google开发的一个全功能框架，适合构建大型、复杂的Web应用。希望这篇博客对你有所帮助！
2025-04-06 21:56:14
364
原创 这里有一个有趣的JS小功能 - “会躲避鼠标的粒子“：
这个效果结合了简单的物理模拟和色彩变化，可以作为一个有趣的背景效果，或者作为网页的互动元素。修改particleCount改变粒子数量。当鼠标靠近时，粒子会像有斥力一样避开。颜色使用HSL模式随机生成，更加鲜艳。修改hsl颜色参数获得不同的配色方案。调整force的系数改变排斥力度。粒子碰到窗口边缘会从另一边穿出。改变半径的随机范围调整粒子大小。生成100个随机颜色的小粒子。留有拖尾效果，形成动态轨迹。自动适应窗口大小变化。
2025-03-30 22:39:53
124
原创 鼠标牵引的流光线条
这个效果看起来像鼠标拖着一条会呼吸的霓虹灯带，适合作为网页的动态背景或光标特效。可以通过修改颜色算法（比如改用RGB）创造不同的视觉效果！颜色持续循环变化 (HSL色相轮换)鼠标移动时生成彩色流光轨迹。轨迹点之间用渐变色彩连接。轨迹会自动逐渐缩小消失。中的数值调整拖尾长度。
2025-03-30 22:38:50
214
原创 JavaScript实现页面全选功能详解
通过本文的实现方案，可以构建出健壮的全选功能系统。核心要点在于保持状态同步的准确性和处理动态内容的灵活性，开发者可根据具体业务需求进行功能扩展和优化。全选框与子选框的关联绑定。
2025-03-29 10:30:48
265
原创 如何通过JavaScript实现点击播放音频
在现代网页开发中，音频播放是常见的交互需求。本文将通过原生JavaScript演示如何通过点击事件实现音频的播放与暂停控制。接下来我将为大家讲解如何实现点击播放音频。
2025-03-29 09:05:13
453
原创 导出的使用
showAlerts(".correctModal", "5%", `成功导出 ${selectedData.length} 条数据`, "success");showAlerts(".ErrorModal", "5%", `导出失败: ${error.message}`, "error");showAlerts(".ErrorModal", "5%", `导出失败: ${error.message}`, "error");showAlerts(".ErrorModal", "5%", "金额异常");
2025-03-23 20:24:53
476
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人