设计模式浅析

“单策代迭发命组，模享职中装适外”

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转化——“桥接”

最后

• 创建设计模式：工厂，单例，建造者原型

• 结构化设计模式：外观，适配器，代理，装饰器，享元桥接，组合

• 行为型：策略，模板方法，观察者，迭代器，责任链，命令，备忘录，状态，访问者，终结者，解释器

---

🎈🎈🎈

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

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

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