设计模式是软件开发中的常见问题的典型解决方案。这些模式提供了经过验证的设计模板，帮助开发者编写更加灵活、可维护和可扩展的代码。虽然设计模式最初是在面向对象编程语言中提出的，但许多模式也适用于 JavaScript 这样的多范式语言。本文将详细介绍几种常见的设计模式在 JavaScript 中的应用，包括单例模式、工厂模式、观察者模式、装饰者模式和模块模式。
一、单例模式
定义
单例模式确保一个类只有一个实例，并提供一个全局访问点来获取该实例。在 JavaScript 中，单例模式常用于管理全局状态或配置。
实现方式
在 JavaScript 中，单例模式通常通过闭包或模块化来实现。使用闭包，我们可以将实例保存在私有作用域中，并通过一个公开的接口访问它。
示例：
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
在这个例子中，Singleton 使用了闭包来保存 instance，并确保 getInstance 方法总是返回同一个实例。
二、工厂模式
定义
工厂模式是一种创建对象的设计模式，它允许在不指定具体类的情况下创建对象。工厂模式通常用于在创建对象时需要进行额外的逻辑处理或需要返回不同类型的对象时。
实现方式
在 JavaScript 中，工厂模式可以通过一个函数或类来实现，该函数或类根据输入的参数返回不同的对象。
示例：
function Car(type) {
this.type = type;
this.drive = function () {
console.log("Driving a " + this.type + " car.");
};
}
function Truck(type) {
this.type = type;
this.drive = function () {
console.log("Driving a " + this.type + " truck.");
};
}
function VehicleFactory() {
this.createVehicle = function (type, vehicleType) {
switch (vehicleType) {
case "car":
return new Car(type);
case "truck":
return new Truck(type);
default:
return null;
}
};
}
const factory = new VehicleFactory();
const myCar = factory.createVehicle("sedan", "car");
myCar.drive(); // Driving a sedan car.
const myTruck = factory.createVehicle("pickup", "truck");
myTruck.drive(); // Driving a pickup truck.
在这个例子中，VehicleFactory 根据传入的 vehicleType 返回不同类型的对象，Car 和 Truck。
三、观察者模式
定义
观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。这个模式常用于事件处理系统中。
实现方式
在 JavaScript 中，观察者模式通常通过 EventEmitter 或自定义事件系统来实现。
示例：
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: ${data}`);
}
}
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify("Hello Observers!"); // Both observers receive the notification
在这个例子中，Subject 管理一组观察者对象，并在其状态发生变化时通知它们。
四、装饰者模式
定义
装饰者模式允许向对象动态添加职责或行为，而不会修改其现有的结构。这个模式非常适合在不修改原有代码的情况下增强功能。
实现方式
在 JavaScript 中，装饰者模式可以通过函数或类包装来实现。
示例：
function Coffee() {
this.cost = function () {
return 5;
};
}
function MilkDecorator(coffee) {
this.cost = function () {
return coffee.cost() + 1;
};
}
function SugarDecorator(coffee) {
this.cost = function () {
return coffee.cost() + 0.5;
};
}
let myCoffee = new Coffee();
myCoffee = new MilkDecorator(myCoffee);
myCoffee = new SugarDecorator(myCoffee);
console.log(myCoffee.cost()); // 6.5
在这个例子中，通过装饰者模式，原始的 Coffee 对象动态地增加了牛奶和糖的功能，而不改变其原有的结构。
五、模块模式
定义
模块模式用于将相关的代码封装在一起，形成独立的模块，具有私有和公有的接口。模块模式是 JavaScript 中非常常见的一种设计模式，尤其适合在浏览器环境中进行代码组织。
实现方式
在 JavaScript 中，模块模式通常使用 **IIFE（立即执行函数表达式）**或 ES6 模块来实现。
示例：
const Module = (function () {
// 私有变量和函数
let privateVar = "I am private";
function privateMethod() {
console.log(privateVar);
}
return {
// 公有方法和变量
publicVar: "I am public",
publicMethod: function () {
console.log("Accessing private method:");
privateMethod();
},
};
})();
console.log(Module.publicVar); // I am public
Module.publicMethod(); // Accessing private method: I am private
在这个例子中，Module 使用了 IIFE 来创建一个模块，具有私有和公有的接口。外部代码只能访问 publicVar 和 publicMethod，而 privateVar 和 privateMethod 则被隐藏。
六、总结
JavaScript 中的设计模式提供了一系列解决常见编程问题的优雅方法。理解和应用这些模式不仅能帮助开发者编写出更易于维护和扩展的代码，还能提升代码的复用性和结构性。本文介绍了几种常见的设计模式，包括单例模式、工厂模式、观察者模式、装饰者模式和模块模式，它们在 JavaScript 开发中有着广泛的应用。通过这些模式，我们可以更好地组织代码，避免重复，并解决复杂的设计问题。
P.S.
本文首发于我的个人网站www.aifeir.com，若你觉得有所帮助，可以点个爱心鼓励一下，如果大家喜欢这篇文章，希望多多转发分享，感谢大家的阅读。
