菜喵007-CSDN博客

原创一文了解什么是Dart

Dart 于 2011 年由 Google 首次推出，旨在提供一种现代化的编程语言，解决 JavaScript 在性能和开发效率上的不足。Dart 支持面向对象编程强类型系统，同时也支持动态类型，使其既适合快速原型开发，也适合大型项目的严格类型管理。跨平台：Dart 可用于 Web、移动端（通过 Flutter）、服务器端（通过 Dart VM）以及命令行应用。高性能。

2025-07-09 17:25:07 816 1

Service Worker 是一种运行在浏览器后台的脚本，独立于网页线程，能够拦截网络请求、缓存资源以及实现推送通知等功能。它是现代 Web 开发中实现离线体验性能优化和推送通知的核心技术。Service Worker 运行在独立的 JavaScript 线程中，不会阻塞主线程，因此非常适合处理耗时任务。Service Worker 是构建现代 Web 应用的重要工具，能够显著提升用户体验和性能。通过离线缓存、推送通知和后台同步等功能，开发者可以打造接近原生应用的 Web 体验。

2025-07-03 11:31:52 757

原创 WebWorker 深入解析

WebWorker 是一个独立的 JavaScript 执行环境，运行在与主线程隔离的线程中。独立性：Worker 线程有自己的全局上下文（self），不能直接访问 DOM、windowdocument等对象。消息机制：主线程和 Worker 通过和onmessage通信，像两个人在微信上发消息。异步运行：Worker 不阻塞主线程，适合 CPU 密集型任务，比如复杂计算或数据处理。WebWorker 就像 Vue3 应用的“超级外援”，让耗时任务跑在后台，组件保持丝滑。

2025-06-19 06:00:00 892

原创 WebWorker实现获取视频缩略图、大数组排序和 CSV数据解析

本文展示了 WebWorker 在批量视频缩略图生成、大数组排序和 CSV 数据解析中的应用。WebWorker 让主线程专注于 UI 渲染，将计算密集型任务交给后台线程，确保页面流畅。结合 Tailwind CSS 和 TypeScript，代码既美观又安全，适用于视频管理、数据分析等场景。开发者可根据需求调整 Worker 任务，释放 WebWorker 的性能潜力！

2025-06-19 06:00:00 751

原创 IndexedDB 实现断点续传、分片上传

通过 IndexedDB 实现可靠的断点续传功能，支持浏览器关闭后经用户确认自动续传。Tailwind CSS 优化了界面，TypeScript 确保类型安全，完善的错误处理提升了可靠性。代码适用于云存储、视频上传等场景，开发者可根据需求调整分片大小或扩展多文件支持。

2025-06-18 17:06:47 1005 2

原创 IndexedDB 深入解析

IndexedDB是浏览器端的非关系型数据库，用于存储大量结构化数据，支持键值对、对象存储和事务处理。相比localStorage，它提供更强的异步操作、索引和事务管理能力，适合离线应用、PWA等场景。核心概念包括数据库、对象存储、键、索引和事务，操作均为异步执行。IndexedDB存储容量更大（可达数百MB），支持复杂查询，但API较复杂。

2025-06-18 16:54:23 1105

原创 Alova vs Axios：表面相似，内核为何更推荐 Alova？

尽管 Alova 在基本请求写法上与 Axios 有些相似，但其声明式设计、响应式状态管理、内置策略和性能优化使其在现代前端开发中更具优势。特别是在 Vue 3 项目中，Alova 与 Composition API 的深度集成、丰富的业务策略和模块化管理能力，使其成为比 Axios 更优雅、高效的选择。

2025-06-16 16:37:46 821

原创 Alova 封装与 Vue 3 集成示例

通过对 Alova 的封装，我们创建了一个统一的request函数和模块化的 API 管理方案，极大简化了 Vue 3 项目中的请求逻辑。封装后的代码结构清晰、类型安全、易于维护，适合从小型项目到企业级应用的各种场景。Alova 的响应式状态管理、缓存机制和内置策略进一步提升了开发效率和用户体验。

2025-06-16 16:30:14 925 2

原创前端开发还不知道Alova？

Alova 是一个轻量级前端请求策略库，通过声明式 Method 实例简化 API 调用。其核心特点包括：声明式请求管理 - 将请求信息封装为可复用的 Method 实例响应式状态集成 - 自动与 Vue 3 的响应式系统绑定内置业务策略 - 提供分页、表单等 20+ 种场景解决方案高性能机制 - 支持请求共享、缓存和预加载在 Vue 3 中使用时，开发者通过 useRequest 和 useWatcher 等 Hook 管理请求状态，Method 实例可配置缓存、参数转换等逻辑。

