【前端设计模式】之抽象工厂模式

抽象工厂模式是一种创建型设计模式,它提供了一种创建一系列相关或相互依赖对象的接口,而无需指定具体类。在前端开发中,抽象工厂模式可以帮助我们更好地组织和管理代码,提高代码的可维护性和可扩展性。

抽象工厂模式特性

  1. 抽象工厂模式将对象的创建与使用分离,客户端只需要关心接口而不需要关心具体实现。
  2. 抽象工厂模式可以通过切换具体工厂类来改变整个系统的行为。
  3. 抽象工厂模式符合开闭原则,当需要增加新的产品族时,只需要扩展抽象工厂和具体工厂类即可。

应用示例

1. 创建一个UI组件库:

 
// 抽象工厂
class UIComponentFactory {createButton() {}createInput() {}
}// 具体工厂
class MaterialUIComponentFactory extends UIComponentFactory {createButton() {return new MaterialButton();}createInput() {return new MaterialInput();}
}class AntDesignUIComponentFactory extends UIComponentFactory {createButton() {return new AntDesignButton();}createInput() {return new AntDesignInput();}
}// 抽象产品
class Button {}
class Input {}// 具体产品
class MaterialButton extends Button {}
class MaterialInput extends Input {}class AntDesignButton extends Button {}
class AntDesignInput extends Input {}// 使用
const materialFactory = new MaterialUIComponentFactory();
const materialButton = materialFactory.createButton();
const materialInput = materialFactory.createInput();const antDesignFactory = new AntDesignUIComponentFactory();
const antDesignButton = antDesignFactory.createButton();
const antDesignInput = antDesignFactory.createInput();

  1. UIComponentFactory 类是一个抽象的工厂类,它定义了两个基本的工厂方法:createButton() 和 createInput()。这些方法在具体的工厂类中被覆盖,以创建特定类型的按钮和输入框。
  2. MaterialUIComponentFactory 和 AntDesignUIComponentFactory 是两个具体的工厂类,它们继承自 UIComponentFactory。每个工厂都有自己的 createButton() 和 createInput() 方法,这些方法返回特定类型的按钮和输入框(分别是 MaterialButton 和 MaterialInput,以及 AntDesignButton 和 AntDesignInput)。
  3. Button 和 Input 是抽象产品类,它们定义了产品的一般性特征。具体的 MaterialButton 和 AntDesignButton 类继承自 Button 类,而 MaterialInput 和 AntDesignInput 类继承自 Input 类。

最后创建了两个具体的工厂对象(materialFactory 和 antDesignFactory),并使用它们的 createButton() 和 createInput() 方法创建了具体的按钮和输入框对象。

2. 创建一个跨浏览器的XHR对象

 
// 抽象工厂
class XHRFactory {createXHR() {return new XHR();}
}// 具体工厂
class StandardXHRFactory extends XHRFactory {createXHR() {return new StandardXHR();}
}class ActiveXHRFactory extends XHRFactory {createXHR() {return new ActiveXHR();}
}// 抽象产品
class XHR {send(data) {throw new Error("This method must be overridden");}
}// 具体产品
class StandardXHR extends XHR {send(data) {console.log("Sending data with StandardXHR: " + data);}
}class ActiveXHR extends XHR {send(data) {console.log("Sending data with ActiveXHR: " + data);}
}// 使用
let xhr;
if (new XMLHttpRequest()) {const standardXhrFactory = new StandardXHRFactory();xhr = standardXhrFactory.createXHR();
} else if (new ActiveXObject()) {const activeXhrFactory = new ActiveXHRFactory();xhr = activeXhrFactory.createXHR();
} else {throw new Error("No suitable XHR implementation found");
}if (xhr instanceof StandardXHR) {xhr.send("Some data");
} else if (xhr instanceof ActiveXHR) {xhr.send("Some data");
} else {throw new Error("Unknown XHR type");
}

首先,我们定义了一个抽象工厂类XHRFactory,其中包含一个createXHR()方法用于创建XHR对象。然后,我们定义了两个具体工厂类StandardXHRFactoryActiveXHRFactory,它们分别继承自抽象工厂类,并实现了createXHR()方法来创建具体的XHR对象。

接着,我们定义了一个抽象产品类XHR,其中包含一个抽象方法send(data)。然后,我们定义了两个具体产品类StandardXHRActiveXHR,它们分别继承自抽象产品类,并实现了send(data)方法来发送数据。

