# 设计模式
TIP
前端设计模式： "单策代迭发命组 模享职中装适外"
# 1.订阅-发布模式
eventBus
vue的数据响应式原理就是基于发布订阅模式实现的
# 2.策略模式
简单来时就是把一写具有相关性的工具方法，组合起来，以方便调用和后期增删修等维护
const operationType = {
'add': function(){},
'reduce': function(){},
...
}
2
3
4
5
# 3.单例模式
譬如做一个全局的弹窗原型，当需要的时候就调用生成弹窗，但是没有必要实例化多个弹窗对象，只要实例化一次然后修改里面的属性参数就可以了
# 4.装饰器模式Decorator
原有的函数或组件不变，只是扩展、引用了一些方法
如：redux 中的@connect，增加了props,state... 使用就是@XX，（ng中的注解）
eg: 就像是一个房子，进行装修（软装）
v-input, v-checkbox
高阶组件，（相对于低阶组件来说，就是基础组件的二次封装，譬如业务组件：下拉搜索选择）
# 5.代理模式
为一个对象提供一个代用品或占位符，以便控制对它的访问
图片懒加载：先使用一个loading图，等图片加载好了，在放到img的src属性上
函数防抖节流也是代理的一种
事件冒泡事件捕获
# 6.中介者模式
redux和vuex都是中介者模式的实际应用，把共享数据抽离成一个单独的store，每个需要用到的组件都store这个中介来操作对象。
目的是减少耦合
# 7.工厂模式
提供创建对象的接口，把对象的创建工作转交给一个外部对象。通俗的讲就是有一个模子，批量去生产。 目的是为了消除对象之间的耦合
eg: 常见的弹窗，message, 对外提供调用方法，然后调用方法新建弹窗或实例化。
# 8.享元模式
比方说一个工厂生产了50个男内衣和50个女内衣，想要找模特拍广告宣传，一般的只需要找一男一女就可以了，而而不是找50个男模特和50个女模特。用代码实现就是采用享元模式，衣服原型-实例化50个男内衣50个女内衣，人原型-实例化男人和女人，衣服和人的原型有相关关系，彼此通过对外提供接口以达到人和衣服结合，然后拍照。
再比如弹窗，创建一个弹窗原型对外提供接口，需要用到的时候直接调用传入不同的参数就可以了，没有必要实例化多次。
其实就是抽象化提取组件
# 9.责任链模式（职责链模式）
使得多个对象都有机会处理请求，从而避免了请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止，这就叫做职责链模式
eg: node,处理请求，
app.use(async(ctx, next) => {
...
await next()
})
2
3
4
电商预定商品，预定额500，实付减100；预定额200，实付减50。
预定500的处理函数，预定200的处理函数，
传入参数调用，处理函数依次进行捕捉拦截，如果不满足某一个处理函数的条件则放行到下一个处理函数，这样形成一个职责链。
后续若增加300的预定金额，直接编写预定额为300的处理函数，然后注册进责任链即可。
# 10.适配器模式
常见的，后端接口返回的数据在前端不能直接使用，需要做转化，这个时候就使用到适配器模式
只关心输入输出数据，正向和反向，有点类似于webpack的loader(只关心输入输出)
文件预览适配器
← 移动端css适配布局 前端架构 →