2025-06-16 16:28:53 838

原创 nvue全攻略：从入门到性能优化

nvue 就像一道“麻辣香锅”，性能火辣但限制不少。只要掌握 Flex 布局、<text>组件、性能优化技巧，你就能用 nvue 开发出丝滑无比的 App！从长列表到视频滑动，从下拉刷新到复杂动画，nvue 都能让你“哇”一声！快去 HBuilderX 创建一个 nvue 页面，感受原生渲染的快感吧！想深入了解可参考官方文档！

2025-06-13 11:28:29 1910

原创 Vue3+TypeScript实现迭代器模式

本文通过幽默的“电脑零件清单”示例，介绍了Vue3+TypeScript实现迭代器模式的实用方法。文章首先形象地将迭代器模式比作“零件管理员”，解释了其核心角色（迭代器接口、具体迭代器、聚合接口等）。接着详细展示了代码实现过程，包括零件类、迭代器接口、具体迭代器类和Vue3组件的编写。文章还分析了迭代器模式在前端开发中的应用场景，如列表渲染、分页加载等，并提供了注意事项和优化建议。通过生动的类比和完整代码示例，让读者轻松理解如何用迭代器模式优雅地遍历数据集合。

2025-06-13 00:00:00 767

原创 Vue3+TypeScript实现责任链模式

摘要（148字）：本文用幽默的电脑维修店比喻讲解责任链模式，通过Vue3+TypeScript实现了一个"维修请求处理系统"。文章展示了抽象处理者接口、具体处理者（初级/高级技师）的实现，以及Vue组件如何构建责任链并提交请求。适用于表单验证、事件处理等需要分级处理的场景，强调了解耦请求与处理者、动态扩展的优势，同时提醒注意链长度和默认处理。通过TypeScript的类型检查和Vue3的组合式API，使责任链模式在前端开发中更安全高效。

2025-06-13 00:00:00 1184

原创 Vue3+TypeScript实现状态模式

摘要：本文通过幽默的"电脑维修店"场景，介绍了Vue3+TypeScript实现状态模式的方法。状态模式将对象行为封装在不同状态类中（如待诊断、维修中、已修好），通过上下文对象切换状态，避免复杂的条件判断。文章详细展示了抽象状态接口、具体状态类、上下文对象的设计，并提供了Vue3组件集成示例。这种模式适用于表单流程、UI状态切换等场景，能有效管理复杂的状态转换逻辑。TypeScript的类型安全特性与Vue3的响应式系统相结合，使状态管理更加可靠和灵活。

2025-06-13 00:00:00 970

原创 Vue3+TypeScript实现访问者模式

摘要：本文通过电脑零件清单分析这一幽默场景，介绍Vue3+TypeScript实现访问者模式的方法。访问者模式允许在不修改元素类的前提下添加新功能，就像审计员检查零件而不改动零件本身。文章展示了元素接口、具体元素类、访问者接口和具体访问者类的实现代码，并通过Vue3组件演示了零件数量和价值的统计分析。该模式适用于动态功能扩展、数据结构遍历、报表生成等前端场景，同时也讨论了适用性限制和注意事项。TypeScript的类型检查确保访问过程的安全性和可靠性。

2025-06-13 00:00:00 1176

原创 Vue3+TypeScript实现中介者模式

中介者模式就像前端开发中的“维修调度中心”，通过集中协调对象交互，简化网状关系，降低耦合。在Vue3+TypeScript项目中，它适合组件通信、事件管理或复杂UI交互。中介者模式让你的代码像智能调度台，通信清晰，协作高效，优雅又省心！

2025-06-13 00:00:00 1002

原创 Vue3+TypeScript实现解释器模式

摘要：本文通过Vue3+TypeScript实现了一个"电脑配置价格计算器"示例，生动讲解了解释器模式。该模式将表达式拆解为零件价格（终结符）和运算规则（非终结符），通过Context查询价格并计算结果。文章包含完整的代码实现，包括抽象表达式接口、零件表达式、加法表达式和环境角色，并以Vue3组件形式呈现交互界面。解释器模式适用于前端开发中的自定义规则解析、动态配置计算等场景，但需注意保持语法简单和性能优化。TypeScript的类型检查和Vue3的组合式API为模式实现提供了良好支持。

2025-06-13 00:00:00 1206

原创 Vue3+TypeScript实现命令模式

