设计模式

简介: 设计模式

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


最后


  • 创建设计模式:工厂,单例,建造者原型
  • 结构化设计模式:外观,适配器,代理,装饰器,享元桥接,组合
  • 行为型:策略,模板方法,观察者,迭代器,责任链,命令,备忘录,状态,访问者,终结者,解释器
目录
相关文章
|
5月前
|
设计模式 开发框架 前端开发
设计模式一
设计模式是面向对象编程的实践经验,旨在解决一系列问题,促进软件的可升级和维护。它分为创建型(如工厂、单例模式)、结构型(适配器、装饰器模式等)和行为型(观察者、策略模式等)三大类。J2EE模式关注表示层,包括MVC模式等。设计模式的七大原则包括里氏替换、依赖倒置、开闭原则、单一职责、接口隔离、迪米特原则和合成复用原则,这些原则有助于减少耦合和提高代码可读性。接口作为契约和层间对接工具,约束类型行为并允许实现多继承。
|
5月前
|
设计模式 存储 算法
|
6月前
|
设计模式 自动驾驶 NoSQL
设计模式总结(一)
设计模式总结(一)
|
6月前
|
设计模式 存储 安全
[设计模式] 常见的设计模式
[设计模式] 常见的设计模式
|
设计模式
23种设计模式
23种设计模式主要分为三大类:创建型模式、结构型模式和行为型模式。
77 0
|
设计模式 算法 程序员
【3W2H设计模式】什么是设计模式
【3W2H设计模式】什么是设计模式
265 0
|
设计模式
纵观设计模式
前言: 设计模式已经学习了近一个月,但深知还没有学到设计模式的精髓,先将这一阶段的感受记录下来,以后加实例辅助学习。
纵观设计模式
|
设计模式 算法 程序员
2023-6-9-一天一种设计模式
2023-6-9-一天一种设计模式
75 0
|
设计模式
|
设计模式 算法 安全
11种常用的设计模式
有这么一个很形象的比喻,把写代码比作是建房子,代码比作是砖瓦、一个完整的系统就好比是一栋高楼大厦、程序员无疑就好比是建(ban)筑(zhuan)工,这些很表面的东西我们都可以很形象深刻的理解,其实要设计和开发一个系统远远不只这些东西,深挖表象之下隐藏着的细节往往才是灵魂所在,诸如:算法和数据结构、框架、设计模式等,设计模式是一个虚幻的抽象的概念,好比建造房子时的设计理念方案一样,一个软件系统扩展性、可维护性以及稳定健壮性如何,很大程度上取决于设计模式。
124 0
11种常用的设计模式