本文将带来最实用的 8 种设计模式及其典型应用场景！一、模块模式（Module Pattern）
核心思想：
const Counter = (function () { let count = 0;
return { increment() { count++; }, getCount() { return count; }, };})();
Counter.increment();console.log(Counter.getCount());
二、工厂模式（Factory Pattern）
核心思想：
class Button { constructor(text, color) { this.text = text; this.color = color; }}
function createButton(type) { switch (type) { case 'primary': return new Button('Submit', 'blue'); case 'danger': return new Button('Delete', 'red'); default: return new Button('Button', 'gray'); }}
const btn = createButton('primary');
三、单例模式（Singleton Pattern）
核心思想：
class Logger { constructor() { if (!Logger.instance) { this.logs = []; Logger.instance = this; } return Logger.instance; }
log(message) { this.logs.push(message); console.log(message); }}
const logger1 = new Logger();const logger2 = new Logger();console.log(logger1 === logger2);
四、观察者模式（Observer Pattern）
核心思想：
class EventEmitter { constructor() { this.events = {}; }
on(event, listener) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(listener); }
emit(event, ...args) { if (this.events[event]) { this.events[event].forEach(listener => listener(...args)); } }}
const emitter = new EventEmitter();emitter.on('data', (data) => console.log('Received:', data));emitter.emit('data', { id: 1 });
五、代理模式（Proxy Pattern）
核心思想：
const user = { name: 'John', age: 30};
const validatorProxy = new Proxy(user, { set(target, prop, value) { if (prop === 'age' && typeof value !== 'number') { throw new Error('Age must be a number'); } target[prop] = value; return true; }});
validatorProxy.age = '30';
六、装饰器模式（Decorator Pattern）
核心思想：
function logDecorator(target, name, descriptor) { const original = descriptor.value; descriptor.value = function (...args) { console.log(`Calling ${name} with args:`, args); return original.apply(this, args); }; return descriptor;}
class Calculator { @logDecorator add(a, b) { return a + b; }}
const calc = new Calculator();calc.add(2, 3);
七、策略模式（Strategy Pattern）
核心思想：
const strategies = { add: (a, b) => a + b, subtract: (a, b) => a - b, multiply: (a, b) => a * b,};
function calculate(strategy, a, b) { return strategies[strategy](a, b);}
console.log(calculate('multiply', 3, 4));
八、组合模式（Composite Pattern）
核心思想：
树形结构统一处理，让单对象和组合对象行为一致。
应用场景：菜单组件、文件系统、UI 组件树。
class MenuItem { constructor(name) { this.name = name; }
display() { console.log(`Menu Item: ${this.name}`); }}
class Menu { constructor(name) { this.name = name; this.children = []; }
add(child) { this.children.push(child); }
display() { console.log(`Menu: ${this.name}`); this.children.forEach(child => child.display()); }}
const rootMenu = new Menu('Root');rootMenu.add(new MenuItem('Home'));const subMenu = new Menu('Settings');subMenu.add(new MenuItem('Profile'));rootMenu.add(subMenu);rootMenu.display();
如何选择设计模式？
优先解决问题：不要为了用模式而用模式。
关注代码可维护性：模式应减少耦合，增强扩展性。
结合语言特性：JavaScript 适合函数式与原型链，灵活运用闭包和高阶函数。
框架生态参考：如 React 的 Hooks、Vue 的 Composition API 已内置模式思想。
总结
核心原则：理解模式背后的设计思想（如解耦、复用、扩展），比死记代码更重要。
阅读原文：原文链接
该文章在 2025/4/23 10:12:39 编辑过
400 186 1886