在使用部分,我们首先通过判断浏览器是否支持XMLHttpRequest来选择具体的工厂类。如果支持,则使用StandardXHRFactory创建一个标准的XHR对象;如果不支持,则使用ActiveXHRFactory创建一个ActiveX的XHR对象。然后,根据具体的XHR对象类型来调用相应的发送数据方法。

这样,在不同浏览器环境下,我们可以通过抽象工厂模式来创建适合当前环境的跨浏览器的XHR对象,并且可以统一调用发送数据方法。

优缺点

优点
  1. 提供了一种封装对象创建的方式,使得客户端代码与具体类解耦,易于维护和扩展。
  2. 可以通过切换具体工厂类来改变整个系统的行为,提高代码的灵活性和可配置性。
  3. 符合开闭原则,当需要增加新的产品族时,只需要扩展抽象工厂和具体工厂类即可。
缺点
  1. 增加了系统的复杂度,引入了更多的类和接口。
  2. 当产品族较多时,需要创建大量的具体工厂类,增加了代码量。

总结

抽象工厂模式是一种创建型设计模式,适用于需要创建一系列相关或相互依赖对象的场景。在前端开发中,抽象工厂模式可以帮助我们更好地组织和管理代码,提高代码的可维护性和可扩展性。它通过封装对象的创建过程,使得客户端代码与具体类解耦,并且可以通过切换具体工厂类来改变整个系统的行为。然而,它也增加了系统的复杂度,并且当产品族较多时会导致大量的具体工厂类。因此,在使用抽象工厂模式时需要权衡利弊,并根据实际情况进行选择。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/118830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HugeGraph Hubble 配置 https 协议的操作步骤

背景 HugeGraph 图数据库的 Server 端支持 https 配置,官方文档中有说明相对比较容易,而 Hubble 部署过程都是 http的。 我们有一个应用要嵌入 hubble 页面,而且部署为 https ,那么 Hubble 是否支持配置 https 呢?网…

大数据技术学习笔记(三)—— Hadoop 的运行模式

目录 1 本地模式2 伪分布式模式3 完全分布式模式3.1 准备3台客户机3.2 同步分发内容3.2.1 分发命令3.2.2 执行分发操作 3.3 集群配置3.3.1 集群部署规划3.3.2 配置文件说明3.3.3 修改配置文件3.3.4 分发配置信息 3.4 SSH无密登录配置3.4.1 配置ssh3.4.2 无密钥配置 3.5 单点启动…

python的多线程介绍之thread

python的多线程介绍之thread Python的thread模块是Python标准库中的一个模块,用于创建和管理线程。它是Python早期支持多线程的方式之一,但在Python 2.4之后,推荐使用threading模块来实现多线程。 以下是thread模块的一些基本功能和用法&…

随笔 | 写在剑桥学习一个月的这一天

目录 来剑桥的第一天各种意外正式的冒险社恐直接表达放轻松,勇敢面对后记. 来剑桥的第一天 来剑桥的第一天,还是那么印象深刻。 那是来英国的第二天,伦敦的天气还行,偶尔多云偶尔天晴。 和他纠结半天,最终还是选择了…

C++【多态】

文章目录: C 多态1. 多态的概念2. 多态的定义和实现2.1 构成多态的必要条件2.2 虚函数和重写2.3 虚函数重写的两个例外2.4 例题运用2.5 final 和 override2.6 重载、重写、重定义 3. 抽象类4. 多态的原理4.1 虚表指针4.2 多态和非多态调用4.3 回想满足条件4.4 虚函数…

Selenium中WebDriver最新Chrome驱动安装教程

😏作者简介:博主是一位测试管理者,同时也是一名对外企业兼职讲师。 📡主页地址:【Austin_zhai】 🙆目的与景愿:旨在于能帮助更多的测试行业人员提升软硬技能,分享行业相关最新信息。…

【广州华锐互动】智能家居设计3D虚拟还原系统

随着科技的飞速发展,人们对家居生活的需求也在不断提高。智能家居作为一种新兴的生活方式,正逐渐成为现代人追求的理想居住环境。而智能家居设计3D虚拟还原系统,正是为了让人们更好地了解和体验智能家居带来的便捷与舒适,让未来生…

聚观早报 |2024年春节连休8天;RTE2023开幕

