单例模式确保全局唯一实例，适用于配置管理；观察者模式通过发布-订阅实现组件通信；工厂模式集中创建对象逻辑；装饰器模式动态扩展功能。这些模式提升代码可维护性与协作效率，应结合实际需求灵活运用。
在复杂的JavaScript应用中，设计模式是提升代码可维护性、可扩展性和协作效率的关键工具。合理使用设计模式能帮助开发者更好地组织逻辑、解耦模块，并应对频繁变化的需求。以下是几种常见设计模式在实际开发中的应用场景与实现方式。
单例模式：确保全局唯一实例
单例模式保证一个类仅有一个实例，并提供全局访问点。这在配置管理、日志记录或状态存储等场景中非常有用。
在JavaScript中，可以通过闭包或模块模式实现单例：
const ConfigManager = (function () {
let instance;
function createInstance() {
return {
settings: {},
set(key, value) {
this.settings[key] = value;
},
get(key) {
return this.settings[key];
}
};
}
return {
getInstance() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
// 使用
const config1 = ConfigManager.getInstance();
const config2 = ConfigManager.getInstance();
<strong>console.log(config1 === config2); // true</strong>
这种写法避免了重复创建对象，节省资源并保持状态一致。
立即学习“Java免费学习笔记（深入）”；
观察者模式：实现组件间通信
在前端应用中，组件之间经常需要响应数据变化。观察者模式通过“发布-订阅”机制解耦发送者和接收者。
一个简单的事件中心可以这样实现：
class EventEmitter {
constructor() {
this.events = {};
}
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(callback => callback(data));
}
}
off(event, callback) {
if (this.events[event]) {
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
}
}
// 使用
const eventBus = new EventEmitter();
eventBus.on('userLogin', user => console.log(`欢迎 ${user.name}`));
eventBus.emit('userLogin', { name: 'Alice' });
这种模式广泛应用于状态管理、UI更新通知等场景。
工厂模式：灵活创建对象
当需要根据条件创建不同类型的对象时，工厂模式能集中创建逻辑，避免散落在各处的new操作。
例如，在表单验证中生成不同的校验器：
function ValidatorFactory(type) {
switch (type) {
case 'email':
return {
validate(value) {
return /\S+@\S+\.\S+/.test(value);
}
};
case 'phone':
return {
validate(value) {
return /^\d{11}$/.test(value);
}
};
default:
throw new Error('不支持的类型');
}
}
// 使用
const emailValidator = ValidatorFactory('email');
<strong>console.log(emailValidator.validate('test@example.com')); // true</strong>
这种方式让新增校验类型更方便，也便于统一管理。
装饰器模式：动态扩展功能
装饰器模式允许在不修改原对象的前提下，为其添加新功能。ESNext中的装饰器语法（需Babel支持）让这一模式更直观。
例如，为方法添加日志或性能监控：
function log(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function (...args) {
console.log(`调用 ${name}，参数:`, args);
const result = original.apply(this, args);
console.log(`${name} 返回:`, result);
return result;
};
return descriptor;
}
class UserService {
@log
fetchUser(id) {
return { id, name: 'Bob' };
}
}
const service = new UserService();
service.fetchUser(1);
输出会自动包含调用信息，适合调试或埋点需求。
基本上就这些。这些设计模式不是教条，而是解决特定问题的经验总结。在复杂应用中结合使用，能让代码结构更清晰，团队协作更顺畅。关键是理解每种模式的意图，而不是强行套用。
