常见的设计模式
- 单例模式
- 工厂模式
- 策略模式
- 代理模式
- 观察者模式
- ...
单例模式
保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象
场景应用
- 页面存在一个模态框的时候,只有用户点击的时候才会创建
Vuex
、redux
全局态管理库也应用单例模式的思想
很多第三方库都是单例模式,多次引用只会使用同一个对象,如 jquery、lodash、moment
工厂模式
工厂角色:
负责实现创建所有实例的内部逻辑.抽象产品角色:
是所创建的所有对象的父类,负责描述所有实例所共有的公共接口具体产品角色:
是创建目标,所有创建的对象都充当这个角色的某个具体类的实例
策略模式
策略模式,就是 定义一系列的算法
,把他们一个个封装起来,并且使他们可以相互替换
至少分成两部分:
- 策略类(可变),策略类封装了具体的算法,并负责具体的计算过程
- 环境类(不变),接受客户的请求,随后将请求委托给某一个策略类
代理模式
代理模式:为对象提供一个 代用品或占位符
,以便控制对它的访问
场景应用
图片懒加载
(先通过一张loading图占位,然后通过异步的方式加载图片,等图片加载好了再把完成的图片加载到img标签里面)读取本地缓存
(相同参数的请求情况下,不去调用 http 请求,节约部分请求时间跟资源)
观察者模式
观察者模式定义了一种 一对多
的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得到通知;
比如你订阅了某个博主的频道,当有内容更新时会收到推送
场景应用
- vue 双向绑定 v-model
- DOM 事件(监听返回)