设计模式

简介: 设计模式

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


最后


  • 创建设计模式:工厂,单例,建造者原型
  • 结构化设计模式:外观,适配器,代理,装饰器,享元桥接,组合
  • 行为型:策略,模板方法,观察者,迭代器,责任链,命令,备忘录,状态,访问者,终结者,解释器
目录
相关文章
|
2月前
|
设计模式 安全 Java
24种设计模式详解(下)
24种设计模式详解(下)
37 0
|
6月前
|
设计模式 开发框架 前端开发
设计模式一
设计模式是面向对象编程的实践经验,旨在解决一系列问题,促进软件的可升级和维护。它分为创建型(如工厂、单例模式)、结构型(适配器、装饰器模式等)和行为型(观察者、策略模式等)三大类。J2EE模式关注表示层,包括MVC模式等。设计模式的七大原则包括里氏替换、依赖倒置、开闭原则、单一职责、接口隔离、迪米特原则和合成复用原则,这些原则有助于减少耦合和提高代码可读性。接口作为契约和层间对接工具,约束类型行为并允许实现多继承。
|
6月前
|
设计模式 存储 算法
|
设计模式 缓存 Java
设计模式
本文主要介绍设计模式的主要设计原则和常用设计模式。
123 0
设计模式
|
设计模式 数据可视化 程序员
设计模式到底是什么
设计模式到底是什么
87 1
|
设计模式 算法 程序员
2023-6-9-一天一种设计模式
2023-6-9-一天一种设计模式
79 0
|
设计模式
设计模式思考总结
设计模式思考总结
68 0
|
设计模式 算法 C#
使用c#实现23种常见的设计模式
使用c#实现23种常见的设计模式
92 0
|
存储 设计模式 缓存
设计模式(五)
设计模式
123 0
|
设计模式 Arthas Java
设计模式(四)
设计模式
202 0