当前位置：首页 > 开发教程 > 正文内容

js常见设计模式，JavaScript核心设计模式解析

wzgly2个月前 (07-11)开发教程1

JavaScript（JS）中的设计模式是一系列解决问题的最佳实践，旨在提高代码的可维护性、复用性和扩展性，常见的JS设计模式包括：，1. 单例模式：确保一个类只有一个实例，并提供一个全局访问点。，2. 工厂模式：创建对象实例而不指定具体类，用于创建具有相似结构或行为的对象。，3. 观察者模式：对象间的一对多依赖关系，当一个对象改变状态时，所有依赖于它的对象都会得到通知并自动更新。，4. 策略模式：定义一系列算法，并在运行时选择使用哪一个算法，可以避免使用多个if-else条件语句。，5. 命令模式：将请求封装成对象，从而允许用户使用不同的请求、队列或日志请求，并且支持可撤销的操作。，6. 装饰者模式：动态地给一个对象添加一些额外的职责，而不改变其接口。，掌握这些设计模式对于提升JavaScript编程能力具有重要意义。

JS常见设计模式：提升代码质量

用户解答： 嗨，我是前端开发小王，最近在项目中遇到了一些代码复用和扩展性问题，听说设计模式可以解决这个问题，我想了解一下，JavaScript中常见的设计模式有哪些？它们各自有什么特点和应用场景呢？

单例模式（Singleton）

特点：

确保一个类只有一个实例,并提供一个访问它的全局访问点。

应用场景：

当需要控制全局资源的访问时,如数据库连接、文件系统操作等。

回答：

全局访问点：单例模式通过一个静态方法提供一个全局访问点，确保全局只有一个实例。
懒加载：实例化过程是懒加载的，即只有在第一次调用时才会创建实例。
线程安全：在JavaScript中，单例模式是线程安全的，因为JavaScript是单线程的。

工厂模式（Factory）

特点：

用于创建对象,但用户只需要知道接口，不需要关心对象的创建过程。

应用场景：

当创建的对象有很多相似性,但具体类型不同时。

回答：

封装性：工厂模式将对象的创建逻辑封装在工厂函数中，提高代码的封装性。
扩展性：增加新的产品类时，只需要添加新的工厂方法，无需修改现有代码。
可配置性：通过传递参数，可以灵活地创建不同类型的产品。

观察者模式（Observer）

特点：

当一个对象的状态发生变化时,自动通知所有依赖于它的对象。

应用场景：

实现事件驱动、异步消息传递等。

回答：

解耦：观察者模式将对象间的依赖关系解耦，提高系统的灵活性。
可扩展性：增加新的观察者或被观察者时，无需修改现有代码。
动态绑定：观察者和被观察者之间的绑定是动态的，可以在运行时进行。

策略模式（Strategy）

特点：

定义一系列算法,把它们一个个封装起来，并使它们可互相替换。

应用场景：

当需要根据不同条件选择不同的算法时。

回答：

封装性：策略模式将算法封装在单独的类中，便于管理和维护。
可替换性：可以在运行时动态选择不同的策略，提高代码的灵活性。
易于扩展：增加新的策略时，只需添加新的策略类，无需修改现有代码。

命令模式（Command）

特点：

将请求封装成一个对象,从而允许用户使用不同的请求、队列或日志请求来参数化其他对象。

应用场景：

实现撤销/重做操作、命令队列等。

回答：

解耦：命令模式将请求的发送者和接收者解耦，提高系统的灵活性。
扩展性：可以方便地实现撤销/重做操作，支持命令队列等功能。
易于扩展：增加新的命令时，只需添加新的命令类，无需修改现有代码。

JavaScript中的设计模式可以帮助我们解决代码复用、扩展性和可维护性问题，通过合理运用这些设计模式，我们可以写出更加优雅、高效的代码。

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

单例模式

确保全局唯一实例：单例模式通过创建一个全局唯一的对象实例，避免重复初始化，配置管理器或数据库连接池常使用此模式，保证资源只被创建一次。
隐藏私有属性：利用IIFE（立即执行函数表达式）或闭包封装私有变量，如var Singleton = (function() { var instance; return { ... }; })()，防止外部直接修改状态。
惰性初始化：仅在首次调用时创建实例，通过getInstance()方法延迟加载。
```
if (!Singleton.instance) {  
Singleton.instance = new Singleton();  
}
```
提升性能，尤其在资源密集型场景中。

工厂模式

统一创建对象接口：通过工厂函数或类封装对象创建逻辑，解耦实例化与使用。

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

支持扩展性：新增对象类型只需扩展工厂函数，无需修改调用代码。降低维护成本，符合开闭原则。
替代new关键字：避免直接使用new暴露类实现，提高代码可读性。
```
const animal = AnimalFactory.create('bird');
```

组合与继承：工厂模式可结合原型链实现对象复用，优化内存占用。

function createBird() {  
const bird = Object.create(BirdPrototype);  
bird.fly = function() { ... };  
return bird;  
}

策略模式

定义可替换的行为：将算法或行为封装为独立对象，如支付方式选择：
```
const strategies = {  
creditCard: function() { ... },  
paypal: function() { ... }  
};
```
动态切换策略：通过上下文对象调用不同策略，实现运行时行为变化。
```
function pay(strategy) {  
strategies[strategy]();  
}
```

避免条件判断：用策略替代if-else或switch，提高代码可维护性。

// 原始代码  
if (type === 'A') { ... }  
else if (type === 'B') { ... }  
// 策略模式  
pay('A');

组合复用原则：策略对象可独立开发和测试，降低系统耦合度。

class PaymentContext {  
constructor(strategy) {  
 this.strategy = strategy;  
}  
processPayment() {  
 this.strategy.execute();  
}  
}

观察者模式

事件驱动机制：通过订阅-发布机制实现对象间通信，如EventEmitter类：

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

解耦组件交互：被观察者无需知道观察者的具体实现，支持松耦合架构。

class Subject {  
constructor() {  
 this.observers = [];  
}  
addObserver(observer) {  
 this.observers.push(observer);  
}  
}

异步通知：观察者模式天然支持异步处理，适用于实时数据更新场景。
```
emitter.on('dataUpdate', (data) => {  
console.log('Received:', data);  
});
```
实现复杂事件链：可通过链式调用或回调函数处理多级事件，提升系统灵活性。
```
emitter.on('event', (data) => {  
emitter.emit('nextEvent', data);  
});
```

模块模式

封装私有变量：使用闭包限制变量和函数的访问范围，如：

const Module = (function() {  
let privateVar = 'secret';  
return {  
 publicMethod: function() {  
   console.log(privateVar);  
 }  
};  
})();

模块化代码结构：将功能拆分为独立模块，提高代码复用率。

const utils = (function() {  
function helper() { ... }  
return {  
 publicFunc: helper  
};  
})();

避免全局污染：通过IIFE创建独立作用域，减少命名冲突。
```
(function() {  
// 私有逻辑  
})();
```
组合多个模块：可将多个模块通过对象合并使用，实现功能拼装。
```
const app = Object.assign({}, Module1, Module2);
```