【聚观365】10月26日消息 2024年春节连休8天 RTE2023开幕 一加12首发“东方屏” 微软公布2024财年第一财季财报 Alphabet Q3业绩好于预期 2024年春节连休8天 国务院办公厅发布关于2024年部分节假日安排的通知。2024年春节,2月10日至17日放假调休,共…

1023 组个最小数

给定数字 0-9 各若干个。你可以以任意顺序排列这些数字,但必须全部使用。目标是使得最后得到的数尽可能小(注意 0 不能做首位)。例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的最…

面向边缘场景的 PWA 实践

背景 随着5G技术的发展,物联网边缘侧主要应用于数据传输量大、安全要求高以及数据实时处理等行业与应用场景中。其中,边缘计算是一种分布式计算模式,其将计算资源和数据处理能力推向接近数据源的边缘设备,以减少延迟并提高响应速度…

信息系统架构的设计理论与实践

信息系统架构的设计理论与实践 信息系统架构概述 信息系统架构的定义和发展 信息系统架构的定义 骚戴理解:这里只要背定义即可 信息系统架构的发展 信息系统架构的分类(集中式和分布式) 集中式结构 分布式结构 信息系统常用的四种架构模型…

番外8.2---配置/管理硬盘

""" Step1:清楚磁盘、硬盘(HDD)、光驱的概念及是否具有包含关系。 Step2:硬件设备(IDE、SCSI、SATA、NVMe、软驱等)命名方式及在linux系统里对应的文件名称。 Step3:&#xff1…

2023-10学习笔记

1.sql注入 不管是上一篇博客,通过java代码执行sql 还是我们常用的Mybatis的#{}和${} 都会提到sql注入的问题 1.1啥是sql注入 应该知道是说传入无关的参数,比如本来是想要一个where条件查询参数 但是你拼了一个drop 比如 原来的sql select * from…

Python数据结构——数组

数组是一种基本的数据结构,用于存储一系列相同类型的元素。Python提供了多种数组实现,包括列表、NumPy数组和array模块。本文将详细介绍Python中的数组数据结构的使用,并提供示例代码来说明。 列表(List):…

正点原子嵌入式linux驱动开发——RGB转HDMI

目前大多数的显示器都提供了HDMI接口,HDMI的应用范围也越来越广,但是STM32MP157这颗芯片原生并不支持HDMI显示。可以通过RGB转HDMI芯片将RGB信号转为HDMI信号,这样就可以连接HDMI显示器了。本章就来学习一下如何在正点原子的STM32MP1开发板上…

《从零开始大模型开发与微调 :基于PyTorch与ChatGLM》简介

内 容 简 介 大模型是深度学习自然语言处理皇冠上的一颗明珠,也是当前AI和NLP研究与产业中最重要的方向之一。本书使用PyTorch 2.0作为学习大模型的基本框架,以ChatGLM为例详细讲解大模型的基本理论、算法、程序实现、应用实战以及微调技术,…

Qt中的枚举变量,Q_ENUM,Q_FLAG以及Qt中自定义结构体、枚举型做信号参数传递

Qt中的枚举变量,Q_ENUM,Q_FLAG,Q_NAMESPACE,Q_ENUM_NS,Q_FLAG_NS以及其他 理论基础:一、Q_ENUM二、QMetaEnum三、Q_FLAG四、示例 Chapter1 Qt中的枚举变量,Q_ENUM,Q_FLAG,Q_NAMESPACE,Q_ENUM_NS,Q_FLAG_NS以及其他前言Q_ENUM的使用Q_FLAG的引入解决什么问题&#xf…

多头风险管理和空头风险管理

当谈到金融投资和风险管理时,多头风险管理和空头风险管理是两个重要的概念。它们涉及到投资者在市场中面临的不同类型的风险以及如何管理这些风险。 多头风险管理(Long Risk Management): 多头风险管理是指投资者持有多头头寸&…

Pytorch指定数据加载器使用子进程

torch.utils.data.DataLoader(train_dataset, batch_sizebatch_size, shuffleTrue,num_workers4, pin_memoryTrue) num_workers 参数是 DataLoader 类的一个参数,它指定了数据加载器使用的子进程数量。通过增加 num_workers 的数量,可以并行地读取和预处…

如何将音频与视频分离

您一定经历过这样的情况:当你非常喜欢视频中的背景音乐时,希望将音频从视频中分离出来,以便你可以在音乐播放器中收听音乐。有没有一种有效的方法可以帮助您快速从视频中提取音频呢?当然是有的啦,在下面的文章中&#…