前言
JavaScript 作为一门灵活多变的语言，设计模式在其中的应用尤为重要。本文将深入探讨 JavaScript 中常用的设计模式，帮助你编写更优雅、更易维护的代码。
一、什么是设计模式？
设计模式是软件开发人员在长期实践中总结出来的解决特定问题的可重用方案。它们不是可以直接转换为代码的完整解决方案，而是解决特定问题的模板或指南。
在 JavaScript 中应用设计模式的好处：
- 提高代码可重用性
- 增强代码可维护性
- 促进团队协作
- 提供经过验证的解决方案
二、创建型模式
1. 单例模式 (Singleton)
单例模式确保一个类只有一个实例，并提供一个全局访问点。
class Singleton {
constructor() {
if (!Singleton.instance) {
Singleton.instance = this;
}
return Singleton.instance;
}
// 其他方法
someMethod() {
console.log('Doing something...');
}
}
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true
应用场景：全局状态管理、配置对象、数据库连接等。
2. 工厂模式 (Factory)
工厂模式提供了一种创建对象的接口，而不需要指定具体的类。
class Car {
constructor(options) {
this.doors = options.doors || 4;
this.color = options.color || 'white';
}
}
class Truck {
constructor(options) {
this.doors = options.doors || 2;
this.color = options.color || 'black';
this.payload = options.payload || '1ton';
}
}
class VehicleFactory {
createVehicle(type, options) {
switch(type) {
case 'car':
return new Car(options);
case 'truck':
return new Truck(options);
default:
throw new Error('Unknown vehicle type');
}
}
}
const factory = new VehicleFactory();
const myCar = factory.createVehicle('car', { color: 'red' });
const myTruck = factory.createVehicle('truck', { payload: '2tons' });
应用场景：需要根据不同条件创建不同对象时。
三、结构型模式
1. 装饰器模式 (Decorator)
装饰器模式允许向现有对象添加新功能而不改变其结构。
// 简单的装饰器函数
function withLogging(fn) {
return function(...args) {
console.log(`Calling function with args: ${args}`);
const result = fn.apply(this, args);
console.log(`Function returned: ${result}`);
return result;
};
}
function add(a, b) {
return a + b;
}
const loggedAdd = withLogging(add);
loggedAdd(2, 3);
// 输出:
// Calling function with args: 2,3
// Function returned: 5
ES7装饰器语法：
@withLogging
function multiply(a, b) {
return a * b;
}
multiply(4, 5);
应用场景：日志记录、权限控制、数据验证等横切关注点。
2. 适配器模式 (Adapter)
适配器模式使得原本不兼容的接口可以一起工作。
// 老接口
class OldCalculator {
operations(term1, term2, operation) {
switch(operation) {
case 'add':
return term1 + term2;
case 'sub':
return term1 - term2;
default:
return NaN;
}
}
}
// 新接口
class NewCalculator {
add(term1, term2) {
return term1 + term2;
}
sub(term1, term2) {
return term1 - term2;
}
}
// 适配器
class CalculatorAdapter {
constructor() {
this.calculator = new NewCalculator();
}
operations(term1, term2, operation) {
switch(operation) {
case 'add':
return this.calculator.add(term1, term2);
case 'sub':
return this.calculator.sub(term1, term2);
default:
return NaN;
}
}
}
// 使用
const oldCalc = new OldCalculator();
console.log(oldCalc.operations(10, 5, 'add')); // 15
const newCalc = new NewCalculator();
console.log(newCalc.add(10, 5)); // 15
const adapter = new CalculatorAdapter();
console.log(adapter.operations(10, 5, 'add')); // 15
应用场景：集成第三方库、API版本迁移等。
四、行为型模式
1. 观察者模式 (Observer)
观察者模式定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。
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!');
// 输出:
// Observer received data: Hello observers!
// Observer received data: Hello observers!
subject.unsubscribe(observer2);
subject.notify('Observer 2 unsubscribed');
// 输出:
// Observer received data: Observer 2 unsubscribed
应用场景：事件处理系统、实时数据更新、MVC架构等。
2. 策略模式 (Strategy)
策略模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换。
class PaymentStrategy {
pay(amount) {
throw new Error('This method must be implemented');
}
}
class CreditCardStrategy extends PaymentStrategy {
pay(amount) {
console.log(`Paying ${amount} using Credit Card`);
}
}
class PayPalStrategy extends PaymentStrategy {
pay(amount) {
console.log(`Paying ${amount} using PayPal`);
}
}
class ShoppingCart {
constructor() {
this.amount = 0;
this.strategy = null;
}
setPaymentStrategy(strategy) {
this.strategy = strategy;
}
checkout() {
if (!this.strategy) {
throw new Error('Payment strategy not set');
}
this.strategy.pay(this.amount);
}
addItem(price) {
this.amount += price;
}
}
// 使用
const cart = new ShoppingCart();
cart.addItem(100);
cart.addItem(200);
cart.setPaymentStrategy(new CreditCardStrategy());
cart.checkout(); // Paying 300 using Credit Card
cart.setPaymentStrategy(new PayPalStrategy());
cart.checkout(); // Paying 300 using PayPal
应用场景：多种算法或策略可供选择时，如支付方式、排序算法等。
五、JavaScript 特有模式
1. 模块模式 (Module)
模块模式提供了私有和公共封装的方法，是JavaScript中最常用的模式之一。
const myModule = (function() {
// 私有变量
let privateVar = 'I am private';
// 私有函数
function privateMethod() {
console.log(privateVar);
}
return {
// 公共接口
publicMethod: function() {
privateMethod();
},
publicVar: 'I am public'
};
})();
myModule.publicMethod(); // "I am private"
console.log(myModule.publicVar); // "I am public"
console.log(myModule.privateVar); // undefined
现代ES6模块：
// module.js
let privateVar = 'I am private';
function privateMethod() {
console.log(privateVar);
}
export const publicVar = 'I am public';
export function publicMethod() {
privateMethod();
}
2. 原型模式 (Prototype)
JavaScript本身就是基于原型的语言，原型模式是JavaScript的核心。
const carPrototype = {
wheels: 4,
color: 'red',
start() {
console.log('Engine started');
},
stop() {
console.log('Engine stopped');
}
};
const myCar = Object.create(carPrototype);
myCar.color = 'blue';
console.log(myCar.wheels); // 4
myCar.start(); // "Engine started"
ES6类语法（本质仍是原型继承）：
class Car {
constructor() {
this.wheels = 4;
this.color = 'red';
}
start() {
console.log('Engine started');
}
stop() {
console.log('Engine stopped');
}
}
const myCar = new Car();
myCar.color = 'blue';
六、设计模式的最佳实践
- 不要过度设计：不是所有问题都需要设计模式，简单的解决方案往往更好。
- 理解模式背后的思想：比记住具体实现更重要的是理解其解决问题的思路。
- 适应JavaScript的特性：JavaScript是一门多范式的语言，灵活运用其特性。
- 考虑性能影响：某些模式可能会引入额外的抽象层，需权衡利弊。
- 结合现代JavaScript特性：如ES6+的特性可以与设计模式结合使用。
七、总结
设计模式是JavaScript开发者的强大工具，但关键在于理解何时以及如何使用它们。掌握这些模式可以帮助你：
- 编写更清晰、更易维护的代码
- 解决常见的设计问题
- 提高代码的可重用性
- 更好地与其他开发者沟通
记住，设计模式不是银弹，它们应该服务于代码质量，而不是成为代码复杂度的来源。在实际开发中，要根据具体问题选择合适的模式，或者创造性地组合多个模式来解决问题。
希望这篇博客能帮助你更好地理解和应用JavaScript设计模式！
