设计模式这个词听起来高大上，但其实就是一些编程套路而已。今天咱们就来聊聊前端开发中常见的几种设计模式，看看这些"套路"是怎么帮我们写出更优雅、更易维护的代码的。
单例模式：一山不容二虎
单例模式可能是最简单也是最常用的设计模式之一。它的核心思想就是确保一个类只有一个实例，并提供一个全局访问点。听起来很玄乎？其实就是"只此一家，别无分店"的意思。
在前端开发中，单例模式常常用于管理全局状态、创建共享资源等场景。比如，你可能不希望在应用中出现多个模态框管理器，或者多个事件总线。
来看个例子：
class ModalManager {
constructor() {
if (ModalManager.instance) {
return ModalManager.instance;
}
this.modals = [];
ModalManager.instance = this;
}
open(modal) {
this.modals.push(modal);
console.log('打开模态框');
}
close(modal) {
this.modals = this.modals.filter(m => m !== modal);
console.log('关闭模态框');
}
}
const manager1 = new ModalManager();
const manager2 = new ModalManager();
console.log(manager1 === manager2); // 输出：true
看到没？不管你new多少次，得到的都是同一个实例。这就是单例模式的魔力 —— 它让你的模态框管理器像一个独裁者，牢牢把控着整个应用的模态框大权。
观察者模式：我盯着你呢
观察者模式就像是一群狗仔队盯着明星一样。当明星（被观察者）有什么动静，狗仔队（观察者）就会立即做出反应。在前端开发中，这种模式常用于处理事件监听、状态更新等场景。
来看个简单的例子：
class Subject {
constructor() {
this.observers = [];
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
update(data) {
console.log('收到通知:', data);
}
}
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notify('有新消息！');
// 输出：
// 收到通知: 有新消息！
// 收到通知: 有新消息！
这个模式在前端框架中被广泛使用。比如Vue的响应式系统，React的状态管理，都用到了观察者模式的思想。它让数据变化和UI更新之间的关系变得清晰而优雅。
策略模式：条条大路通罗马
策略模式就像是给你一个瑞士军刀，里面有各种工具，你可以根据不同的情况选择合适的工具来使用。在前端开发中，策略模式常用于处理复杂的条件判断逻辑。
比如说，你正在开发一个表单验证系统，针对不同的字段有不同的验证规则。如果用if-else来写，代码很快就会变得又臭又长。这时候，策略模式就派上用场了：
const validationStrategies = {
required: value => value.trim() !== '' || '此字段不能为空',
minLength: (value, min) => value.length >= min || `长度不能小于${min}个字符`,
email: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || '请输入有效的邮箱地址'
};
function validate(value, rules) {
for (let rule of rules) {
const [strategyName, ...params] = rule.split(':');
const strategy = validationStrategies[strategyName];
const result = strategy(value, ...params);
if (result !== true) {
return result;
}
}
return true;
}
console.log(validate('', ['required'])); // 输出：此字段不能为空
console.log(validate('a@b', ['email'])); // 输出：请输入有效的邮箱地址
console.log(validate('short', ['minLength:6'])); // 输出：长度不能小于6个字符
看，通过策略模式，我们把各种验证规则分离出来，想要添加新规则？直接往validationStrategies里加就行了，完全不用动原来的代码。这就是策略模式的魅力 —— 让你的代码像积木一样，想怎么拼就怎么拼。
装饰器模式：给代码穿新衣
装饰器模式就像是给你的代码穿上了一件华丽的外衣，既不改变原有的结构，又能增加新的功能。在JavaScript中，我们可以利用高阶函数来实现装饰器模式。
比如说，你有一个函数，想要在不修改原函数的情况下，为它添加日志功能：
function log(fn) {
return function(...args) {
console.log(`Calling ${fn.name} with arguments: ${args}`);
const result = fn.apply(this, args);
console.log(`Function ${fn.name} returned ${result}`);
return result;
}
}
function add(a, b) {
return a + b;
}
const decoratedAdd = log(add);
console.log(decoratedAdd(3, 4));
// 输出：
// Calling add with arguments: 3,4
// Function add returned 7
// 7
看到没？我们给add函数穿上了一件"日志外衣"，它现在不仅能正常工作，还能输出日志信息。而且最妙的是，我们根本没动add函数的一行代码！
在现代前端开发中，装饰器模式更是大放异彩。比如在TypeScript或者使用Babel插件的JavaScript项目中，你可以使用@语法来应用装饰器：
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${propertyKey} with arguments: ${args}`);
const result = originalMethod.apply(this, args);
console.log(`Method ${propertyKey} returned ${result}`);
return result;
};
return descriptor;
}
class Calculator {
@log
add(a: number, b: number) {
return a + b;
}
}
const calc = new Calculator();
console.log(calc.add(3, 4));
// 输出：
// Calling add with arguments: 3,4
// Method add returned 7
// 7
这下，我们的代码不仅功能强大，还很时髦，简直就是代码界的fashion icon！
总结
设计模式就像是程序员的武功秘籍，学会了这些"套路"，你就能写出更加优雅、灵活、易于维护的代码。但是，千万别走火入魔，记住"过度设计"这个坑，适度使用才是王道。
最后，送大家一句话：模式千千万，用对是关键。与其生搬硬套，不如知其所以然。只有真正理解了设计模式背后的思想，才能在实际开发中灵活运用，写出真正高质量的代码。
好了，今天的设计模式小课堂到此结束。下次再见，我们继续探讨如何让代码既能打，又能跳，还能貌美如花~
海码面试 小程序
包含最新面试经验分享，面试真题解析，全栈2000+题目库，前后端面试技术手册详解；无论您是校招还是社招面试还是想提升编程能力，都能从容面对~
