前端设计模式：让代码更优雅的“万能钥匙”

一、什么是设计模式？

设计模式就像建筑界的"施工图纸"，是前人总结的解决常见问题的最佳实践。它们不是现成的代码，而是指导我们如何组织代码的"思路模板"。

举个生活中的例子：

• 盖房子：不同户型的房子结构不同（独栋别墅 vs 公寓），但都会遵循"承重墙+框架"的基本原理。
• 做菜：煎牛排的步骤（腌制→煎制→切片）是"煎类菜肴"的通用流程。

在前端开发中，设计模式的作用体现在：

1. 提高代码复用性：避免重复造轮子
2. 增强可维护性：代码结构清晰，修改方便
3. 降低耦合度：模块之间相互独立
4. 提升开发效率：直接套用成熟方案

---

二、前端常用设计模式详解

1. 单例模式（Singleton Pattern）

核心思想：确保某个类只有一个实例

生活场景：小区物业服务中心，整个小区只设一个服务点

// 全局弹窗管理（单例模式）
const createModal = (() => {
  let instance = null;
  return {
    getInstance() {
      if (!instance) {
        instance = {
          show: (msg) => alert(msg)
        };
      }
      return instance;
    }
  };
})();

// 使用示例
const modal1 = createModal.getInstance();
const modal2 = createModal.getInstance();
console.log(modal1 === modal2); // true

适用场景：

• 全局状态管理（如Vuex、Pinia）
• 路由管理器（Vue Router）
• 日志记录器（Logger）

---

2. 工厂模式（Factory Pattern）

核心思想：通过统一接口创建对象

生活场景：奶茶店点单系统

// 按钮工厂
const ButtonFactory = {
  createButton(type) {
    switch(type) {
      case 'primary':
        return { className: 'btn-primary', text: '确定' };
      case 'danger':
        return { className: 'btn-danger', text: '删除' };
      default:
        return { className: 'btn-default', text: '操作' };
    }
  }
};

// 使用示例
const primaryBtn = ButtonFactory.createButton('primary');
console.log(primaryBtn); // {className: "btn-primary", text: "确定"}

适用场景：

• 动态创建表单控件
• UI组件工厂（如Element UI的Button组件）
• API请求封装（如Axios实例工厂）

---

3. 观察者模式（Observer Pattern）

核心思想：建立"一对多"的依赖关系

生活场景：公众号订阅系统

// 事件总线（观察者模式）
class EventBus {
  constructor() {
    this.subscribers = {};
  }

  on(event, callback) {
    this.subscribers[event] = this.subscribers[event] || [];
    this.subscribers[event].push(callback);
  }

  emit(event, data) {
    if (this.subscribers[event]) {
      this.subscribers[event].forEach(callback => callback(data));
    }
  }

  off(event, callback) {
    if (!this.subscribers[event]) return;
    this.subscribers[event] = this.subscribers[event].filter(cb => cb !== callback);
  }
}

// 使用示例
const bus = new EventBus();

// 订阅消息
bus.on('login', (user) => {
  console.log('用户登录:', user);
});

// 发布消息
bus.emit('login', { name: '张三' });

适用场景：

• Vue 2 的事件总线
• 表单联动验证
• 实时数据更新（如股票行情）

---

4. 策略模式（Strategy Pattern）

核心思想：定义一系列算法并使其可互换

生活场景：外卖平台优惠券选择

// 支付策略
const PaymentStrategies = {
  alipay: (amount) => amount * 0.95,  // 支付宝95折
  wechat: (amount) => amount * 0.98,   // 微信98折
  unionpay: (amount) => amount         // 银联无折扣
};

// 上下文类
class PaymentContext {
  constructor(strategy) {
    this.strategy = strategy;
  }

  calculateFinalPrice(amount) {
    return this.strategy(amount);
  }
}

// 使用示例
const alipayContext = new PaymentContext(PaymentStrategies.alipay);
console.log(alipayContext.calculateFinalPrice(100)); // 95

适用场景：

• 表单验证规则切换
• 排序/过滤策略选择
• 多种支付方式集成

---

5. 模块模式（Module Pattern）

核心思想：封装私有变量和方法

生活场景：多功能电饭煲（隐藏内部电路）

// 计数器模块
const CounterModule = (() => {
  let count = 0; // 私有变量

  const increment = () => ++count;
  const getCount = () => count;

  return {
    increment,
    getCount
  };
})();

// 使用示例
CounterModule.increment();
console.log(CounterModule.getCount()); // 1

适用场景：

• 工具库封装（如lodash）
• 插件开发（如jQuery插件）
• 状态管理模块

---