本文通过一个电脑维修店的幽默比喻，介绍如何使用Vue3和TypeScript实现命令模式。该模式将维修请求封装成工单对象，使客户请求与技师执行解耦，支持灵活调度和操作记录。文章详细演示了命令接口、具体命令类、接收者和调用者的代码实现，并构建了一个Vue3组件作为"维修工单站"。命令模式适用于前端的事件处理、任务队列、操作日志等场景，能有效解耦请求，支持撤销/重做功能。文章还强调了TypeScript类型安全的优势及性能注意事项，帮助开发者优雅地管理复杂请求流程。

2025-06-12 17:21:23 813

原创 Vue3+TypeScript实现备忘录模式

本文通过幽默的电脑组装店场景，介绍了备忘录模式（Memento Pattern）在Vue3+TypeScript中的实现。备忘录模式允许在不暴露对象内部细节的情况下保存和恢复对象状态，就像游戏存档功能。文章详细讲解了备忘录模式的三个核心角色：发起人（管理状态）、备忘录（存储状态）和管理器（保管存档），并通过Vue3组件展示了"电脑配置存档系统"的实际应用。这种模式特别适合表单状态管理、编辑器历史记录和状态回滚等前端场景。

2025-06-12 17:20:42 770

原创 Vue3+TypeScript实现工厂模式

文章摘要：本文通过幽默的电脑组装厂比喻，讲解如何在Vue3+TypeScript中实现工厂模式。将工厂模式分为三种形式：简单工厂（全能前台小哥模式）、工厂方法（专精生产线模式）和抽象工厂（一站式配件超市模式），每种都配有代码示例和应用场景分析。使用电脑组装案例生动展示如何通过工厂模式解耦对象创建过程，提升代码可维护性。文章强调工厂模式在前端开发中的应用价值，特别是管理复杂对象创建时的优势，同时指出不同工厂模式的适用场景和优缺点。

2025-06-12 06:00:00 643

原创 Vue3+TypeScript实现单例模式

摘要：本文以幽默的“电脑厂保修卡”为例，用Vue3+TypeScript演示单例模式的两种实现方式。饿汉式像急性子厂长，开厂就准备好保修卡（静态实例）；懒汉式则等客户上门才制卡（延迟加载+双重检查）。文章详细对比了两种方式的代码实现、优缺点，并分析了在前端开发中的适用场景（全局状态、配置服务等）。特别提醒：JavaScript单线程环境可简化线程安全处理，同时要避免单例滥用，合理选择Vue3的Pinia或组合式API替代方案。

2025-06-12 06:00:00 698

原创 Vue3+TypeScript实现建造者模式

本文通过一个电脑组装店的生动比喻，介绍了建造者模式在前端开发中的应用。作者使用Vue3+TypeScript实现了一个电脑定制系统，演示了如何将复杂对象的构建过程拆解为多个步骤（主板、CPU、内存安装）。文章详细讲解了建造者模式的四个核心角色（产品、抽象建造者、具体建造者和导演者），并提供了完整的代码实现。特别适合需要分步构建复杂对象（如动态组件、主题定制）的场景，同时提醒读者在小项目慎用避免过度设计。通过这一幽默案例，读者可以轻松理解建造者模式的核心价值：将构建过程与产品分离，提高代码的可维护性和灵活性。

2025-06-12 06:00:00 608

原创 Vue3+TypeScript实现原型模式

本文介绍了使用Vue3和TypeScript实现原型设计模式的电脑配置克隆系统。原型模式通过克隆现有对象而非重新创建，可高效生成相似对象。文章以电脑组装为比喻，展示了如何定义Computer原型类实现clone()方法，并在Vue组件中应用。该模式适合动态组件复制、状态模板复用等前端场景，但需注意浅/深拷贝的选择及性能考量。借助TypeScript的类型系统可确保克隆安全性，Vue3的响应式特性则便于管理克隆对象状态。原型模式在合理使用时，能显著提升对象创建的效率和灵活性。

2025-06-12 06:00:00 749

原创 Vue3+TypeScript实现适配器模式

本文通过幽默的电脑外设接口转换案例，生动讲解了适配器模式在前端开发中的应用。文章使用Vue3+TypeScript实现了一个“外设适配系统”，将老式PS/2键盘包装成USB-C接口适配新电脑。核心展示了如何定义目标接口、被适配者以及实现适配器类，并在Vue组件中应用。还分析了适配器模式在前端的典型应用场景和注意事项，强调该模式在整合遗留系统、统一组件接口和数据格式转换中的价值。通过"转接头"的比喻，让读者轻松理解这种让不兼容接口协同工作的结构型设计模式。

