- 博客(62)
- 收藏
- 关注
RSS订阅原创 DevEco Studio 保存自动格式化代码和自动换行
本文介绍了PyCharm中提高代码可读性的两个实用设置：1）使用Ctrl+Alt+L快捷键快速格式化代码，并配置保存时自动格式化；2）开启编辑器的自动换行功能，使长代码行自动换行显示。通过截图展示了具体的配置位置，帮助开发者优化代码排版和工作效率。
2025-08-09 11:00:30
307
原创 详细讲解-uniapp封装request请求
本文介绍了uni-app中request请求的完整封装方案，包括基础网络请求、拦截器和错误处理等功能。通过创建request.js模块，作者展示了如何实现GET/POST请求封装、请求/响应拦截器、Token自动添加以及请求重试机制。关键点包括：1) 基础请求封装支持超时设置；2) 拦截器实现权限验证和错误统一处理；3) 提供4种HTTP方法封装；4) 可选的重试机制增强稳定性。该方案提升了代码复用性，简化了错误处理流程，适用于需要与后端API交互的uni-app跨平台应用开发。
2025-08-08 10:47:35
395
原创 38-TS之类型保护
文章摘要： TypeScript的类型保护（Type Guards）通过运行时类型判断增强代码安全性，提供四种实现方式：1）typeof操作符判断基本数据类型；2）instanceof操作符检测类实例；3）自定义类型保护函数（通过"param is Type"谓词）；4）in操作符检查对象属性。这些方法能精确缩小变量类型范围，使类型推断更准确，有效避免运行时错误，提升代码健壮性。核心价值在于将动态类型检查转为静态类型保障，兼顾JavaScript灵活性同时强化类型安全。
2025-08-08 10:26:28
372
原创 37-TS之交叉和联合类型
本文深入解析TypeScript中的交叉类型（&）和联合类型（|）的使用方法。交叉类型通过合并多个类型实现属性叠加，常用于对象混入和接口组合；联合类型则允许变量在多种类型间切换，适用于动态值处理。文章通过代码示例详细展示了两种类型的基本用法、应用场景和注意事项，并提供了类型守卫、类型嵌套等进阶技巧。合理使用这两种类型能有效提升代码的健壮性和可维护性，帮助开发者在复杂业务中更高效地运用TypeScript类型系统。
2025-08-07 09:55:53
362
原创 36-TS之泛型兼容性
TypeScript泛型兼容性基于结构类型系统，空泛型接口相互兼容，但包含泛型成员时会严格检查类型匹配。函数参数类型遵循逆变规则，而数组类型则表现出协变特性。实际开发中，应明确成员类型确保安全性，合理使用类型守卫和断言。泛型兼容性的核心在于结构而非类型参数本身，这一特性为编写灵活的类型代码提供了基础。
2025-08-06 10:20:20
85
原创 35-TS之类兼容性
本文介绍了TypeScript中类兼容性的核心规则。TypeScript采用结构化类型系统，通过比较实例属性和方法来判断类兼容性，忽略构造函数和静态成员。public属性只需类型匹配，而protected/private属性必须来自相同声明位置。文章通过多个示例展示了基本兼容、私有属性差异和继承关系等典型场景的判断规则。掌握这些规则有助于避免类型错误，提升代码质量。建议使用接口/抽象类统一结构，并谨慎使用类型断言。
2025-08-04 16:56:09
126
原创 34-TS之枚举兼容性
TypeScript枚举类型兼容性规则解析。数字枚举允许数值赋值，但不同枚举即使值相同也不兼容；字符串枚举必须通过成员赋值，不接受字符串字面量。这些规则构建了类型安全边界，防止类型混淆，同时保留转换灵活性。理解这些机制有助于在大型项目中平衡类型安全与开发效率，规避类型污染风险。
2025-08-02 09:52:11
440
原创 33-TS之函数兼容性
本文系统解析TypeScript函数兼容性规则，包括参数数量（可少不可多）、参数类型严格匹配、返回值类型匹配等核心机制。通过代码示例展示了双向协变在参数和返回值中的差异应用，以及函数重载的赋值规则。文章指出，TypeScript通过参数宽松化、返回值严格化的设计原则，在确保类型安全的同时兼顾开发灵活性，为函数赋值和回调传递提供了可靠的类型保障。【148字】
2025-08-01 09:49:54
475
原创 使用Vite创建Vue3项目
Vite是一个现代化的前端构建工具，由Vue.js作者尤雨溪开发。本文详细介绍了使用Vite创建Vue3项目的步骤：通过npm create vite@latest命令初始化项目，选择Vue3和TypeScript模板，安装依赖后运行项目。同时提供了常见错误解决方案，如Node版本过低导致的crypto相关问题。Vite的主要优势包括快速的冷启动、高效的热更新、按需编译等特性，支持多种前端框架。文中还展示了项目成功运行的示例效果，并强调了Vite在开发和生产环境中的重要作用。
2025-07-31 13:57:57
701
原创 TS设计模式之迭代器模式
本文介绍了迭代器模式的设计原理与实现方式。迭代器模式通过提供顺序访问聚合对象元素的方法，同时隐藏内部实现细节。文章详细解析了迭代器接口的关键方法（next()、hasNext()），并展示了TypeScript中的具体实现示例。此外，还探讨了迭代器在JavaScript中的应用场景，包括for...of循环、数据解构、生成器函数等。迭代器模式具有顺序访问有序结构、隐藏内部细节、提高代码内聚性的特点，是现代编程中遍历数据的统一解决方案。
2025-07-30 09:50:25
405
原创 vue3中获取ref元素的几种方式
Vue 3中获取DOM元素和组件引用的主要方法是通过ref属性。在模板中，通过ref绑定变量即可获取元素引用，初始值为null，需在mounted后访问。Composition API中，可使用ref()创建响应式引用，对多个相同元素可使用函数式ref收集。Options API中可通过this.$refs访问。注意事项包括：初始值为null、访问时机需在mounted后、JS中需.value访问、子组件需defineExpose暴露属性和方法。这些技巧能有效帮助开发者操作DOM和管理组件实例。
2025-07-30 09:32:37
1005
原创 TS设计模式之单利模式
单例模式是一种创建型设计模式，确保类只有一个实例并提供全局访问点。通过私有构造函数和静态方法控制实例创建，实现资源统一管理。示例展示了非单例模式与单例模式的对比：前者每次new会创建新实例，后者通过getInstance方法始终返回同一实例。TypeScript实现中需注意静态属性存储单例，且构造函数设为private防止外部实例化。该模式适用于需全局唯一对象的场景，如配置管理、日志系统等。
2025-07-29 09:56:00
472
原创 32-TS之类型兼容性
TypeScript的类型兼容性遵循结构化子类型原则，通过"鸭式辨型法"判断类型兼容性。核心规则包括：1) 结构性比较，只检查类型结构而非名称；2) 允许额外属性，目标类型只需包含源类型所需属性；3) 递归检查嵌套对象。示例显示，满足接口要求的对象可兼容，但属性类型不匹配会导致不兼容。类型兼容性使TypeScript既保持类型安全又具备灵活性。
2025-07-29 09:42:22
16
原创 TS设计模式之代理模式
代理模式是一种结构型设计模式，通过代理对象控制对真实对象的访问。与装饰器模式（增强功能）和适配器模式（改变接口）不同，代理模式主要实现访问控制（如权限检查、访问次数限制）和延迟初始化等功能。示例代码展示了图片代理实现访问控制、缓存和延迟加载等场景，适用于图片懒加载、远程调用、权限控制等需求。代理模式保持接口不变，通过中介层增加控制逻辑，优化系统性能和安全。
2025-07-28 09:56:40
488
原创 31-TS之类型推断
本文介绍了TypeScript的类型推断特性。类型推断是TS编译器自动分析变量类型的能力，无需显式类型标注。使用场景包括：1）根据初始化值自动推断变量类型；2）根据上下文推断事件类型等。类型推断能减少代码冗余、提高开发效率，并提供智能提示，使TS在保持类型安全的同时兼具JS的编码灵活性。
2025-07-28 09:41:10
19
原创 鸿蒙开发之DevEco Studio查看页面元素
本文介绍了在鸿蒙系统开发工具DevEco Studio中查看页面元素结构的方法：首先点击预览功能，然后在预览器左上角点击TT图标，最后选择需要查看的页面元素。通过这三个简单步骤即可快速了解页面结构布局。
2025-07-26 14:25:29
206
原创 TS设计模式之观察者模式（前端最常用）
观察者模式是一种行为设计模式，通过定义对象间一对多的依赖关系实现状态变更的自动通知。其核心包括Subject（维护观察者列表并通知变更）和Observer（实现统一更新接口）。该模式解耦性强，支持动态关系管理，广泛应用于前端事件处理、数据绑定和发布-订阅系统。文中通过TypeScript示例展示了主题状态变化时如何触发多个观察者更新，体现了该模式在Vue响应式系统等场景中的实践价值。
2025-07-26 10:09:47
1379
原创 30-TS之运行时和常量枚举
TypeScript中的枚举分为运行时枚举和常量枚举。运行时枚举会生成真实JavaScript对象，可在运行时访问；而常量枚举使用const声明，编译时会被移除并将值直接内联到使用处，减少代码体积并提高性能。主要区别在于：普通枚举生成对象可运行时访问但体积大，常量枚举编译移除不可访问但效率更高。
2025-07-26 09:56:39
17
原创 TS设计模式之策略模式
策略模式是一种行为设计模式，通过将算法封装成独立类，实现算法与客户端的解耦。它解决了多重if-else带来的维护难题，支持算法灵活替换。文中以用户购买场景为例，对比传统实现与策略模式的差异，展示了通过接口定义统一行为、不同用户类实现具体逻辑的方式。该模式优势包括消除条件判断、提高扩展性、符合开闭原则等，适用于折扣计算、支付处理、路线规划等场景。策略模式使系统更灵活、可维护性更强。（149字）
2025-07-25 14:37:00
248
原创 TS-设计模式-标准工厂模式
本文介绍了设计模式中的工厂模式，重点讲解了其核心概念和使用方法。工厂模式是一种创建型设计模式，通过统一接口创建对象而无需指定具体类。文章首先概述了设计模式的三大类型（创建型、结构型、行为型），然后以TypeScript代码示例展示了标准工厂模式的实现，包括产品接口定义、具体产品类和创建者类。最后总结了设计模式的四大价值：提高代码质量、增强可维护性、促进团队协作和提高开发效率，并强调了设计模式遵循的开闭原则、依赖倒置原则等重要设计原则。
2025-07-25 10:17:26
523
原创 29-TS之枚举成员类型和联合类型
本文介绍了枚举成员作为独立类型及联合类型的用法。枚举类型本质上是包含所有枚举成员的联合类型，数字枚举可用对应数值替代，字符串枚举则必须严格使用枚举值。通过代码示例展示了枚举成员类型和联合枚举类型的具体应用，包括数字枚举的灵活性（允许数值替换）和字符串枚举的严格性（必须使用枚举值）。全文总结了枚举类型作为联合类型的核心特性及其使用要点。
2025-07-25 10:02:44
97
原创 28-TS之数字枚举和字符串枚举
TypeScript枚举分为数字枚举和字符串枚举两种主要类型。数字枚举成员默认从0开始自动递增，支持反向映射，允许使用字面量、常量或计算结果赋值。字符串枚举必须显式赋予字符串值，不支持反向映射，但允许引用同一枚举中的其他成员。关键区别在于数字枚举可自动递增而字符串枚举必须显式赋值，数字枚举支持反向映射而字符串枚举不支持。实际开发中建议根据需求选择：需要与数字序列交互时用数字枚举，需要结构化常量时优先使用字符串枚举。示例代码展示了两种枚举的定义方式和使用注意事项，并提示应避免混合使用数字和字符串的异构枚举以保
2025-07-24 13:54:58
208
原创 详细讲解鸿蒙5.0/鸿蒙next/鸿蒙原生开发环境配置，切换中文版
本文介绍了鸿蒙5.0开发环境的配置流程。鸿蒙5.0是华为新一代全场景分布式操作系统，支持多设备协同。文章详细讲解了从下载DevEco Studio（需16GB内存）、安装软件、创建项目到配置模拟器的完整步骤，并提供了预览界面展示和切换中文版的方法。最后提示可能需要开启Hyper-V虚拟化支持，为后续鸿蒙开发奠定基础环境。
2025-07-21 14:52:36
862
原创 详细讲解uniapp+vue3+canvas实现手写签名功能并生成图片，支持横屏和竖屏两种模式
本文介绍了使用UniApp和Canvas实现签名功能的方法。Canvas是HTML5提供的绘图API，可用于动态绘制图形。文章展示了横屏和竖屏两种签名效果，并提供了完整的签名组件代码。该组件支持触摸绘制、重签、完成签名和返回功能，通过uni.createCanvasContext创建画布上下文，使用touch事件监听绘制路径，最终可通过canvasToTempFilePath导出签名图片。组件适配不同屏幕方向，并可根据设备像素比进行优化。
2025-07-21 14:03:56
236
原创 27-TS之接口合并现象
TypeScript中的接口合并功能允许定义同名接口时自动合并成员。当多个同名接口被定义，它们的属性和方法会进行合并，非函数成员必须类型一致，否则报错；函数成员则视为重载，后定义接口优先级更高。示例展示了两个TestInterface合并后包含name和age属性，并通过Person类实现该合并接口。这一特性提高了代码的灵活性和可维护性。
2025-07-21 11:24:17
19
原创 26-TS之类和泛型
本文介绍了TypeScript中的泛型概念及其应用。泛型通过类型参数化（如<T>）实现代码复用和类型安全，允许同一套逻辑处理多种数据类型。以泛型类Cache<T>为例，展示了如何定义和使用泛型，确保类型一致性和编译器检查。泛型的优势包括类型安全、更好的代码提示以及避免不必要的类型断言，提升了代码的灵活性和可靠性。
2025-07-19 09:45:37
17
原创 详细讲解TS之new关键字做了什么
本文详细解析了TypeScript中new关键字的工作原理：1）创建空对象并绑定原型链；2）执行构造函数初始化实例；3）返回实例对象（可被覆盖）；4）在TypeScript中受类型检查和访问控制约束。文章还指出构造函数可抛出异常中断实例化过程，并通过代码示例展示了继承、原型方法和特殊返回值等特性，完整呈现了从对象创建到返回的全流程。
2025-07-18 10:09:00
1116
原创 25-TS之类和接口
本文介绍了TypeScript中类和接口的关系。主要内容包括：1）类通过"implements"实现接口时必须实现所有属性和方法；2）接口通过"extends"继承类时会继承类的所有属性和方法声明（不包括实现），且若继承类包含protected成员，则只有该类的子类能实现该接口。文章通过示例代码展示了Person类实现PersonInterface接口，以及PersonInterface接口继承Person类后由Student类实现的两种典型用法。
2025-07-18 09:48:48
108
原创 每天一个小技巧之Vue的v-if和v-show详解
Vue 中 v-if 和 v-show 的区别：v-if 通过 DOM 的创建/销毁控制显示，适合不频繁切换的场景；v-show 通过 CSS 的 display 属性控制显示，适合频繁切换的情况。v-if 支持 else 分支，v-show 性能更优但无 else 支持。开发者应根据元素切换频率选择合适的指令。
2025-07-17 15:20:22
243
原创 详细讲解uniapp+vite+vue3+uview-plus搭建跨端项目，新手也可以轻松上手
文章摘要： 本文介绍了uview-plus在uniapp开发中的配置与使用。uview-plus是专为uni-app设计的UI框架，支持多端兼容，尤其适配鸿蒙系统。主要内容包括：通过HBuilder X创建项目、npm安装uview-plus及相关依赖（如dayjs、clipboard等）、配置全局JS库与SCSS主题文件、调整manifest.json和vite.config.js设置、启用easycom组件模式，并集成pinia状态管理。最后演示了如何在页面中使用uview-plus的Button组件结
2025-07-17 14:40:08
1102
原创 24-TS之抽象类
本文介绍了TypeScript中抽象类的概念与用法。抽象类通过abstract关键字声明，不能被直接实例化，主要用于定义基类结构和约束子类实现。与接口不同，抽象类既可定义约束又可包含具体实现。通过示例代码展示了抽象类的定义、继承和实现过程。文章最后建议：轻量级约束优先使用接口，需要共享代码时采用抽象类。
2025-07-17 09:42:52
24
原创 23-TS之类存取器set、get的使用
TypeScript类存取器（getters/setters）是一种控制对象成员访问的重要特性。通过封装私有属性_age并定义set age()和get age()方法，实现了数据校验（如年龄不能为负）、访问日志记录等功能。使用时形式上像属性（p.age），实际执行方法逻辑，适合输入验证、计算属性等场景。注意事项包括避免set递归、不支持async等。该机制通过Object.defineProperty实现，是TS数据封装的关键技术。
2025-07-16 10:33:37
45
原创 uniapp创建vue3项目配置组合式API自动化引入
本文介绍了如何通过unplugin-auto-import插件简化Vue3和uniapp开发中的组合式API引入。作者展示了常规写法与自动引入后的精简写法对比，详细说明了插件安装步骤和vite.config.js的配置方法。该方法通过自动导入vue和uni-app的API，减少了重复代码，提高了开发效率。文章最后总结了三个实现步骤：安装插件、配置文件和享受精简代码带来的便利。适用于使用Vue3和uniapp进行多端开发的开发者。
2025-07-16 09:38:34
713
原创 每天一个小技巧之Vue2和Vue3生命周期名称的变化
Vue3对生命周期钩子进行了调整，用更语义化的命名替代Vue2的选项。主要变化包括：setup()取代beforeCreate和created；新增"on"前缀的API（如onMounted）；beforeDestroy/destroyed改为onBeforeUnmount/onUnmounted；保留activated/deactivated但添加前缀；errorCaptured改为onErrorCaptured。这些变化使生命周期更清晰易理解，同时保持功能不变。
2025-07-15 14:48:57
108
原创 22-TS之类可选属性和参数属性
本文介绍了TypeScript中的可选属性和参数属性。可选属性通过在属性后加问号(?)实现，表示该属性可传可不传。参数属性通过在构造函数参数前加public修饰符，可简化实例属性的定义和赋值。文章通过代码示例展示了两种属性的用法，帮助开发者更高效地编写类定义。
2025-07-15 14:06:26
24
原创 每天一个小技巧之值判空
本文介绍了JavaScript中判断值是否为空的通用方法。通过isEmptyValue函数可处理null、undefined、空字符串/空格字符串、NaN、空数组和空对象等多种情况。函数采用类型判断逻辑：字符串trim后判空，数字检查NaN，数组/对象检查长度，其他类型默认非空。该方法避免了0被误判为空值，完善了常见空值检测场景，代码示例展示了各种输入的处理结果，为前端开发提供了实用的空值判断解决方案。
2025-07-14 10:05:16
263
原创 21-TS之类方法修饰符
摘要：本文介绍了TypeScript中方法修饰符public、protected和private的使用区别。public方法可在类内部、子类和外部使用；protected方法可在类内部和子类使用；private方法仅限类内部使用。示例代码展示了不同修饰符在类和子类中的调用规则。此外，还演示了如何用protected修饰构造函数，限制基类实例化，只能通过子类创建对象。这些修饰符对代码封装和访问控制具有重要作用。
2025-07-14 09:40:29
17
原创 每天一个小技巧之去掉字符串中的空格
本文总结了JavaScript中去除字符串空格的6种方法：1)使用正则\s+去除所有空格；2)trim()去除两端空格；3)trimStart/trimLeft去除左侧空格；4)trimEnd/trimRight去除右侧空格；5)通过正则替换特定空格；6)使用split+join组合。文章针对不同场景（全局/局部/特定类型空格）提供了对应解决方案，并推荐需要去除所有空白字符时使用正则\s或\s+。开发者可根据实际需求选择合适的方法。
2025-07-12 14:05:08
297
原创 大师姐用一个函数实现批量下载图片保存成zip包
本文介绍了如何通过JSZip和FileSaver库实现批量图片打包下载功能。首先需要安装jszip和file-saver依赖，然后通过异步导入方式引入这两个库。核心代码展示了如何将图片列表中的每张图片通过fetch获取后，以Blob形式添加到ZIP压缩包中，并最终生成可下载的ZIP文件。文章还提供了扩展阅读链接，介绍了JavaScript模块的导入导出语法。该方法解决了浏览器限制批量下载图片的问题，实现了一键打包下载功能。
2025-07-12 11:54:13
1225
原创 20-TS之类属性修饰符
本文介绍了TypeScript中类属性的修饰符及其作用范围。主要包括public（公开属性，可在类内部、子类和外部使用）、protected（受保护属性，仅限类内部和子类使用）、private（私有属性，仅在类内部使用）以及readonly（只读属性，不可修改）。通过Person和Student类的示例代码，演示了不同修饰符的实际应用场景和使用限制。最后总结强调了各修饰符的访问权限区别，为开发者正确使用类属性修饰符提供了清晰指导。
2025-07-12 10:51:31
16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人