- 博客(414)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 【threejs封装】基于Disposable协议的企业级Three.js EventBus设计与实现
在前端应用日益复杂的今天，资源生命周期管理已经成为决定系统稳定性的关键因素。传统EventBus的设计缺陷在长期运行的3D应用中会被无限放大，成为系统的重大隐患。本文提出的基于Disposable协议的企业级EventBus，从资源管理的底层逻辑出发，彻底解决了内存泄漏、异常扩散、执行顺序混乱等行业共性问题。它将事件订阅视为一种需要被管理的资源，通过统一的契约实现了所有资源的生命周期管理。
2026-05-27 17:49:50
361
1
原创 【threejs封装】Disposable 模式从入门到精通
本文介绍了前端开发中常见的资源泄漏问题及其解决方案——Disposable模式。文章首先通过一个计数器组件的例子展示了传统资源管理方式的四大缺陷：清理逻辑分散、异常导致清理失败、异步流程中的竞态条件以及资源组合复杂度高。随后提出了Disposable模式的解决方案，该模式通过将资源创建和清理逻辑封装在一起，确保资源能够被可靠地释放。文章通过代码示例对比了传统方式和Disposable模式的实现差异，展示了后者如何更简洁、更可靠地管理前端资源，避免内存泄漏和状态不一致问题。这种模式已被React、Vue等主流
2026-05-26 21:41:33
364
原创 【Threejs二次封装】为什么二次封装Three.js时，几乎都会重写Clock而不用原生delta
Three.js原生Clock存在多个设计缺陷，导致在复杂项目中容易出现时序问题。主要问题包括：1) getDelta()的"调用即消耗"特性会导致多系统调用时delta值错误；2) 缺乏delta上限保护，卡顿时会出现物体瞬移；3) 不支持时间缩放功能；4) 暂停/恢复逻辑不完善；5) 状态管理混乱。自定义Clock通过统一计算delta、设置最大delta值、支持时间缩放、优化暂停逻辑等方式解决了这些问题，同时还提供了帧率统计、独立依赖等额外优势。原生Clock仅适用于简单demo，而二次封装时重写Cl
2026-05-26 17:18:39
368
原创 【前端开发】【疑难杂症】前端开发端口突然用不了的真正原因
摘要： Windows系统开启虚拟化功能（如Hyper-V、WSL、Docker）可能导致开发端口（如7777）被自动保留而无法使用。解决方法包括：1）临时重启Windows NAT服务释放端口；2）永久调整系统动态端口范围避开7777；3）为Node.js添加端口绑定权限；4）禁用Hyper-V功能；5）配置Vite自动切换备用端口。根本原因是系统虚拟化服务会随机保留大量端口，重启或更新后可能占用开发端口。建议先使用临时方案快速恢复，再选择永久解决方案。（149字）
2026-04-12 16:01:28
225
原创 【前端websocket】企业级功能清单
健壮性：进电梯再出来，连接能否在 3s 内恢复？资源开销：在 Tab 标签页切后台时，心跳是否在疯狂浪费 CPU 和电量？可维护性：业务代码是否还在处理readyState？（优秀的封装应该让业务方感知不到 WebSocket 的存在，只看onData和send。
2026-04-10 14:31:07
408
原创 【前端WebSocket】心跳功能，心跳重置策略、双向确认（Ping-Pong） 以及 指数退避算法（Exponential Backoff）
特性解决的问题用户体验提升重置策略冗余数据包节省流量，降低功耗。双向确认服务端死机/单向链路故障确保数据真的能“收发自如”，而不是自言自语。指数退避网络风暴 & 持续重试资源浪费在极端环境下表现得更“绅士”，提高恢复成功率。在移动端（iOS/Android），如果用户将 App 切到后台，系统可能会挂起 WebSocket 进程。此时，即便有心跳也可能失效。在这种情况下，建议结合（检测页面隐藏/显示），在用户重新切回页面时，强制执行一次。
2026-04-10 14:25:39
484
原创 【css技巧】用 CSS 实现：移入立即执行，移出延时返回
本文介绍了一种CSS实现"移入立即执行，移出延时返回"效果的技巧。传统写法因delay在动画触发时就被确定而失效，正确方案是：限制transition仅作用于特定属性（如right），让delay不参与动画触发过程。通过hover:delay-0实现进入无延迟，默认delay-1000实现离开延迟1秒。关键点是控制动画触发方向使用不同delay，而非直接控制hover状态。建议避免transition-all，改用transition-[具体属性]确保行为稳定。这种方案适用于悬浮按钮、侧
2026-04-09 14:32:05
225
原创 【前端插件神器】【devTools】LocatorJS在浏览器中直接定位并跳转到源代码,解决react无vue官方devtools跳转的功能
LocatorJS是一款开源前端调试工具，能够实现浏览器UI组件与源代码的双向定位。它通过集成浏览器扩展和框架插件（支持React/Vue等），利用源映射技术建立可视化元素与代码的关联。主要功能包括组件高亮显示、点击跳转至IDE对应代码位置，支持多框架且无需复杂配置。该工具由Pawel Grzybek开发，采用MIT协议，特别适合大型前端项目，能显著提升组件调试效率，减少手动查找代码的时间。
2026-03-05 17:20:46
101
原创 【前端】前端动画优化的核心
前端动画性能优化核心要点： 属性选择：优先使用仅触发合成的transform/opacity，避免触发重排/重绘的width/top等属性； 渲染优化：通过will-change或transform: translateZ(0)创建独立渲染层，限制绘制区域； 执行控制：使用requestAnimationFrame保证流畅帧率，高频动画需节流； 工具避坑：选用GSAP等专业库，避免动画中读取布局属性，低配设备降级处理。 关键技巧：用transform替代位移/缩放，减少渲染层内存占用，动画与浏览器刷新同步。
2026-02-24 13:50:35
667
原创 【前端动画】FLIP 动画原则
FLIP是一种高性能前端动画实现方案，通过First/Last/Invert/Play四个步骤，将布局变化转化为GPU加速的transform动画。先记录初始状态，修改DOM后计算最终状态，用transform反向偏移元素，最后播放过渡动画。这种方法避免了昂贵的重排，仅触发合成层渲染，显著提升列表重排、卡片展开等动画性能。关键是通过getBoundingClientRect获取几何信息，利用transform差值实现平滑过渡，建议配合will-change和合理时长优化效果。
2026-02-24 11:40:54
650
原创 【Tailwind】 大小屏动态适配方案
Tailwind CSS 提供了两种响应式设计思路：Mobile First（小屏原始+大屏增强）和 Desktop First（大屏原始+小屏裁剪）。前者默认样式针对小屏，使用min-*断点逐步增强；后者默认样式针对大屏，使用max-*断点逐步降级。关键区别在于默认状态的设定和失败策略方向，而非单纯语法差异。工程中必须保持一致性，同一属性只能选择一种断点方向（min或max），避免混合使用。选择依据应取决于项目类型：移动优先产品适合Mobile First，而数据密集系统更适合Desktop First。
2026-01-20 14:26:30
383
原创 【ThreeJS】camera-controls 的“使用详解 + 参数详解”
本文详细解析camera-controls的核心使用逻辑与参数语义。重点包括：1）必须通过update(delta)驱动相机状态更新；2）参数本质控制的是spherical、target等数学状态而非简单动画效果；3）核心API如setLookAt、fitToBox等在实际工程中的应用场景；4）边界系统等高级功能的实现原理。文章强调所有参数都有明确的数学映射关系，并提供典型工程配置示例，帮助开发者精准控制相机行为而非仅"调手感"。
2025-12-30 17:33:34
1030
原创 【ThreeJS】camera-controls---高性能动画相机控制库
《camera-controls：状态驱动的相机控制系统解析》摘要： camera-controls是一个基于状态管理和插值过渡的相机控制库，其核心思想是将相机位置、目标点等参数作为可预测、可插值的数学对象来管理。与Three.js内置的OrbitControls不同，它采用声明式而非事件驱动的方式，通过维护球坐标、目标点等内部状态模型，实现更精确的相机控制。该库支持手动调用update(delta)，便于集成到各种动画系统中，并提供丰富的约束系统和二次封装能力。特别适用于需要业务逻辑驱动相机、状态可序列化
2025-12-30 17:23:38
996
原创 【ThreeJS】Renderer阴影类型区别
Three.js 提供4种阴影类型，各具特点： 1️⃣ BasicShadowMap：性能最优但锯齿明显，适合移动端/低配设备 2️⃣ PCFShadowMap：边缘轻微柔化，性能适中，推荐中端设备 3️⃣ PCFSoftShadowMap（默认）：柔化效果更好，桌面场景首选 4️⃣ VSMShadowMap：最自然柔和但性能高，需注意光晕问题，适合高端设备 📌 建议：移动端用Basic，桌面默认PCFSoft，高级场景可选VSM。性能与效果需权衡选择。
2025-12-29 16:43:58
338
原创 【Docker】必备速查指南
Docker 快速使用指南：包含容器查看(docker ps)、终止(stop/down)、运行(run/up)等基本操作。重点对比docker run(单容器测试)与docker-compose(多服务管理)的区别，后者通过YAML文件定义服务、卷和网络。Compose文件支持服务依赖、环境变量配置，适合复杂项目。常用命令总结包括日志查看、容器交互及删除操作。建议开发时使用卷挂载，生产环境采用多阶段构建优化镜像。
2025-11-14 17:23:56
373
原创 【docker】运行对应服务
使用Docker运行Redis等数据库服务无需本地安装，只需一条命令即可快速部署。通过Docker官方镜像，用户可以直接运行Redis等服务（如docker run -d -p 6379:6379 redis），自动完成镜像下载、服务启动和端口映射。与传统安装方式相比，Docker容器化方案更干净、版本可控，且使用体验完全一致（通过localhost相同端口访问）。此外，该方法同样适用于PostgreSQL、MySQL等主流服务，支持通过简单命令进行启动/停止/删除等全生命周期管理，避免系统污染并节省资源。
2025-11-14 15:59:58
431
原创 【threejs】系统梳理一下 Three.js 摄像机体系
分类关键点相机类型透视（真实） / 正交（技术）控制方式手动设置 or OrbitControls限制范围更新响应实战常见俯视、绕场、跟随、展示、BIM视角。
2025-10-30 17:50:35
1279
原创 【threejs】材质共享导致的典型问题
Three.js材质共享问题是加载GLB或复制模型时的常见坑。核心在于材质是引用而非拷贝，导致修改一处，多处同步变化。问题常出现在GLTF导入、模型复制和实例化网格时，表现为透明度、贴图、流光等属性联动变化。解决方案包括克隆材质、深度克隆贴图、针对性复制材质等，需根据场景权衡性能。验证材质是否共享可通过统计材质实例数量。实战中，独立材质适用于动态效果控制，而静态模型可共享材质以提升性能。最后提供了不同规模模型的优化建议和解决方案对照表。
2025-10-30 17:40:40
1119
原创 【Three.js】必学：GLB模型遍历与节点操作指南
本文详细介绍了Three.js中GLB模型层级结构的遍历与节点操作方法。主要内容包括：GLB模型的树状结构本质，使用object.traverse()进行深度优先遍历，筛选Mesh、Group等节点的技巧，访问层级关系的方法，以及性能优化建议。还提供了常见应用场景的代码示例，如查找特定节点、修改材质属性、添加动画效果等。文章强调通过规范命名、使用调试工具和掌握核心API，可以高效处理复杂的3D模型层级结构，为Three.js开发者提供了实用指南。
2025-10-30 17:34:28
1089
原创 Zod-to-OpenAPI：自动生成文档全解析
zod-to-openapi 是一个将 Zod schema 转换为 OpenAPI 文档的工具。其核心流程为：首先通过 extendZodWithOpenApi 扩展 Zod 方法，为 schema 添加 OpenAPI 元数据；然后将所有 schema 注册到 OpenAPIRegistry，并通过 registerPath 定义接口路径、请求和响应；最后使用 OpenApiGeneratorV3 生成 OpenAPI 规范的 JSON 文档，可输出给 Swagger UI 或 Redoc 使用。该工具
2025-10-27 11:49:17
501
原创 【NestJS】 OpenAPI文档：运行时动态生成揭秘
NestJS 的 OpenAPI 文档是基于 Reflect 元数据，在运行时动态扫描生成的；但你可以通过手动导出静态 JSON 文件。
2025-10-25 19:00:27
598
原创 【NestJS】深入理解NestJS装饰器原理
NestJS的装饰器系统是框架核心，它通过TypeScript装饰器语法和Reflect Metadata机制实现。装饰器分为类装饰器、方法装饰器、参数装饰器和属性装饰器四种类型，在类加载阶段就执行而非运行时。多个装饰器执行顺序遵循"从下到上"的规则，NestJS启动时会读取装饰器生成的元数据构建路由映射、依赖注入等逻辑。整个过程可概括为：编译时装饰器执行并记录元数据，启动时Nest读取元数据注册逻辑，请求时应用这些预定义规则。
2025-10-25 18:56:35
969
原创 【NestJS】 管道(Pipe)核心原理解析
NestJS 管道（Pipe）详解：本文全面介绍了 NestJS 中的 Pipe 机制，包括其基本概念（参数转换验证器）、不同级别管道的使用（参数级、方法级、控制器级和全局管道），以及自定义管道的实现方法。重点解析了管道执行顺序、内部工作原理和不同场景下的应用特点，如参数级管道精确控制单个参数，全局管道自动处理所有装饰器参数，以及请求级管道可访问请求上下文。文章还提供了自定义管道的代码示例和使用场景对比表，帮助开发者根据需求选择合适的管道实现方式。
2025-10-24 17:03:32
918
原创 【NestJS】Reflect Metadata 全解
Reflect Metadata：TypeScript元数据编程指南 Reflect Metadata是TypeScript中用于存储和读取类、方法、属性元数据的API。它通过Reflect.defineMetadata()和Reflect.getMetadata()实现元数据的定义与读取，常用于框架开发（如NestJS）。核心功能包括： 为类/方法附加额外信息（如路由路径、HTTP方法） 通过装饰器语法简化元数据标记 支持原型链查询和精确查询 提供完整的元数据生命周期管理（增删查改） 典型应用场景： 构建
2025-10-24 16:09:56
736
原创 【NestJS】依赖注入：超越自动new的深层解析
NestJS 依赖注入（DI）远不止简单的自动实例化类，而是一套完整的对象生命周期管理系统。它基于 IoC 容器实现依赖图解析，结合工厂模式、单例模式等设计模式，提供强大的模块化能力。核心优势包括：通过抽象接口实现可插拔架构、轻松mock依赖提高可测试性、支持不同作用域实例（单例/请求/瞬时）等。这种机制实现了控制反转，让业务代码无需关心依赖创建，使系统更灵活、可扩展且易于维护。
2025-10-24 14:39:51
749
原创 【NestJS】依赖注入（DI） 的模块系统、`imports`、`@Module`、`providers` 之间的关系彻底搞清楚
NestJS模块机制核心要点：模块(@Module)作为代码组织单元，包含providers(可注入服务)、controllers(控制器)、imports(导入其他模块)和exports(暴露服务)四个关键属性。providers支持类、值、工厂函数等多种注入方式，通过IoC容器管理。模块间通过imports和exports建立依赖关系，实现服务共享。整个机制实现了模块解耦、依赖自动注入和统一生命周期管理，使开发者能专注于业务逻辑。
2025-10-24 14:34:30
389
原创 【Angular 】Angular 中的依赖注入
当你开发系统中较小的部分（如模块或类）时，可能需要使用其他类的功能。例如，你可能需要一个HTTP服务来进行后端调用。依赖注入（DI）是一种设计模式和机制，用于创建应用程序的某些部分并将其提供给应用程序中需要它们的其他部分。Angular支持这种设计模式，你可以在自己的应用程序中使用它来提高灵活性和模块化程度。
2025-10-24 14:02:27
1041
原创 【NestJS】依赖注入：@Injectable()的核心作用
摘要： NestJS的@Injectable()装饰器是依赖注入（DI）机制的核心标识。未添加时，Nest无法识别类的可注入性，导致依赖解析失败（如UserService无法注入到UserController）。加上后，Nest会通过反射记录元数据，交由IoC容器管理生命周期，实现自动实例化和依赖传递（如UserService自动注入DatabaseService）。其作用类似“员工胸牌”，标记可托管类，解决手动实例化、依赖链管理等问题，并提升可测试性。简言之，@Injectable()是Nest DI系统
2025-10-20 16:48:47
920
原创 【NestJS】中间件与管道：请求处理双雄对决
NestJS 中间件（Middleware）和管道（Pipe）是请求处理流程中的两个关键组件。中间件在请求到达控制器前执行，负责全局逻辑如日志、鉴权和跨域处理；而管道专注于控制器方法参数的验证和转换。主要区别在于：中间件作用于整个请求阶段，可修改请求/响应对象；管道则针对单个参数进行数据校验和类型转换。形象地说，中间件是"安检大门"，而管道是"验票员"。实际开发中，中间件适合处理跨请求逻辑，管道则用于参数级别的数据验证。两者配合使用可构建更健壮的应用流程。
2025-10-20 16:24:10
545
原创 【NestJS】【后端架构师】`class-validator + @nestjs/swagger` 远不如 `zod + zod-to-openapi` 一体化
Zod 在工程一体性和开发体验上已超越传统 class-validator 方案 传统方案（class-validator + @nestjs/swagger）需要重复声明类型、校验和文档，实际是运行时拼装的"伪一体"。而 Zod 通过单一 schema 同时定义类型、校验规则和 OpenAPI 文档，实现真正的"类型即验证"。对比显示，Zod 在类型同步、文档维护、跨层复用等方面优势明显，支持 Prisma 集成和前后端共享，其链式 API 和丰富生态提供了更简洁高
2025-10-20 15:25:11
526
原创 【Blender】【快捷键】物体控制全量快捷键
Blender物体控制快捷键指南：基础选择与模式切换（右键单选/Shift加选/Tab切换模式）、核心变换操作（G移动/R旋转/S缩放及轴锁定组合键）、物体管理（H隐藏/X删除/Shift+D复制）、视图控制（中键拖动旋转/Shift+中键平移）以及编辑模式高频操作（E挤出/Ctrl+R环切）。掌握这些快捷键可显著提升3D建模效率，建议从基础变换操作开始练习。
2025-10-17 15:04:59
1307
原创 【NestJS】class-transformer什么用
对比点class-transformer 作用是否在 Zod 中仍需请求参数类型转换把字符串转数字、日期等❌（Zod 内部可做）响应数据隐藏字段✅（可用自定义函数代替）类实例创建❌（Zod 直接校验对象）Swagger 类型推断依赖装饰器❌（Zod → OpenAPI 替代）
2025-10-17 10:33:27
482
原创 【NestJS】Pipe+Interceptor+ExceptionFilter打造完美三段式
本文总结了在 NestJS 中使用 Pipe（管道）、Interceptor（拦截器）和 Exception Filter（异常过滤器）实现三段式响应（code + message + data）的最佳实践。Pipe 负责请求入参的验证与清洗，Interceptor 处理成功响应的统一包装，而 Exception Filter 捕获异常并格式化为三段式错误响应。三者协作形成完整的请求处理流程：ZodValidationPipe 校验参数 → Controller 执行业务 → ResponseInterce
2025-10-17 10:18:20
527
原创 【NestJS】NestJS三件套：校验、转换与文档生成,对比Django DRF
NestJS 采用模块化设计，通过三件套组合实现类似 Django DRF Serializer 的功能： class-validator 负责参数校验（替代 DRF 的字段验证） class-transformer 处理 plain ↔ class 转换（类比 DRF 的序列化/反序列化） @nestjs/swagger 自动生成 OpenAPI 文档（类似 drf-spectacular） 三件套通过装饰器联动工作，配合 ValidationPipe 实现： 请求数据自动转换为 DTO 实例 参数校验
2025-10-16 17:00:16
1191
原创 【NestJS】【class-validator + DTO】轻松生成Swagger文档
NestJS 通过 @nestjs/swagger 模块可轻松生成 OpenAPI/Swagger 文档。安装依赖后，在 main.ts 配置 Swagger 并注册路由。DTO 类需添加 @ApiProperty 装饰器描述字段，结合 class-validator 实现参数校验。Controller 使用 @ApiTags 分组接口。启动服务后访问 /api-docs 即可查看自动生成的交互式文档，支持 JWT 鉴权、响应类型等扩展功能。该方案实现了代码与文档的同步维护，提升开发效率。
2025-10-16 11:44:44
407
原创 【Prisma】 多表拆分：模块化 Schema 管理实战，多文件 Schema 拆分
Prisma模块化Schema管理方案 针对中大型项目表多导致的单文件管理痛点，建议采用模块化Schema拆分方案： 1️⃣ 文件结构：按业务模块拆分模型（如user.prisma），通过merge脚本自动合并到主schema.prisma 2️⃣ 实现方式：预构建脚本拼接模型文件，保留统一数据源配置 3️⃣ 自动化流程：集成合并+生成命令，支持50+表级项目开发 4️⃣ 扩展方案：超大规模项目可采用多schema+独立客户端生成 核心优势：提升可维护性、减少协作冲突、保持Prisma特性完整。通过脚本自动
2025-10-16 11:31:14
518
原创 【Prisma】Prisma 命令大全（Node / NestJS 通用）
🧩 Prisma 主要通过命令行（CLI）来管理数据库模型、迁移、生成客户端。
2025-10-16 11:18:46
858
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人