前端 9大 设计模式

设计模式听起来高大上，其实就是一些经过验证的、高效的代码写法。你的代码会变得更清晰、更易维护。

1. 外观模式：提供一个简单的接口

想象一下，你家有很多电器：电视、空调、音响。如果每次回家都要一个个打开，太麻烦了！外观模式就像是智能家居系统，你只需要说"小爱同学，我回家了"，它就帮你把所有的电器都打开。

简单代码：

// 复杂的子系统
class TV {
  on() { console.log('打开电视'); }
}

class AirConditioner {
  on() { console.log('打开空调'); }
}

// 外观（智能家居）
class SmartHome {
  constructor() {
    this.tv = new TV();
    this.ac = new AirConditioner();
  }
  
  // 提供简单的接口
  comeHome() {
    this.tv.on();
    this.ac.on();
  }
}

// 使用
const home = new SmartHome();
home.comeHome(); // 一句搞定所有

2. 代理模式：找个中间人帮忙

你想送礼物给心仪的人，但不知道对方什么时候心情好，怎么办？找个了解TA的朋友帮忙，在合适的时候送出去，这就是代理模式。

简单代码：

// 礼物
class Gift {
  constructor(name) {
    this.name = name;
  }
}

// 你（不知道对方心情）
class You {
  sendGift(proxy) {
    const gift = new Gift('玫瑰花');
    proxy.receiveGift(gift);
  }
}

// 代理（朋友）
class Friend {
  receiveGift(gift) {
    // 等对方心情好再送
    setTimeout(() => {
      crush.receiveGift(gift);
    }, 1000);
  }
}

// 心仪的人
const crush = {
  receiveGift: (gift) => {
    console.log(`收到${gift.name}，好开心！`);
  }
};

// 使用
const you = new You();
const friend = new Friend();
you.sendGift(friend); // 让朋友帮忙送

3. 工厂模式：专门生产对象的工厂

你想吃 pizza，是自己去买面粉、奶酪做，还是直接打电话给 pizza 店？工厂模式就是那个 pizza 店，你告诉它要什么，它给你做好送来。

简单代码：

// 产品类
class Pizza {
  constructor(type) {
    this.type = type;
  }
}

// 工厂类
class PizzaFactory {
  createPizza(type) {
    return new Pizza(type);
  }
}

// 使用
const factory = new PizzaFactory();
const pizza = factory.createPizza('芝士披萨');
console.log(`美味的${pizza.type}做好了！`);

4. 单例模式：独一无二的存在

公司只有一个CEO，无论谁要找CEO，找到的都是同一个人。单例模式确保一个类只有一个实例。

简单代码：

class CEO {
  constructor() {
    if (CEO.instance) {
      return CEO.instance;
    }
    CEO.instance = this;
    this.name = '张总';
  }
}

// 使用
const ceo1 = new CEO();
const ceo2 = new CEO();

console.log(ceo1 === ceo2); // true，是同一个CEO

5. 策略模式：多种策略，随意切换

你要去旅行，可以选择不同的交通工具：飞机、高铁、自驾。每种方式都是不同的策略，根据情况选择。

简单代码：

// 策略对象
const travelStrategies = {
  byAirplane: () => console.log('坐飞机，快速但贵'),
  byTrain: () => console.log('坐高铁，舒适便捷'),
  byCar: () => console.log('自驾，自由灵活')
};

// 使用策略
function travel(strategy) {
  return travelStrategies[strategy]();
}

// 使用
travel('byTrain'); // 坐高铁，舒适便捷
travel('byCar');   // 自驾，自由灵活

6. 迭代器模式：一个个遍历

就像老师点名，一个个学生叫过去，不会漏掉也不会重复。迭代器模式帮你按顺序访问集合中的每个元素。

简单代码：

// 自定义迭代器
class MyIterator {
  constructor(items) {
    this.items = items;
    this.index = 0;
  }
  
  next() {
    return this.items[this.index++];
  }
  
  hasNext() {
    return this.index < this.items.length;
  }
}

// 使用
const fruits = ['苹果', '香蕉', '橘子'];
const iterator = new MyIterator(fruits);

while (iterator.hasNext()) {
  console.log(iterator.next()); // 依次输出：苹果、香蕉、橘子
}

7. 观察者模式：我通知你

你关注了一个博主，博主一发新内容，你就收到通知。这就是观察者模式。

简单代码：

// 被观察者（博主）
class Blogger {
  constructor() {
    this.fans = []; // 粉丝列表
  }
  
  // 添加粉丝
  addFan(fan) {
    this.fans.push(fan);
  }
  
  // 发布新内容
  post(content) {
    console.log(`博主发布了：${content}`);
    this.fans.forEach(fan => fan.update(content));
  }
}

// 观察者（粉丝）
class Fan {
  constructor(name) {
    this.name = name;
  }
  
  update(content) {
    console.log(`${this.name}收到更新：${content}`);
  }
}

// 使用
const blogger = new Blogger();
const fan1 = new Fan('小明');
const fan2 = new Fan('小红');

blogger.addFan(fan1);
blogger.addFan(fan2);

blogger.post('新文章：设计模式详解');
// 小明和小红都会收到通知

8. 中介者模式：找个中介

两个人吵架，直接沟通容易吵得更凶。找个中介在中间传话，问题就好解决了。

简单代码：

// 中介者
class Mediator {
  send(message, from, to) {
    console.log(`${from.name} 对 ${to.name} 说：${message}`);
  }
}

// 人员
class Person {
  constructor(name, mediator) {
    this.name = name;
    this.mediator = mediator;
  }
  
  say(message, to) {
    this.mediator.send(message, this, to);
  }
}

// 使用
const mediator = new Mediator();
const zhangsan = new Person('张三', mediator);
const lisi = new Person('李四', mediator);

zhangsan.say('你好啊！', lisi); // 通过中介传话

9. 访问者模式：外来者帮忙

你家电路坏了，你自己不会修，请了个电工来修。电工就是访问者，他来操作你家的电路。

简单代码：

// 元素（家）
class Home {
  accept(repairman) {
    repairman.repair(this);
  }
}

// 访问者（电工）
class Electrician {
  repair(home) {
    console.log('电工修好了电路');
  }
}

// 使用
const myHome = new Home();
const electrician = new Electrician();

myHome.accept(electrician); // 请电工来修

---

这9种设计模式在前端开发中非常常用，掌握它们能让你的代码更加优雅和高效。最重要的是理解每种模式的思想，而不是死记硬背代码。