前端常见设计模式

以下是前端开发中常见的设计模式及其核心思想、应用场景和示例，结合了多个资料源的综合总结：

---

一、创建型模式

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 <WrappedComponent {...this.props} />;
    }
  };
}

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()); }
}

---

设计模式原则

• 单一职责：一个类/函数只做一件事（如弹窗组件仅管理显示逻辑）。
• 开放封闭：对扩展开放，对修改关闭（如通过装饰器扩展功能而非修改原代码）。