模块模式通过闭包封装私有状态，解决全局污染问题；2. 观察者模式实现组件间解耦，适用于状态共享场景；3. 工厂模式统一创建逻辑，提升对象生成灵活性；4. 装饰器模式借助高阶组件等技术动态扩展功能，增强代码复用性。
JavaScript设计模式在前端架构中的应用，不是为了炫技，而是为了解决实际开发中反复出现的结构和维护问题。合理使用设计模式能提升代码的可读性、可维护性和可扩展性，尤其在复杂前端项目中显得尤为重要。下面结合常见场景，介绍几种实用的设计模式及其落地方式。
模块模式：封装私有状态与逻辑
在前端开发中，避免全局变量污染和实现逻辑隔离是基本需求。模块模式通过闭包机制，将变量和函数封装在私有作用域中，仅暴露必要的接口。
现代项目中虽然普遍使用 ES6 模块（import/export），但在某些需要内部状态管理的组件或工具类中，经典的模块模式依然适用。
const UserModule = (function () {let _users = [];
function addUser(name) {
_users.push({ name, id: Date.now() });
}
function listUsers() {
return [..._users];
}
return { addUser, listUsers };
})();
这种方式适合构建独立的功能模块，比如表单验证器、权限管理器等，保证内部数据不被随意篡改。
立即学习“Java免费学习笔记（深入）”；
观察者模式：解耦组件间的通信
前端界面中，多个组件常常需要响应同一状态变化，比如主题切换、用户登录状态更新。观察者模式通过“发布-订阅”机制实现松耦合。
你可以手动实现一个简单的事件总线，也可以借助框架能力（如 Vue 的 $emit / $on，React 结合 context 和自定义 hook）。
class EventBus {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(cb => cb(data));
}
}
}
在微前端或跨层级通信场景中，这种模式能有效减少 props 层层传递的问题。
工厂模式：统一创建复杂对象
当页面中需要根据类型动态生成不同组件或行为时，工厂模式可以集中管理创建逻辑，避免 if-else 堆积。
例如，表单项渲染器根据配置字段 type 创建不同的输入控件。
function InputFactory(type) {switch (type) {
case 'text':
return <input type="text" />;
case 'date':
return <input type="date" />;
case 'select':
return <Select options={...} />;
default:
throw new Error('Unsupported input type');
}
}
结合配置化系统，工厂模式让界面渲染更具弹性，也便于后期扩展新类型。
装饰器模式：动态增强功能
装饰器模式允许在不修改原对象的前提下，为其添加新行为。虽然 JavaScript 原生装饰器仍在提案阶段，但高阶函数和高阶组件（HOC）体现了相同思想。
React 中的 HOC 就是典型应用：
function withLoading(WrappedComponent) {return function Enhanced(props) {
return props.loading ? <Spinner /> : <WrappedComponent {...props} />;
}
}
这种模式适用于日志记录、权限校验、错误捕获等横切关注点，提升逻辑复用性。
基本上就这些。设计模式的价值不在“用了多少”，而在“是否解决了问题”。在前端架构中，结合框架特性灵活运用这些模式，才能真正提升工程质量。不复杂但容易忽略。
