"单策代迭发命组,模享职中装适外"

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.中介者模式

reduxvuex都是中介者模式的实际应用,把共享数据抽离成一个单独的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转化——“桥接”

最后

  • 创建设计模式:工厂,单例,建造者原型
  • 结构化设计模式:外观,适配器,代理,装饰器,享元桥接,组合
  • 行为型:策略,模板方法,观察者,迭代器,责任链,命令,备忘录,状态,访问者,终结者,解释器

🎈🎈🎈

🌹 持续更文,关注我,你会发现一个踏实努力的宝藏前端😊,让我们一起学习,共同成长吧。

🎉 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 😉

🎁 欢迎大家评论交流, 蟹蟹😊


甜点cc
46 声望4 粉丝

看见另一种可能