设计模式

简介: 设计模式

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


最后


  • 创建设计模式:工厂,单例,建造者原型
  • 结构化设计模式:外观,适配器,代理,装饰器,享元桥接,组合
  • 行为型:策略,模板方法,观察者,迭代器,责任链,命令,备忘录,状态,访问者,终结者,解释器
目录
相关文章
|
4天前
|
设计模式 缓存 算法
设计模式
设计模式
7 0
|
4天前
|
设计模式 算法
什么是设计模式,有哪些设计模式,设计模式用来做什么
什么是设计模式,有哪些设计模式,设计模式用来做什么
|
4天前
|
设计模式 Java 测试技术
设计模式之-降龙十八掌
设计模式之-降龙十八掌
36 0
|
8月前
|
设计模式
23种设计模式
23种设计模式主要分为三大类:创建型模式、结构型模式和行为型模式。
|
10月前
|
设计模式
设计模式总结
设计模式总结
61 0
|
10月前
|
设计模式 算法 数据库连接
|
设计模式 XML 开发框架
设计模式的理解
设计模式的理解
设计模式的理解
|
设计模式 数据可视化 程序员
|
设计模式 算法 Java
0202年了!你还不知道模版方法设计模式?
0202年了!你还不知道模版方法设计模式?
|
设计模式
设计模式总结与对比
设计模式总结与对比
133 0
设计模式总结与对比