设计模式

简介: 设计模式

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


最后


  • 创建设计模式:工厂,单例,建造者原型
  • 结构化设计模式:外观,适配器,代理,装饰器,享元桥接,组合
  • 行为型:策略,模板方法,观察者,迭代器,责任链,命令,备忘录,状态,访问者,终结者,解释器
目录
相关文章
C国演义 [第九章]
C国演义 [第九章]
|
JavaScript Shell C#
多种脚本批量下载 Docker 镜像:Shell、PowerShell、Node.js 和 C#
本项目提供多种脚本(Shell、PowerShell、Node.js 和 C#)用于批量下载 Docker 镜像。配置文件 `docker-images.txt` 列出需要下载的镜像及其标签。各脚本首先检查 Docker 是否安装,接着读取配置文件并逐行处理,跳过空行和注释行,提取镜像名称和标签,调用 `docker pull` 命令下载镜像,并输出下载结果。使用时需创建配置文件并运行相应脚本。C# 版本需安装 .NET 8 runtime。
950 3
|
消息中间件 存储 监控
"微服务的神经中枢:深度解析DCM系统架构,打造智能配置管理的黄金时代!"
【8月更文挑战第21天】分布式配置管理(DCM)系统是微服务架构的核心,集中管理配置以确保一致性与灵活性。需满足集中管理、实时更新、高可用及安全性需求。架构包括配置存储、服务器、客户端代理、消息队列及监控组件。工作流程涵盖配置写入、变更通知、获取更新、本地缓存及配置生效。技术选型考虑etcd、Consul等存储方案,及RabbitMQ、Kafka等消息队列。安全性方面实施加密传输、访问控制及审计日志记录。高效可靠的DCM系统对于构建健壮微服务架构至关重要。
304 0
|
编译器 C++ 开发者
C++一分钟之-多重继承与菱形问题
【7月更文挑战第19天】C++的多重继承允许类从多个基类派生,但引入了菱形问题,即类D通过B和C(都继承自A)双重继承A,可能导致数据冗余和二义性。解决这个问题的关键是**虚继承**,通过`virtual`关键字确保基类A只被继承一次,消除冲突。理解并适当使用虚继承是处理这类问题的关键,有助于保持代码的清晰和正确性。
390 0
|
存储 数据可视化 数据管理
Google Earth Engine谷歌地球引擎GEE外部栅格矢量数据导入管理与下载及数据与代码共享
Google Earth Engine谷歌地球引擎GEE外部栅格矢量数据导入管理与下载及数据与代码共享
527 1
|
存储 C++
C++初阶学习第十一弹——探索STL奥秘(六)——深度刨析list的用法和核心点
C++初阶学习第十一弹——探索STL奥秘(六)——深度刨析list的用法和核心点
204 7
|
存储 数据管理 数据处理
阿里云oss流量费用是怎么算的?
阿里云oss流量费用是怎么算的?OSS回源下行流量包价格,OSS流量包100G 49元/月
3673 0
|
监控 小程序 Java
定位系统源码,智慧工厂一体化管控平台源码
这是一套智慧工厂高精度定位管理系统源码,技术架构:Java+ vue+ spring boot。采用UWB定位技术开发,通过部署UWB定位设备实现人、车、物精确定位,打造可寻、可视、可防、可控的一体化管控平台。UWB定位系统具有容量大、稳定性强、精度高、安装便捷、易维护、操作简便等特点。
435 0
定位系统源码,智慧工厂一体化管控平台源码
|
SQL 容器 流计算
Apache Flink 零基础入门(八): SQL 编程实践
本文是 Apache Flink 零基础入门系列文章第八篇,将通过五个实例讲解 Flink SQL 的编程实践。
Apache Flink 零基础入门(八): SQL 编程实践
|
XML JSON Go
Golang结构体入门
Golang结构体入门
172 0

热门文章

最新文章