- 博客(27)
- 收藏
- 关注
RSS订阅原创 Svelte 5 组件插槽在 Vitest 测试中的传入方法
在前端组件化开发中，插槽（Slot）是一种常见的模式，能够让父组件向子组件动态传递内容。在 Svelte 5 中，插槽体系进一步升级，引入了 {#snippet} 和 @render 等新语法，具备更高的灵活性与可组合性。然而，在编写单元测试时，很多开发者会遇到一个实际问题：如何在 Vitest 测试环境中，将插槽内容传入被测试组件，并验证其渲染效果？
2025-09-14 13:33:03
483
原创 封装---统一处理接口与打印错误信息
本文介绍了如何封装统一API请求函数来优化前端开发。通过创建一个可配置的apiRequest工具函数，实现了自动错误处理、日志打印和Toast提示等功能，避免了重复编写try/catch代码块。文章详细展示了单个和批量接口的封装方法，支持灵活的配置选项，包括请求命名、日志开关、提示消息等。这种封装方式显著提升了代码的可维护性和开发效率，特别适合大型前端项目。作者还提供了完整的TypeScript实现代码和使用示例，并讨论了该方案的扩展可能性，如加载状态管理、性能监控等。
2025-07-15 22:31:33
1452
原创 封装---优化try..catch错误处理方式
《优雅处理异步错误：Go式错误处理在JavaScript中的应用》 本文针对JavaScript异步操作中多层try-catch嵌套导致的"回调地狱"问题，提出了一种Go语言风格的解决方案。核心思路是封装通用处理函数to()，将异步操作包装为返回[结果,错误]数组的形式，通过显式判断替代嵌套捕获。这种方案使代码保持线性结构，显著提升可读性和可维护性。文章还介绍了批量处理接口的实践方法，并建议添加错误格式化等扩展功能。该模式将异常捕获转化为显式判断，虽然略微增加代码量，但带来了更清晰的流程
2025-07-13 23:59:36
1107
2
原创 封装---统一封装处理页面标题
如果你使用 Vue Router（通常用于多页 SPA），可以这样统一控制标题。如果要在每个页面设置相同的网站标志可以使用下面的appName。我这里采用svelte框架示例,其他vue,react大差不差。在utils目录下新建文件:setPageTitle.ts。其中的appName定义在.nev文件中:.nev。多个页面中用更统一的方式设置。使用时直接导入这个工具使用。上面两个代码在一个文件中;
2025-07-13 22:01:00
423
原创 vite---环境变量和模式配置(.env 文件)
环境变量和模式配置在软件开发中至关重要,在开发流程优化,环境差异管理,安全与隐私保护,功能管理与调试,代码复用与维护有着和很大的作用.
2025-07-13 15:30:31
1891
原创 TypeScript---泛型
TypeScript泛型（Generics）通过类型参数实现灵活的类型关联，提升代码复用性。泛型可用于函数、接口、类和类型别名，如function getFirst<T>(arr:T[]):T。类型参数可设默认值（T=string）和约束条件（T extends {length:number}）。原生数据结构如Array<T>、Map<K,V>也是泛型应用。使用时需注意：避免过度使用、减少类型参数数量、确保参数多次出现。泛型能有效保持类型关联，但需平衡灵活性与代码复杂度。
2025-07-11 23:46:57
1474
原创 TypeScript---class类型
TypeScript类特性全面解析 摘要：本文详细介绍了TypeScript中类的各种特性，包括字段声明、readonly修饰符、构造器、方法、存取器、索引签名等基础语法，以及类继承、接口实现、成员可见性控制（public/protected/private）、静态成员、抽象类和this指向问题等高级特性。特别强调了TypeScript特有的类型注解和语法扩展，如属性类型推断、非空断言、方法重写override关键字、泛型类等。
2025-07-11 18:23:41
1224
原创 TypeScript---(值类型 | 联合类型 | 交叉类型)
TypeScript中的值类型、联合类型和交叉类型是重要的类型系统特性。值类型指单个值作为类型，const变量默认被推断为值类型。联合类型（|）允许变量为多种类型之一，使用时需要进行类型缩小处理。交叉类型（&）要求同时满足多个类型条件，常用于对象属性的合成和扩展。这些特性增强了代码的类型安全性，为复杂类型处理提供了灵活的方式。
2025-07-10 17:43:32
424
原创 TypeScript---interface接口
摘要：TypeScript中的interface和type都用于定义类型，但有重要区别。interface主要用于对象类型，支持继承和同名合并，适合面向对象编程。type更灵活，支持非对象类型、联合/交叉类型等高级功能，适合复杂场景。关键差异包括：interface支持继承和合并，type支持映射和复杂类型；interface不能表示非对象类型。开发中应根据需求选择：定义对象结构用interface，复杂类型操作用type，二者可结合使用.
2025-07-09 23:49:17
1066
原创 TypeScript---type类型
Type别名(Type Alias)是TypeScript中定义类型别名的工具，可用于创建基本类型、对象、函数、数组等自定义类型名称，提升代码可读性。主要用法包括：定义简单类型别名、对象结构、函数签名、数组/元组类型，以及构建联合/交叉类型。特性方面，类型别名遵循块级作用域、不允许重复定义，支持嵌套组合，并能使用泛型参数。与interface相比，type更适合定义复杂类型组合，而interface更适用于对象结构和类实现。两者互补，开发者可根据场景灵活选择。
2025-07-09 19:44:53
643
原创 TypeScript---enum枚举类型
TypeScript的Enum枚举类型总结：Enum是TypeScript特有的数据结构，用于组织相关常量。主要分为数字枚举（自动/手动赋值的数字成员）、字符串枚举（必须手动赋值的字符串成员）和异构枚举（混合类型）。数字枚举支持反向映射（通过值获取名称），而字符串枚举不支持。常量枚举（const enum）会在编译时被移除，直接替换为值。同名枚举会自动合并，但需避免成员冲突。Enum编译后会生成对象，需注意避免命名冲突。Enum类型提高了代码可读性和维护性，但使用时需权衡其编译后的代码体积影响。
2025-07-08 22:48:36
1339
原创 TypeScript---void类型
摘要：void类型表示函数不返回值，调用者不应依赖其返回值操作。在TypeScript中，未开启strictNullChecks时void可返回null或undefined；开启后仅允许undefined。void是"空"的概念表达，undefined是其具体实现。特殊情况下，void类型变量可接受任意返回值函数，但调用者不应使用返回值。语法上void函数可显式/隐式返回undefined，语义上调用者应忽略返回值。
2025-07-07 19:49:48
535
原创 TypeScript---never类型
TypeScript中的never类型表示空类型，不包含任何值，用于标识无法正常执行完成的函数（如抛出异常或无限循环）。与void不同，void表示无返回值或返回undefined，而never表示函数永远不会返回。never是所有类型的子类型，可以赋值给任何类型（类似于空集是所有集合的子集），但其他类型不能赋值给never。never常用于异常处理、无限循环和类型检查（如确保switch语句覆盖所有分支）。它是TypeScript唯一的底层类型（bottom type），而any和unknown是顶层类型
2025-07-07 16:07:45
549
原创 TypeScript---unknown类型
unknown 是 TypeScript 引入的严格版 any 类型，表示不确定类型但更安全。与 any 不同，unknown 变量不能直接赋值给其他类型（除 any/unknown），也不能直接调用方法或属性。使用时必须通过类型检查（如 typeof、instanceof）进行"类型缩小"才能操作。unknown 支持有限运算（比较、取反等），会强制开发者进行类型验证，提供比 any 更强的类型安全。在集合论中，unknown 是所有类型（除 any）的全集，属于顶层类型。开发时应优先考虑 unknown
2025-07-07 13:34:08
428
原创 TypeScript---any类型
TypeScript中的any类型是一种特殊的顶层类型，允许变量接受任何值并关闭类型检查。使用场景包括：1）需要临时关闭类型检查；2）适配老旧JavaScript项目迁移。但any会带来类型污染问题，可能将错误传递到运行时。通过配置noImplicitAny可强制显式类型声明，避免隐式any。注意事项：未赋值的let/var声明不会触发类型检查，建议始终显式声明类型。虽然any提供了灵活性，但会牺牲类型安全性，应谨慎使用。
2025-07-06 23:54:02
1201
原创 TypeScript---基础类型
JavaScript 的 8 种类型之中，undefined和null其实是两个特殊值，object属于复合类型，剩下的五种属于原始类型（primitive value），代表最基本的、不可再分的值。booleanstringnumberbigintsymbol上面这五种原始类型的值，都有对应的包装对象（wrapper object）。所谓“包装对象”，指的是这些值在需要时，会自动产生的对象。在某些情况下，JS会隐式的对原始类型进行“装箱”// 'e'// 自动装箱为String对象。
2025-07-06 20:56:55
1110
原创 TypeScript---简介与安装编译
TypeScript是JavaScript的超集，为JS添加静态类型系统，更适合企业级开发。与JS的动态类型不同，TS通过类型注解实现编译时类型检查，提升代码可靠性。所有JS代码都可作为TS代码运行，TS在此基础上扩展了类型系统。安装使用简单，通过npm全局安装后，用tsc命令将.ts文件编译为.js文件即可运行。TS的类型系统明确约束变量类型，减少不合理操作，解决了JS类型系统太弱的问题，使代码更易维护。
2025-07-05 22:31:21
1013
原创 微信小程序页面实现分享功能
微信小程序分享功能实现指南：1)通过按钮触发分享：在页面添加<button open-type="share">按钮，并在js文件中配置onShareAppMessage函数定义分享内容（标题、路径、封面图）；2)支持异步处理分享内容；3)朋友圈分享需使用onShareTimeline函数单独配置。两种方式均可自定义分享标题、路径和封面图片，按钮触发方式还能区分分享来源。
2025-06-04 21:24:54
4753
原创 实现localStorage过期数据的自动清理
文章摘要：本文介绍了两种实现localStorage过期机制的解决方案。惰性删除仅在读取数据时检查过期时间，简单但可能遗留冗余数据；定时删除通过定期扫描主动清理过期数据，但需权衡性能影响。优化方案包括限制单次清理数量防止主线程阻塞、使用待删除队列分批处理、结合requestIdleCallback在空闲时执行清理任务。最后呈现了一个封装好的UserStorage模块，整合了两种策略，支持设置/获取数据、自动清理等功能，并兼容不同浏览器环境。两种方案各有优劣，开发者可根据具体场景选择实现方式。
2025-06-04 01:29:05
1500
原创 分页组件---svelte
本文介绍了如何使用 Svelte 构建一个灵活且功能完备的分页组件。通过实现总条数展示、每页条数选择、页码跳转、上下页按钮以及输入框跳转等功能，极大增强了用户体验。文章详细解析了代码实现，包括如何通过动态渲染页码、处理每页条数的选择、管理跳转页码的逻辑，并展示了如何用 Svelte 的响应式特性高效处理数据更新
2025-04-28 21:48:13
869
原创 toast消息提示---svelte
本篇文章介绍了在 Svelte 中如何实现一个简单、灵活且可扩展的 Toast 消息提示组件。通过封装单条 Toast 组件、搭建统一的 Toast 管理器，并结合动态挂载与生命周期控制，实现了轻量高效的用户反馈机制。虽然示例基于 Svelte 编写，但整体设计思路（如状态管理、动态渲染、容器管理）同样适用于 React、Vue 或原生 JavaScript 项目。适合需要快速集成 Toast 功能，或想了解 Toast 设计通用模式的开发者参考
2025-04-28 21:21:04
1113
原创 2024第十五届蓝桥杯C/C++B组
一个整数如果按从低位到高位的顺序，奇数位（个位、百位、万位·-·）上的数字是奇数，偶数位（十位、千位、十万位··）上的数字是偶数，我们就称,之为“好数”。2.对于路径经过的棋盘格子，按照经过的格子顺序，上面的数字组成的序列要满足：0,1,2,...,K-1,0,1,2,...,K-1,0,1,2...。本题的结果为一,个小数，在提交答案时只填写这个小数，填写多余的内容将无法得分。有一些地方可能有错误或者重复的部分，这些是个人自己做法，可能和答案有出入，毕竟实力有限，望见谅，还有两题没有时间去弄，后期补上。
2024-04-14 18:12:49
3280
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人