2025-06-12 06:00:00 846

原创 Vue3+TypeScript实现桥接模式

本文通过“电脑显示器连接”的生动例子，介绍了桥接模式（Bridge Pattern）在Vue3+TypeScript中的实现。文章将显示器（抽象部分）与渲染技术（实现部分）分离，通过桥接灵活组合，展示了如何用LCD/OLED渲染技术适配电竞/办公显示器。代码示例包含了抽象类、接口和Vue3组件的完整实现，并分析了桥接模式在UI组件与样式分离、多平台适配等场景的应用。文章以幽默风格讲解了模式优势，同时提醒注意抽象分离、性能考量等注意事项。

2025-06-12 06:00:00 781

原创 Vue3+TypeScript实现组合模式

摘要：组合模式让前端管理树形结构变得简单。本文通过Vue3+TypeScript实现了一个"电脑组件树"的幽默案例，演示如何统一处理单个零件（CPU、内存）和零件组合（主板、整机）。核心包含抽象组件接口、叶子组件（不可添加）和容器组件（可嵌套），并用Vue组件展示整个零件树。该模式特别适合菜单、表单、文件系统等嵌套结构，让客户端代码以统一方式操作简单和复杂对象。注意接口统一设计和性能优化，避免在不必要场景使用。组合模式使前端代码像整齐的零件仓库一样清晰有序。

2025-06-12 06:00:00 554

原创 Vue3+TypeScript实现装饰器模式

《Vue3+TypeScript实现装饰器模式：电脑配置的动态升级术》通过生动比喻介绍了装饰器模式在前端开发中的应用。文章将装饰器模式比作"电脑配件升级套装"，能够动态为对象添加新功能而不改变原有结构。文中以Vue3+TypeScript实现了一个"电脑配置升级系统"，包含基础电脑类、抽象装饰器类和具体装饰器类（如散热器和RGB灯条）。该模式适用于组件功能增强、主题扩展等场景，相比继承更加灵活，但需注意接口一致性和性能优化。

2025-06-12 06:00:00 991

原创 Vue3+TypeScript实现外观模式

外观模式就像前端开发中的“电脑组装一键服务”，通过简化的高层接口，隐藏子系统的复杂性，让客户端操作轻松到飞起。在Vue3+TypeScript项目中，它适合包装复杂API、统一子系统操作或简化组件交互。外观模式让你的代码像全能店员一样，客户（代码）只需点单，复杂流程全搞定！

2025-06-12 06:00:00 540

原创 Vue3+TypeScript实现享元模式

摘要：本文通过Vue3+TypeScript实现享元模式，用“电脑零件仓库”的幽默比喻讲解该模式如何通过共享相同零件来节省内存。文章演示了如何定义享元接口、具体享元类和享元工厂，实现零件型号(内部状态)与安装位置(外部状态)的分离管理。在Vue3组件中实现零件安装功能，展示享元模式在大量相似对象场景下的优势，如虚拟列表优化和数据缓存。最后总结了享元模式的适用场景、注意事项，强调正确使用该模式能显著提升前端性能。

2025-06-12 06:00:00 870

原创 Vue3+TypeScript实现代理模式

本文通过幽默的电脑维修店比喻，介绍了Vue3+TypeScript实现代理模式的实践。代理模式就像维修店的前台，控制对真实服务（技师）的访问，可添加日志记录等功能。文章展示了抽象主题、具体主题和代理类的代码实现，并在Vue3组件中应用该模式。适合访问控制、懒加载、缓存等场景，但需注意避免过度使用。代理模式使代码更安全高效，就像贴心前台让客户省心。

2025-06-12 06:00:00 846

原创 Vue3+TypeScript实现策略模式

本文介绍了如何在Vue3+TypeScript项目中应用策略模式，通过“电脑升级系统”的比喻生动讲解。策略模式将不同升级方案(处理CPU/内存)封装为独立策略类，由上下文统一管理，实现灵活切换。文章包含完整代码示例，从策略接口定义到Vue组件实现，并分析了该模式在前端开发中的典型应用场景和注意事项。策略模式适合需要动态切换算法或行为的场景，通过解耦业务规则与核心逻辑，提升代码的可维护性和扩展性。TypeScript的类型检查为策略实现提供了额外安全保障。

2025-06-12 06:00:00 884

原创 Vue3+TypeScript实现模板方法模式

模板方法模式就像前端开发中的“电脑组装流水线”，通过定义固定流程框架，让子类灵活实现具体步骤。在Vue3+TypeScript项目中，它适合统一组件渲染、表单处理或API请求流程。模板方法模式让你的代码像标准化生产线，流程清晰，定制自由！

