Javascript中的设计模式有哪些？

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

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

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

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

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

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

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

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

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

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

标签： vue react javascript word java jquery js 前端 ajax 工具 前端开发 ai