Javascript中的设计模式有哪些？-js教程-PHP中文网

Javascript中的设计模式有哪些？

夢幻星辰

发布： 2025-12-16 18:47:02

原创

228人浏览过

JavaScript高频实用设计模式约七八种：创建型（工厂、单例、构造函数+原型）、结构型（适配器、装饰器、代理）、行为型（观察者/发布-订阅、策略、状态），用于解决代码组织、复用与可维护性问题。

javascript中的设计模式有哪些？

JavaScript 中常用的设计模式有十几种，但真正高频、实用且适合前端开发的大概七八种。它们不是为了炫技，而是为了解决特定场景下的代码组织、复用和可维护性问题。

创建型模式：控制对象怎么生成

这类模式关注“如何创建对象”，避免直接使用 new，让创建逻辑更灵活。

工厂模式：用函数或类封装创建逻辑，比如统一创建不同类型的按钮（Button、ModalButton），调用方不用关心具体构造细节。
单例模式：确保全局只有一个实例，常用于状态管理器、日志工具、配置加载器。JS 中靠闭包或模块作用域天然支持，不需要复杂锁机制。
构造函数 + 原型组合（伪经典）：虽不是严格意义上的设计模式，但它是 JS 原生对象创建的事实标准——属性写在构造函数里，方法挂到 prototype 上，兼顾实例独立性和内存效率。

结构型模式：调整对象或类的组织方式

这类模式不改变功能，而是让代码结构更清晰、扩展更方便。

适配器模式：把一个接口“转成”另一个接口。比如老项目用 jQuery 的 $.ajax，新模块用 fetch，写个适配器让上层代码无感切换。
装饰器模式：动态给对象添加行为，不修改原对象。ES2022 装饰器语法（@log、@debounce）就是典型应用；React 中的高阶组件（HOC）也属于这一思想。
代理模式：用代理对象控制对目标对象的访问。Vue 3 的响应式系统底层大量使用 Proxy 实现依赖收集和更新触发；也可以用来做权限校验、缓存、日志等横切逻辑。

行为型模式：协调对象之间的职责与通信

这类模式聚焦“对象之间怎么协作”，降低耦合，提升灵活性。

HTShop网上购物系统

HTShop网上购物系统由恒天网络科技有限公司根据国际先进技术和国内商务特点自主版权开发的一款具有强大功能的B2C电子商务网上购物平台。HTShop以国际上通用流行的B/S(浏览器/服务器)模式进行设计，采用微软公司的ASP.NET（C#）技术构建而成。 2007-11-10 HTShop CS 通用标准版 v1.1.11.10 更新内容自由更换模版功能开放修改了购买多款商品，会员中心订单只显示

查看详情

立即学习“Java免费学习笔记（深入）”；

观察者模式 / 发布-订阅模式：事件驱动的核心。DOM 事件监听是观察者；EventEmitter 或自定义事件总线是发布-订阅。Vue 的 $emit/$on、React 的 Context + useReducer 都受其启发。
策略模式：把算法或规则抽成独立函数/类，运行时按需选择。比如表单验证：email、phone、password 各自一套规则，统一入口根据字段类型调用对应策略，增删规则不影响主流程。
状态模式：把对象的状态逻辑拆分成独立类，避免大段 if/else 判断状态。适合有限状态机场景，如订单状态（待支付 → 已支付 → 已发货 → 完成）、播放器（暂停/播放/缓冲中）。