JavaScript常用设计模式有哪些？

JavaScript中真正高频实用的设计模式约七八种，覆盖创建型（如工厂、单例、构造函数+原型）、结构型（如适配器、装饰器、代理）和行为型（如观察者/发布-订阅、策略、状态）三大类，它们并非炫技工具，而是直击前端开发中的核心痛点——代码重复、逻辑耦合、扩展困难与维护成本高；从Vue响应式底层的Proxy代理，到React高阶组件的装饰思想，再到表单验证的策略切换和订单状态管理的状态机实践，这些模式已深度融入日常开发；掌握它们的关键不在于死记名称，而在于当遇到冗长if/else、难以测试的紧耦合代码时，能自然联想到“这里或许该用策略解耦”“那里正适合用观察者通信”——让设计模式成为你重构和演进代码时最趁手的思维杠杆。

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

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

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

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

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

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

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

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

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

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

其他值得了解的模式

有些模式在 JS 中用得少，或已被语言特性覆盖，但理解它们有助于读懂源码或设计复杂系统：

• 迭代器模式：Symbol.iterator 让对象可被 for...of 遍历，Array、Map、Set 都内置了它。
• 命令模式：把请求封装成对象，支持撤销、重做、队列执行。编辑器、画布类应用常用。
• 组合模式：用树形结构表示“部分-整体”关系，比如虚拟 DOM 节点、组件嵌套结构，统一处理叶子节点和容器节点。

基本上就这些。不必强记所有模式名称，关键是遇到重复的 if/else、紧耦合、难以测试或扩展的代码时，能想到：“这个是不是可以用策略/观察者/代理来解耦？”——模式是结果，不是起点。

到这里，我们也就讲完了《JavaScript常用设计模式有哪些？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！