建站工具 ip培训计划方案模板

常见的设计模式：单例模式、工厂模式、观察者模式、发布-订阅模式、装饰器模式、策略模式、代理模式、模块模式等
React中的高阶组件（装饰器模式）、Vue的事件总线（发布-订阅模式）

一、 单例模式 (Singleton)

用途：确保一个类只有一个实例，并提供全局访问点（如全局状态管理、配置对象）。

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); // true

注意事项：
避免滥用，过度使用单例可能导致全局状态污染。
在模块化系统中（如 ES6 Modules），直接用 export 导出实例更简洁。

二、 工厂模式 (Factory)

用途：封装对象的创建逻辑，根据输入参数返回不同类的实例（如创建 UI 组件、不同数据源连接）。

class Button {render() {console.log("Base Button");}
}class PrimaryButton extends Button {render() {console.log("Primary Button");}
}class SecondaryButton extends Button {render() {console.log("Secondary Button");}
}function createButton(type) {switch (type) {case "primary":return new PrimaryButton();case "secondary":return new SecondaryButton();default:return new Button();}
}const btn1 = createButton("primary");
btn1.render(); // "Primary Button"

注意事项：
适合对象创建逻辑复杂的场景。
新增类型时需要修改工厂函数，违反开闭原则。

三、 观察者模式 (Observer)

用途：定义对象间的一对多依赖关系，当一个对象状态变化时，自动通知所有依赖者（如事件处理、数据绑定）。

class Subject {constructor() {this.observers = [];}addObserver(observer) {this.observers.push(observer);}notify(data) {this.observers.forEach(observer => observer.update(data));}
}class Observer {update(data) {console.log("Received data:", data);}
}const subject = new Subject();
const observer1 = new Observer();
subject.addObserver(observer1);
subject.notify("Hello!"); // "Received data: Hello!"

注意事项：
观察者和被观察者可能形成循环依赖。
如果没有正确移除观察者会导致内存泄漏。

四、 发布-订阅模式 (Pub-Sub)

用途：解耦事件的发布者和订阅者，通过事件中心管理通信（如 Vue 的事件总线、Redux 的订阅机制）。

class EventBus {constructor() {this.events = {};}subscribe(eventName, callback) {if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);}publish(eventName, data) {if (this.events[eventName]) {this.events[eventName].forEach(cb => cb(data));}}
}const bus = new EventBus();
bus.subscribe("message", data => console.log("Received:", data));
bus.publish("message", "Hello World!"); // "Received: Hello World!"

注意事项：
比观察者模式更解耦，但事件命名冲突可能导致问题。
避免过度使用，高频事件可能影响性能。

五、 装饰器模式 (Decorator)

用途：动态扩展对象功能，不修改原对象代码（如日志记录、权限校验）。
代码示例（使用 ES7 装饰器语法）：

function log(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 {@logadd(a, b) {return a + b;}
}const calc = new Calculator();
calc.add(2, 3); // 输出: "Calling add with args: [2, 3]"

注意事项：
装饰器可能增加代码复杂度。
JavaScript 原生装饰器语法需要 Babel 编译支持。

六、 策略模式 (Strategy)

用途：定义一系列算法，使其可互相替换（如表单验证、支付方式选择）。

const strategies = {add: (a, b) => a + b,subtract: (a, b) => a - b,multiply: (a, b) => a * b
};class Calculator {calculate(strategy, a, b) {return strategies[strategy](a, b);}
}const calc = new Calculator();
console.log(calc.calculate("add", 5, 3)); // 8

注意事项：
适合替换大量条件分支语句。
如果策略对象可能过多，需合理管理。

七、代理模式 (Proxy)

用途：为对象提供代理以控制访问（如数据校验、缓存、延迟加载）。
代码示例（使用 ES6 Proxy）：

const user = {name: "John",age: 30
};const proxy = new Proxy(user, {get(target, prop) {console.log(`Reading ${prop}`);return target[prop];},set(target, prop, value) {if (prop === "age" && value < 0) {throw new Error("Invalid age");}target[prop] = value;return true;}
});console.log(proxy.name); // "Reading name" → "John"
proxy.age = -1; // 抛出错误

注意事项：
可能引入性能开销。
避免过度拦截导致调试困难。

八、 模块模式 (Module)

用途：封装私有变量和方法，暴露公有接口（如工具库、组件封装）。

const CounterModule = (() => {let count = 0;const increment = () => {count++;console.log("Count:", count);};return {increment};
})();CounterModule.increment(); // "Count: 1"
// CounterModule.count → 无法访问

注意事项：
适合小型模块化开发。
现代开发中更推荐使用 ES6 Modules。

总结

单例模式： 用于全局状态管理、配置共享，注意避免全局污染；
工厂模式： 用于动态创建对象，注意新增类型需修改工厂函数
观察者/发布订阅模式： 用于事件驱动、数据绑定，注意防止内存泄漏、命名冲突
装饰器模式： 用于功能扩展（AOP 编程），注意增加代码复杂度
策略模式： 用于替换条件分支，注意管理大量策略对象
代理模式： 用于访问控制、缓存，注意性能开销
模块模式： 用于封装私有逻辑，注意现代开发优先使用 ES6 Modules

设计原则：
不要过度设计：仅在复杂度需要时引入设计模式。
优先使用语言特性：如 ES6 的 Proxy、class、模块等原生支持。