七大JavaScript设计模式：编写更优秀代码的秘诀
在动态的软件开发领域，熟练掌握设计模式对于构建可扩展、易维护、高效的代码至关重要。无论项目规模大小，设计模式都能为常见问题提供行之有效的解决方案。本文将深入探讨七种JavaScript核心设计模式，并辅以实例代码，助您提升编码水平。
1. 单例模式：确保唯一实例
单例模式保证一个类只有一个实例，并提供全局访问点。它适用于管理单个配置对象或集中状态等场景。
立即学习“Java免费学习笔记（深入）”；
class Singleton {
constructor() {
if (Singleton.instance) {
return Singleton.instance;
}
Singleton.instance = this;
this.data = {};
}
setData(key, value) {
this.data[key] = value;
}
getData(key) {
return this.data[key];
}
}
// 使用示例
const instance1 = new Singleton();
instance1.setData("theme", "dark");
const instance2 = new Singleton();
console.log(instance2.getData("theme")); // 输出: dark
2. 工厂模式：简化对象创建
工厂模式提供了一种创建对象的方法，无需指定对象的具体类。这对于构建包含多种对象类型的应用非常实用。
class Car {
constructor(model) {
this.type = "car";
this.model = model;
}
}
class Bike {
constructor(model) {
this.type = "bike";
this.model = model;
}
}
class VehicleFactory {
static createVehicle(type, model) {
if (type === "car") return new Car(model);
if (type === "bike") return new Bike(model);
throw new Error("未知车辆类型");
}
}
// 使用示例
const tesla = VehicleFactory.createVehicle("car", "tesla");
console.log(tesla); // 输出: Car { type: 'car', model: 'tesla' }
3. 观察者模式：响应变化
在观察者模式中，多个对象（观察者）监听单个主题。当主题状态改变时，所有观察者都会收到通知。此模式在GUI等事件驱动系统中非常有用。
class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
constructor(name) {
this.name = name;
}
update(data) {
console.log(`${this.name} 收到：${data}`);
}
}
// 使用示例
const newsChannel = new Subject();
const subscriber1 = new Observer("Alice");
const subscriber2 = new Observer("Bob");
newsChannel.subscribe(subscriber1);
newsChannel.subscribe(subscriber2);
newsChannel.notify("突发新闻！");
4. 装饰器模式：增强功能
Ke361是一个开源的淘宝客系统，基于最新的ThinkPHP3.2版本开发，提供更方便、更安全的WEB应用开发体验，采用了全新的架构设计和命名空间机制， 融合了模块化、驱动化和插件化的设计理念于一体，以帮助想做淘宝客而技术水平不高的朋友。突破了传统淘宝客程序对自动采集商品收费的模式，该程序的自动 采集模块对于所有人开放，代码不加密，方便大家修改。集成淘点金组件，自动转换淘宝链接为淘宝客推广链接。K
装饰器模式允许您动态地为对象添加行为，无需修改其结构。这对于以模块化方式扩展功能非常有用。
function withTimestamp(func) {
return function(message) {
func(`[${new Date().toISOString()}] ${message}`);
};
}
// 使用示例
const log = console.log;
const logWithTimestamp = withTimestamp(log);
logWithTimestamp("Hello, world!"); // 输出: [2024-12-14T12:00:00.000Z] Hello, world!
5. 策略模式：动态算法切换
策略模式定义了一系列算法，封装它们，并使它们可以互换。这适用于需要根据用户输入或上下文选择不同行为的应用。
class PaymentStrategy {
pay(amount) {
throw new Error("pay() 方法必须实现。");
}
}
class CreditCardPayment extends PaymentStrategy {
pay(amount) {
console.log(`已使用信用卡支付 $${amount}。`);
}
}
class PayPalPayment extends PaymentStrategy {
pay(amount) {
console.log(`已使用PayPal支付 $${amount}。`);
}
}
// 使用示例
const paymentMethod = new PayPalPayment();
paymentMethod.pay(100); // 输出: 已使用PayPal支付 $100。
6. 原型模式：简化对象克隆
此模式允许通过复制原型来创建对象。它常用于对象组合和避免重复实例化。
const vehiclePrototype = {
start() {
console.log(`${this.model} 正在启动。`);
},
};
function createVehicle(model) {
const vehicle = Object.create(vehiclePrototype);
vehicle.model = model;
return vehicle;
}
// 使用示例
const car = createVehicle("Toyota");
car.start(); // 输出: Toyota 正在启动。
7. 命令模式：封装请求
命令模式将请求封装为对象，实现灵活的操作调度和撤销功能。
class Light {
on() {
console.log("灯已打开");
}
off() {
console.log("灯已关闭");
}
}
class LightOnCommand {
constructor(light) {
this.light = light;
}
execute() {
this.light.on();
}
}
// 使用示例
const light = new Light();
const lightOnCommand = new LightOnCommand(light);
lightOnCommand.execute(); // 输出: 灯已打开
总结
掌握这些设计模式将使您编写出更优质的代码。理解它们的实际应用，能有效应对挑战，构建更强大的软件。 您最常用的设计模式是什么？欢迎在评论区分享您的经验！