2025-06-12 06:00:00 860

原创 Vue3+TypeScript实现观察者模式

《Vue3+TypeScript实现观察者模式：电脑库存实时通知系统》通过幽默的电脑店库存管理案例，生动讲解了观察者模式在前端的应用。文章以库存管理系统为主题，销售部和采购部为“观察者”;，演示了如何用Vue3和TypeScript实现库存变化时的自动通知机制。代码示例展示了主题接口、具体主题以及不同观察者的实现，并提供了Vue3组件整合方案。文章还分析了观察者模式在UI事件处理、数据同步等场景的适用性，强调了类型安全的优势，并提醒注意性能优化。

2025-06-12 06:00:00 521

原创深入理解React Hooks的原理与实践

本文深入剖析React Hooks的核心原理与实践。首先揭示了Hooks通过闭包和Fiber架构保存状态的本质，解析了useState和useEffect的内部机制。接着提出最佳实践建议，包括合理拆分自定义Hook和避免常见陷阱。最后通过电商项目案例展示Hooks在实际应用场景中的用法。文章指出，理解Hooks原理并遵循最佳实践，能显著提升React开发的效率与代码质量，为开发者提供了从理论到实践的全面指导。

2025-06-05 11:46:55 1052

原创最新版在线客服系统开发

在线客服系统开发摘要本项目开发了一个基于Web的在线客服系统，包含用户端和客服端两个模块。用户端无需登录即可使用，支持实时聊天和消息接收；客服端需登录认证，提供类似微信的交互界面。系统采用Vue3+TypeScript+AntDesignVue构建前端，Spring Boot 3+MyBatis-Plus+MySQL处理后端业务，通过SocketIO实现实时通信。主要功能包括：用户分配管理、消息存储、虚拟列表优化渲染、历史消息分页查询等。数据库设计包含用户、客服和消息三张核心表，采用JWT进行客服身份认证

2025-06-05 11:28:43 1075

原创 ThreeJS基础知识

Three.js 是一个用于创建Web 3D场景的JavaScript库。本文介绍了其核心功能，包括场景创建（Scene）、几何体（Geometry）与材质（Material）的使用、相机（Camera）设置、渲染器（Renderer）配置、光源（Lighting）类型以及GUI调试工具。通过代码示例展示了如何构建3D对象，调整其属性，并使用透视相机渲染场景。还介绍了动画循环的实现方法和常用光源的创建，为开发者提供了快速上手的实践指南。

2025-05-30 17:10:27 1155

原创如何做好一份技术文档

摘要：技术文档的撰写需明确目标与受众，根据读者水平调整语言复杂度。结构应层次分明，包含背景介绍、详细内容、常见问题等模块，并使用标题分段。语言需简洁准确，统一术语，多用主动语态。代码示例和流程图等辅助工具能提升可读性。文档需持续迭代，通过反馈、版本控制和定期审查保持更新。遵循这些原则，可编写出高效传递信息、降低沟通成本的技术文档。

2025-05-30 16:24:38 810

原创 uCharts自定义数据点上方的数据文案

项目引入uCharts不再过多叙述，初始效果如下：想要的效果是数据自定义一些数据文案，例如：

2025-01-21 16:07:27 335 1

原创 uniapp项目发布H5，设置支付宝环境下访问H5自定义导航栏

API详情请参考官网文档。

2025-01-08 14:27:23 302

原创 Nginx部署前端Vue项目

《Nginx部署Vue.js项目全流程指南》摘要：本文详细介绍了使用Nginx部署Vue.js单页应用的完整流程。首先通过npm run build生成dist静态文件，然后配置Nginx服务器指向该目录，并设置SPA路由重定向。

2024-08-31 21:12:46 1184

原创腾讯云TRTC无UI集成——分享屏幕主流、辅流（Vue2+JS+TRTC无UI集成）

在 setRemoteVideo(view) 中移除旧的监听器：每次调用 setRemoteVideo(view)时，先移除之前可能存在的监听器，防止重复监听。使用不同的事件监听器或参数区分：可以通过将主流和辅流的视频渲染逻辑完全分离，在不同的监听器中处理它们，确保每个流都使用独立的 view。在事件监听器中判断 view 参数：在触发事件时，根据传入的 view参数来区分主流视频源和辅流视频源，确保它们渲染到正确的视图上。因此，当触发该事件时，多个监听器会被执行，导致视频源被渲染在多个视图上。

2024-08-31 10:49:39 1118