js常见的设计模式有哪些，JavaScript常见设计模式概览

JavaScript中常见的设计模式包括但不限于以下几种：，1. 单例模式（Singleton）：确保一个类只有一个实例，并提供一个全局访问点。，2. 工厂模式（Factory）：创建对象而不指定具体类，通过一个接口来创建对象。，3. 构造器模式（Constructor）：通过构造函数创建对象，用于初始化对象的状态。，4. 原型模式（Prototype）：通过原型来创建对象，实现对象的继承。，5. 装饰者模式（Decorator）：动态地给一个对象添加一些额外的职责，而不改变其接口。，6. 适配器模式（Adapter）：允许将一个类的接口转换成客户期望的另一个接口，使原本接口不兼容的类可以一起工作。，7. 观察者模式（Observer）：当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并自动更新。，8. 策略模式（Strategy）：定义一系列算法，将每个算法封装起来，并使它们可以相互替换。，9. 命令模式（Command）：将请求封装为一个对象，从而允许用户使用不同的请求、队列或日志请求，以及实现可撤销的操作。，10. 中介者模式（Mediator）：定义一个对象来封装一组对象之间的交互，从而降低它们之间的耦合。，这些设计模式在JavaScript编程中广泛应用，有助于提高代码的可读性、可维护性和可扩展性。

单例模式（Singleton）

单例模式是一种确保一个类只有一个实例,并提供一个全局访问点的设计模式，它在我们需要控制全局访问的类时非常有用。

• 优点：

  
  • 确保全局只有一个实例。
  • 减少内存消耗。
  • 提高访问效率。

• 使用场景：

  • 需要全局访问的对象,如数据库连接池。
  • 需要保证只有一个实例的场景。

工厂模式（Factory）

工厂模式是一种创建对象实例的模式,它将对象的创建过程封装起来，使得调用者只需要关注对象的创建和使用，而不需要关心对象的创建细节。

• 优点：

  • 降低耦合度。
  • 提高代码的复用性。
  • 容易扩展。

• 使用场景：

  
  • 需要根据不同条件创建不同类的对象。
  • 创建的对象具有共同的接口。

观察者模式（Observer）

观察者模式是一种一对多的依赖关系,当一个对象的状态发生变化时，所有依赖于它的对象都会得到通知并自动更新。

• 优点：

  • 解耦对象之间的依赖关系。
  • 提高代码的可维护性和可扩展性。

• 使用场景：

  • 需要实现消息传递的场景。
  • 需要动态添加或删除观察者的场景。

装饰者模式（Decorator）

装饰者模式是一种动态地给一个对象添加一些额外的职责,而不改变其接口的设计模式。

• 优点：

  • 动态地给对象添加职责。
  • 不改变对象的接口。

• 使用场景：

  • 需要扩展对象的功能。
  • 需要实现扩展的职责。

策略模式（Strategy）

策略模式是一种定义一系列算法,并将每个算法封装起来，使它们可以相互替换的设计模式。

• 优点：

  • 提高代码的可复用性和可扩展性。
  • 将算法的实现与使用分离。

• 使用场景：

  • 需要实现多个算法。
  • 需要根据不同条件选择不同的算法。

就是我为大家介绍的五种JavaScript常见的设计模式,在实际开发中，我们需要根据具体场景选择合适的设计模式，以提高代码的质量和效率，希望这篇文章能对大家有所帮助！

其他相关扩展阅读资料参考文献：

单例模式

1. 全局唯一实例：通过立即执行函数（IIFE）或ES6的class结合静态属性，确保一个类或对象在整个应用中仅被创建一次，避免重复初始化。
2. 避免污染全局命名空间：使用闭包封装变量和方法，仅暴露必要的接口，防止全局变量被外部修改或覆盖。
3. 典型应用场景：常用于配置管理、日志系统、数据库连接池等需要全局状态共享的场景，例如window.onload或$.ajax的全局配置。

工厂模式

1. 统一创建对象：通过函数封装对象的创建逻辑，根据参数返回不同类型的实例，减少重复代码。

   function createAnimal(type) {
     if (type === 'dog') return new Dog();
     if (type === 'cat') return new Cat();
   }

2. 解耦和复用：将对象创建过程与使用过程分离，便于维护和扩展，新增bird类型只需修改工厂函数，无需改动调用代码。
3. 支持动态扩展：通过条件判断或配置对象实现灵活的创建逻辑，适应不同业务需求。

   const animalFactory = {
     create: function(type) {
       return new this[type]();
     },
     dog: function() { /* ... */ },
     cat: function() { /* ... */ }
   };