6. 代理模式（Proxy Pattern）

核心思想：为对象提供代理以控制访问

生活场景：明星经纪人（代理接洽）

// 图片懒加载代理
const ImageLoader = (() => {
  const realImage = (url) => {
    const img = new Image();
    img.src = url;
    return img;
  };

  return {
    load(url) {
      return new Promise((resolve) => {
        const proxyImg = new Image();
        proxyImg.src = 'loading.gif'; // 占位图
        proxyImg.onload = () => resolve(realImage(url));
      });
    }
  };
})();

// 使用示例
ImageLoader.load('big-image.jpg').then(img => {
  document.body.appendChild(img);
});

适用场景：

• 图片懒加载
• 权限控制
• 数据缓存代理

---

7. 组合模式（Composite Pattern）

核心思想：将对象组合成树形结构

生活场景：文件系统（目录和文件的嵌套）

// 组件基类
class Component {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  add(child) {
    this.children.push(child);
  }

  render() {
    throw new Error('必须实现render方法');
  }
}

// 叶子节点
class Leaf extends Component {
  render() {
    return `<div class="leaf">${this.name}</div>`;
  }
}

// 容器节点
class Container extends Component {
  render() {
    let html = `<div class="container">${this.name}`;
    this.children.forEach(child => html += child.render());
    return html + '</div>';
  }
}

// 使用示例
const root = new Container('根目录');
const file1 = new Leaf('文件1');
const folder1 = new Container('文件夹1');
folder1.add(new Leaf('子文件'));
root.add(file1);
root.add(folder1);

document.body.innerHTML = root.render();

适用场景：

• UI组件树（如React组件）
• 菜单系统
• 图形渲染引擎

---

8. MVC/MVP/MVVM 模式

核心思想：分离关注点

1. MVC（Model-View-Controller）

// 传统MVC示例
class Model {
  constructor() {
    this.data = '初始数据';
  }

  updateData(newData) {
    this.data = newData;
  }
}

class View {
  render(data) {
    document.getElementById('app').innerText = data;
  }
}

class Controller {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  updateData(newData) {
    this.model.updateData(newData);
    this.view.render(this.model.data);
  }
}

// 使用示例
const model = new Model();
const view = new View();
const controller = new Controller(model, view);
controller.updateData('新数据');

2. MVVM（Model-View-ViewModel）

<!-- Vue.js 中的MVVM -->
<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

3. 三者对比

模式	控制器/视图模型	数据流	适用框架
MVC	控制器处理逻辑	双向	Angular 1
MVP	视图模型处理逻辑	单向	-
MVVM	自动绑定	双向	Vue/React

---

三、设计模式的选择建议

1. 根据需求选择

问题类型	推荐模式
需要唯一实例	单例模式
需要动态创建对象	工厂模式
需要事件通知	观察者模式
需要多种算法	策略模式
需要隐藏实现	代理模式
需要树形结构	组合模式
需要分离关注点	MVC/MVVM

2. 实践技巧

1. 模块化开发：使用模块模式组织代码
2. 组合优于继承：优先使用组合模式
3. 保持简单：不要过度设计
4. 渐进式应用：从简单项目开始尝试

---

四、常见误区与解决方案

1. 过度使用设计模式

// 错误示例：为简单功能使用复杂模式
class SimpleCalculator {
  add(a, b) { return a + b; }
}

解决方案：设计模式服务于复杂场景，简单功能直接实现即可

2. 忽视性能

// 观察者模式中频繁触发事件
for (let i = 0; i < 1000; i++) {
  bus.emit('update', i); // 每次循环都触发事件
}

解决方案：使用防抖/节流控制事件频率

3. 模式混淆

// 错误地将工厂模式与策略模式混用
const ButtonFactory = {
  createButton(type) {
    const strategies = {
      primary: () => new PrimaryButton(),
      danger: () => new DangerButton()
    };
    return strategies[type](); // 实际上是工厂+策略混合
  }
};

解决方案：明确模式边界，单一职责原则

---

五、结语

设计模式就像程序员的"瑞士军刀"，掌握它们能让我们：

1. 写出更优雅的代码
2. 解决复杂问题
3. 提升职业竞争力

记住：设计模式不是教条，而是工具。在实际开发中：

• 从简单做起
• 逐步引入模式
• 持续优化重构

推荐学习路径：

1. 先掌握基础概念（本文内容）
2. 学习具体语言实现（JavaScript/TypeScript）
3. 阅读开源项目源码（Vue/React源码）
4. 在实际项目中实践应用

设计模式的世界广阔而深邃，愿你在前端开发的道路上，用这些"万能钥匙"打开更多精彩的可能！