1.订阅-发布模式
eventBus
vue的数据响应式原理就是基于发布订阅模式实现的
2.策略模式
简单来时就是把一写具有相关性的工具方法，组合起来，以方便调用和后期增删修等维护
- eg:
const operationType = {
'add': function(){},
'reduce': function(){},
...
}
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()
})
- 电商预定商品，预定额500，实付减100；预定额200，实付减50。预定500的处理函数，预定200的处理函数，
传入参数调用，处理函数依次进行捕捉拦截，如果不满足某一个处理函数的条件则放行到下一个处理函数，这样形成一个职责链。
后续若增加300的预定金额，直接编写预定额为300的处理函数，然后注册进责任链即可。
10.适配器模式
常见的，后端接口返回的数据在前端不能直接使用，需要做转化，这个时候就使用到适配器模式
只关心输入输出数据，正向和反向，有点类似于webpack的loader(只关心输入输出)
小程序适配多平台
react-native 的 虚拟DOM转化——“桥接”
最后
创建设计模式：工厂，单例，建造者原型
结构化设计模式：外观，适配器，代理，装饰器，享元桥接，组合
行为型：策略，模板方法，观察者，迭代器，责任链，命令，备忘录，状态，访问者，终结者，解释器
🎈🎈🎈
🌹 持续更文，关注我，你会发现一个踏实努力的宝藏前端😊，让我们一起学习，共同成长吧。
🎉 喜欢的小伙伴记得点赞关注收藏哟，回看不迷路 😉
🎁 欢迎大家评论交流, 蟹蟹😊