这篇文章主要汇总一些在前端中常见的设计模式，不会每一个都展开讲，遇到觉得有必要深入记录的设计模式就会展开细说。

1. 使用单体模式来实现弹窗的基本原理
2. 使用虚拟代理实现图片的预加载、懒加载
3. 虚拟代理合并 http 请求的理解
4. Vue 观察者模式实现双向绑定
5. 模块模式封装代码块
6. 代理模式实现事件委托
7. 工厂模式实现游戏职业选择（或者自动贩卖机，计算器等）
8. 策略模式实现表单校验
9. 外观模式实现浏览器兼容
10. 备忘录模式实现分页控件
11. 状态模式实现下载
12. 适配器适配前后端数据格式
13. 单例模式弹窗
14. 工厂模式 new Vue
15. 代理模式实现拦截器

观察者模式

class Subject {
  constructor() {
    this.observers = []
  }

  add(observer) {
    this.observers.push(observer)
  }

  notify(...args) {
    this.observers.forEach((observer) => observer.update(...args))
  }
}

class Observer {
  constructor(cb) {
    this.cb = cb
  }
  update(...args) {
    this.cb(...args)
  }
}

const observer1 = new Observer(function (name) {
  console.log('name1: ', name)
})

const observer2 = new Observer(function (name) {
  console.log('name2: ', name)
})

const subject1 = new Subject()
subject1.add(observer1)
subject1.add(observer2)

subject1.notify('evan')

发布订阅模式

观察者模式和发布订阅模式最大的区别，就是发布订阅有事件中心，发布者和订阅者之间不直接互通，由事件中心来控制消息的传递。而观察者模式中观察者和被观察者（事件）之间是彼此感知的，相互耦合的。

举个例子，观察者模式就像是面试官直接监考面试者做题，前端面试官监考前端面试者，后端面试官监考后端面试者。面试者做完了将告诉自己的面试官（观察者）

而发布订阅模式，则是 hr 监考面试者做题，这里可能有前端面试者，有后端面试者，运维面试者等等。某个考生做完题，告诉 hr，然后 hr 去通知对应的面试官

换句话说，观察者模式没有中间商赚差价

• 这两者之间是各有优劣的。
• 发布订阅模式的优点是解耦，发布者和订阅者独立管理，开发使用的时候只需要关注消息中心即可，由消息中心收集 / 推送。缺点就是随着管理的消息越来越多，消息中心需要管理的队列就越来越庞大，而且多了一个中间层，性能也稍微差一些。就像上面的例子，当面试者很多的时候，hr 就会很忙了，处理并且通知各类面试官。除了忙之外效率也没有面试者和面试官直接沟通来的高
• 观察者模式的优点是足够直接，最直接的响应式。当被观察者状态变更的时候，观察者马上就能知道。缺点是彼此耦合，不利于独立维护和管理，开发者需要同时维护观察者和被观察者两个实例。不够灵活自由。此外没有消息队列，意味着每一种观察类型都要构建其观察者和事件的实例。在前端中 addEventListener 其实就是一种观察者的应用