本文翻译自 medium，作者：asierr.dev，略有删改。
前言
您是否渴望将您的编码能力提升到一个新的水平？今天，我们将深入探讨五种强大的 JavaScript 设计模式，它们将提高您的代码质量和可维护性。这些模式经过反复试验和测试，可帮助您编写更清晰、更高效且更易于维护的代码。让我们开始吧！
正文
1.模块模式
模块模式是 JavaScript 中最常见和最有用的设计模式之一。它有助于创建封装和可重用的代码。通过使用模块模式，您可以保持变量和函数的私有性，仅公开代码中必要的部分。此模式对于维护干净的全局命名空间和避免名称冲突至关重要。
代码如下（示例）：
const myModule = (function() {
// Private variables and functions
let privateVar = 'I am private';
function privateFunction() {
console.log(privateVar);
}
// Public API
return {
publicVar: 'I am public',
publicFunction: function() {
privateFunction();
}
};
})();
console.log(myModule.publicVar); // I am public
myModule.publicFunction(); // I am privat
好处：
- 封装：保持代码的模块化和封装，从而降低变量冲突的风险。
- 可重用：创建可重用的代码，这些代码可以轻松导入并在应用程序的不同部分使用。
- 可维护性：通过分离关注点，使代码更易于维护和理解。
实际应用场景：
模块模式通常用于 JavaScript 库和框架中，用于封装代码并公开干净的 API。例如，在 Web 应用程序中，您可以使用模块模式来管理不同的组件，例如用户身份验证、数据获取和 UI 呈现。
2.单例模式
为什么重要：
单例模式确保一个类只有一个实例，并提供对它的全局访问点。当您需要管理共享资源（如数据库连接或配置文件）时，这尤其有用。
代码如下（示例）：
const Singleton = (function() {
let instance;
function createInstance() {
const object = new Object('I am the instance');
return object;
}
return {
getInstance: function() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true
好处：
- 受控访问：确保对实例的单点访问。
- 减少内存占用：由于仅存在一个实例，因此可以帮助减少内存使用。
- 全局访问：提供实例的全局访问点，使其易于在整个应用程序中使用。
实际应用场景：
单例模式通常用于日志记录、缓存和数据库连接池。例如，在 Node.js应用程序中，可以使用单一实例来管理数据库连接，以确保应用程序的所有部分都使用相同的连接实例。
3.观察者模式
为什么重要：
观察者模式是一种行为设计模式，其中对象（称为主体）维护一个依赖对象列表（称为观察者），并通知它们任何状态更改。此模式非常适合实现事件处理系统。
代码如下（示例）：
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
unsubscribe(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
update(data) {
console.log('Observer received:', data);
}
}
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('Hello Observers!'); // Observer received: Hello Observers!
好处：
- 松耦合：促进被摄体和观察者之间的松耦合。
- 动态关系：允许动态注册和删除观察者。
- 可重用性：便于独立地重用和扩展主体和观察者。
实际应用场景：
观察者模式广泛用于事件驱动的系统，如用户界面。例如，在聊天应用程序中，您可以使用观察者模式来通知用户新消息或状态更新。
4.工厂模式
为什么重要：
工厂模式是一种创建性设计模式，它提供了一种创建对象的方法，而无需指定将要创建的确切对象类别。当您有一个通用的接口但不同的实现时，此模式非常有用。
代码如下（示例）：
class Dog {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} says Woof!`);
}
}
class Cat {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} says Meow!`);
}
}
class AnimalFactory {
static createAnimal(type, name) {
switch (type) {
case 'dog':
return new Dog(name);
case 'cat':
return new Cat(name);
default:
throw new Error('Invalid animal type');
}
}
}
const myDog = AnimalFactory.createAnimal('dog', 'Buddy');
myDog.speak(); // Buddy says Woof!
const myCat = AnimalFactory.createAnimal('cat', 'Kitty');
myCat.speak(); // Kitty says Meow!
好处：
- 封装：封装对象创建过程，使其更易于管理。
- 解耦：将客户端代码与用于创建对象的特定类解耦。
- 可扩展性：无需更改客户端代码即可轻松添加新类型的对象。
实际应用场景：
工厂模式通常用于框架和库中，用于创建对象。例如，在 Web 应用程序中，您可以使用工厂根据配置创建不同类型的表单输入。
5.策略模式
为什么重要：
策略模式是一种行为设计模式，允许您定义一系列算法，封装每个算法，并使它们可互换。此模式对于实现算法的不同变体非常有用。
代码如下（示例）：
class Context {
constructor(strategy) {
this.strategy = strategy;
}
executeStrategy(a, b) {
return this.strategy.execute(a, b);
}
}
class AddStrategy {
execute(a, b) {
return a + b;
}
}
class SubtractStrategy {
execute(a, b) {
return a - b;
}
}
class MultiplyStrategy {
execute(a, b) {
return a * b;
}
}
const context = new Context(new AddStrategy());
console.log(context.executeStrategy(5, 3)); // 8
context.strategy = new SubtractStrategy();
console.log(context.executeStrategy(5, 3)); // 2
context.strategy = new MultiplyStrategy();
console.log(context.executeStrategy(5, 3)); // 15
好处：
- 灵活性：允许您轻松地在不同算法之间切换。
- 封装：对每个算法进行封装，使代码更加模块化，更易于维护。
- 可扩展性：无需更改客户端代码即可轻松添加新策略。
实际应用场景：
策略模式通常用于排序算法、验证机制和支付处理系统。例如，在电子商务应用程序中，您可以对信用卡、PayPal 和其他付款方式使用不同的付款策略。
总结
这就是五种强大的 JavaScript 设计模式，可以显著提高您的代码质量和可维护性。通过将这些模式合并到您的项目中，您将能够编写更清晰、更高效且更易于维护的代码。请记住，掌握这些模式的关键是练习。立即开始在您的项目中使用它们，并观察您的代码质量飙升。
专注于web前端开发，分享实用的web前端技术干货，公众号：web前端开发之旅
