设计模式 — — 前端

常见的设计模式

• 单例模式
• 工厂模式
• 策略模式
• 代理模式
• 观察者模式
• …

单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象

场景应用

• 页面存在一个模态框的时候，只有用户点击的时候才会创建
• Vuex、redux全局态管理库也应用单例模式的思想

很多第三方库都是单例模式，多次引用只会使用同一个对象，如 jquery、lodash、moment

工厂模式

• 工厂角色:负责实现创建所有实例的内部逻辑.
• 抽象产品角色:是所创建的所有对象的父类，负责描述所有实例所共有的公共接口
• 具体产品角色:是创建目标，所有创建的对象都充当这个角色的某个具体类的实例

策略模式

策略模式，就是 定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换

至少分成两部分：

• 策略类（可变），策略类封装了具体的算法，并负责具体的计算过程
• 环境类（不变），接受客户的请求，随后将请求委托给某一个策略类

代理模式

代理模式：为对象提供一个 代用品或占位符，以便控制对它的访问

场景应用

• 图片懒加载 （先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面）
• 读取本地缓存（相同参数的请求情况下，不去调用 http 请求，节约部分请求时间跟资源）

观察者模式

观察者模式定义了一种 一对多的对象依赖关系，当被依赖的对象的状态发生了改变，所有依赖它的对象都会得到通知；

比如你订阅了某个博主的频道，当有内容更新时会收到推送

场景应用

• vue 双向绑定 v-model
• DOM 事件（监听返回）