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转化——“桥接”
最后
- 创建设计模式:工厂,单例,建造者原型
- 结构化设计模式:外观,适配器,代理,装饰器,享元桥接,组合
- 行为型:策略,模板方法,观察者,迭代器,责任链,命令,备忘录,状态,访问者,终结者,解释器