以下是前端开发中常见的设计模式及其核心思想、应用场景和示例，结合了多个资料源的综合总结：
一、创建型模式
1. 单例模式（Singleton）
• 核心思想：确保全局仅有一个实例，并提供统一访问点。
• 应用场景：全局状态管理（如 Vuex/Redux 的 Store）、配置对象、弹窗组件。
• 示例：
// ES6 模块实现单例
const config = { apiUrl: 'https://api.example.com' };
export default config;
// 通用单例构造器
const getSingle = (fn) => {
let instance;
return () => instance || (instance = fn.apply(this, arguments));
};
2. 工厂模式（Factory）
• 核心思想：封装对象创建过程，通过统一接口动态生成对象。
• 应用场景：UI 组件库（如 React.createElement）、动态创建复杂对象。
• 示例：
// 用户对象工厂
function createUser(name, role) {
return {
name,
role,
greet() {
console.log(`Hi, I'm ${name}, a ${role}`);
}
};
}
const admin = createUser("Alice", "Admin");
二、结构型模式
3. 观察者模式（Observer）
• 核心思想：对象间一对多依赖，状态变更自动通知所有依赖。
• 应用场景：Vue 响应式系统、自定义事件总线。
• 示例：
class Subject {
observers = [];
addObserver(obs) { this.observers.push(obs); }
notify(data) { this.observers.forEach(obs => obs.update(data)); }
}
class Observer {
update(data) { console.log("Received:", data); }
}
4. 代理模式（Proxy）
• 核心思想：通过中介控制对象访问，添加额外逻辑。
• 应用场景：图片懒加载、API 请求拦截、权限控制。
• 示例：
// 图片加载代理
const proxyImage = (src) => {
const img = new Image();
img.src = 'loading.gif';
const realImg = new Image();
realImg.onload = () => img.src = src;
realImg.src = src;
return img;
};
5. 适配器模式（Adapter）
• 核心思想：转换接口使其兼容不同系统。
• 应用场景：第三方库兼容、新旧 API 过渡。
• 示例：
// 旧 API 适配新接口
const legacyApi = { getData: () => "old data" };
const adapter = {
fetch() {
return legacyApi.getData().toUpperCase();
}
};
三、行为型模式
6. 策略模式（Strategy）
• 核心思想：封装可互换的算法族，动态切换策略。
• 应用场景：表单验证规则、促销计算。
• 示例：
const strategies = {
isNonEmpty: (val) => val !== "",
minLength: (val, len) => val.length >= len
};
function validate(value, rules) {
return rules.every(rule => strategies[rule.type](value, rule.param));
}
7. 装饰器模式（Decorator）
• 核心思想：动态扩展对象功能，不修改原结构。
• 应用场景：React 高阶组件、日志增强。
• 示例：
// 日志装饰器
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log("Component mounted");
}
render() {
return
}
};
}
8. 发布订阅模式（Pub-Sub）
• 核心思想：解耦事件发布者与订阅者，支持多对多通信。
• 应用场景：跨组件通信（如 Redux）、异步事件处理。
• 示例：
const eventBus = {
events: {},
subscribe(event, callback) {
this.events[event] = this.events[event] || [];
this.events[event].push(callback);
},
publish(event, data) {
this.events[event]?.forEach(cb => cb(data));
}
};
四、其他重要模式
9. 模块模式（Module）
• 核心思想：封装代码为独立模块，避免全局污染。
• 应用场景：工具库封装、私有变量保护。
• 示例：
const utils = (() => {
const privateVar = "secret";
return {
publicMethod() { return privateVar; }
};
})();
10. 组合模式（Composite）
• 核心思想：以树形结构组合对象，统一操作接口。
• 应用场景：复杂 UI 组件（如树形菜单）、嵌套表单。
• 示例：
class TreeNode {
children = [];
add(child) { this.children.push(child); }
execute() { this.children.forEach(child => child.execute()); }
}
设计模式原则
• 单一职责：一个类/函数只做一件事（如弹窗组件仅管理显示逻辑）。
• 开放封闭：对扩展开放，对修改关闭（如通过装饰器扩展功能而非修改原代码）。