模块模式

1. 封装数据与功能：利用闭包隐藏私有变量和方法，仅通过接口暴露公共功能。

   const module = (function() {
     let privateVar = 'secret';
     function privateMethod() { /* ... */ }
     return {
       publicMethod: function() { /* ... */ }
     };
   })();

2. 模块化组织代码：将相关功能集中到一个模块中，提升代码可读性和可维护性，将工具函数、配置项、状态管理封装到独立模块。
3. 避免全局污染：通过命名空间或IIFE限制变量作用域，防止命名冲突。

   const myApp = {
     utils: { /* ... */ },
     config: { /* ... */ }
   };

4. 动态加载模块：结合异步加载技术（如import()），按需初始化模块内容，优化性能。
5. 模块间通信：通过事件总线或回调函数实现模块间的解耦通信，例如使用EventEmitter或postMessage。

观察者模式

1. 事件订阅机制：通过EventEmitter或自定义事件系统，实现对象间松耦合的通信。

   const emitter = new EventEmitter();
   emitter.on('event', () => { /* ... */ });
   emitter.emit('event');

2. 解耦通信：观察者模式允许对象在不直接依赖的情况下进行交互，降低代码耦合度，表单验证模块监听输入事件，无需直接调用验证函数。
3. 动态添加订阅者：支持在运行时注册事件监听器，适应复杂业务场景。

   emitter.on('update', callback);

4. 适用场景：常用于实时数据更新（如股票行情）、用户交互（如点击事件）、异步任务通知（如AJAX完成回调）。
5. 性能优化：通过节流（throttle）或防抖（debounce）控制事件触发频率，避免过度消耗资源。

策略模式

1. 定义行为集合：将不同算法或行为封装为独立对象，通过组合实现灵活调用。

   const strategies = {
     strategyA: function() { /* ... */ },
     strategyB: function() { /* ... */ }
   };

2. 动态切换策略：通过参数选择不同策略，实现同一功能的不同实现方式。

   function executeStrategy(strategy) {
     strategies[strategy]();
   }

3. 避免条件判断：用策略替代多层if-else逻辑，提升代码可读性，支付方式选择用策略模式替代if (type === 'wechat') { ... }。
4. 适用场景：常用于算法选择（如排序）、规则引擎（如促销活动）、插件系统（如功能模块加载）。
5. 组合使用：与工厂模式结合，动态创建策略对象并执行。

   const strategyFactory = {
     create: function(type) {
       return new strategies[type]();
     }
   };

其他高频模式

1. 原型模式：通过prototype属性实现对象继承，优化内存占用。

   function Person(name) {
     this.name = name;
   }
   Person.prototype.sayHi = function() { /* ... */ };

2. 命令模式：将请求封装为对象，支持参数化操作和撤销重做功能。

   class Command {
     constructor(receiver, action) {
       this.receiver = receiver;
       this.action = action;
     }
     execute() {
       this.receiver[this.action]();
     }
   }

3. 装饰器模式：通过包装对象扩展功能，避免修改原始类。

   function log(func) {
     return function(...args) {
       console.log('Calling:', func.name);
       return func.apply(this, args);
     };
   }
   const enhancedFunc = log(originalFunc);

4. 发布-订阅模式：通过事件广播机制实现一对多通信，例如EventEmitter的emit和on方法。
5. 代理模式：通过中间层控制对对象的访问，例如缓存数据或权限校验。

   const proxy = new Proxy(target, {
     get: function(obj, prop) {
       return obj[prop] || 'default';
     }
   });

设计模式的选型原则

1. 优先选择简单模式：对于小型项目，避免过度设计，优先使用单例或模块模式。
2. 关注可维护性：复杂项目需优先考虑工厂、策略或观察者模式，提升代码可维护性。
3. 结合框架特性：在React/Vue中，模块模式和观察者模式与框架机制更契合。
4. 性能与扩展平衡：高并发场景需优化策略模式的执行效率，避免内存泄漏。
5. 避免模式滥用：单一职责原则下，过度使用设计模式可能导致代码复杂度上升，需谨慎评估。

设计模式并非万能工具，其核心价值在于通过结构化代码提升可读性、可维护性和可扩展性，开发者应根据实际需求选择合适的模式，而非盲目追求“设计模式”标签，单例模式适合全局状态管理，而策略模式更适合需要动态切换逻辑的场景。合理使用设计模式，是写出优雅、高效JavaScript代码的关键。