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

简介: 前端设计模式之【工厂模式】

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端设计模式

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

什么时候不用

当被应用到错误的问题类型上时,这一模式会给应用程序引入大量不必要的复杂性.除非为创建对象提供一个接口是我们编写的库或者框架的一个设计上目标,否则我会建议使用明确的构造器,以避免不必要的开销。

由于对象的创建过程被高效的抽象在一个接口后面的事实,这也会给依赖于这个过程可能会有多复杂的单元测试带来问题。

介绍

前端中的工厂模式是一种创建对象的设计模式,它可以让我们封装创建对象的细节,我们使用工厂方法而不是直接调用 new 关键字来创建对象,使得代码更加清晰、简洁和易于维护。在前端开发中,工厂模式通常用于创建多个相似但稍有不同的对象,比如创建一系列具有相同样式和行为的按钮或者表单。

工厂模式的流程

+------------------+
  |   Client         |
  +------------------+
         |
         |  requests
         V
  +------------------+
  |   Factory        |
  +------------------+
         |
         |  selects
         V
+---------------------+
| Concrete Factory   |
+---------------------+
         |
         |  creates
         V
+---------------------+
| Concrete Product   |
+---------------------+
         |
         |  returns
         V
  +------------------+
  |   Client         |
  +------------------+
  • 客户端(Client)向工厂对象发出请求。
  • 工厂对象(Factory)根据客户端的请求选择合适的具体工厂。
  • 具体工厂(Concrete Factory)创建所需的具体产品(Concrete Product)对象。
  • 工厂将创建的对象返回给客户端。

例子

class Product {
    constructor(name) {
        this.name = name
    }
    init() {
        console.log('init')
    }
    fun() {
        console.log('fun')
    }
}
class Factory {
    create(name) {
        return new Product(name)
    }
}
// use
let factory = new Factory()
let p = factory.create('p1')
p.init()
p.fun()

场景

  • 如果你不想让某个子系统与较大的那个对象之间形成强耦合,而是想运行时从许多子系统中进行挑选的话,那么工厂模式是一个理想的选择
  • 将new操作简单封装,遇到new的时候就应该考虑是否用工厂模式;
  • 需要依赖具体环境创建不同实例,这些实例都有相同的行为,这时候我们可以使用工厂模式,简化实现的过程,同时也可以减少每种对象所需的代码量,有利于消除对象间的耦合,提供更大的灵活性

优点

  • 创建对象的过程可能很复杂,但我们只需要关心创建结果。
  • 构造函数和创建者分离, 符合“开闭原则”
  • 一个调用者想创建一个对象,只要知道其名称就可以了。
  • 扩展性高,如果想增加一个产品,只要扩展一个工厂类就可以。

缺陷

增加了类的数量引入工厂模式会增加代码的复杂度,因为需要定义接口、具体工厂和具体产品等额外的类,从而增加了类的数量。

不易于扩展如果需要添加新的产品类型,就需要修改工厂类的逻辑,这违反了开闭原则(对扩展开放,对修改关闭)。

难以理解对于简单的项目,引入工厂模式可能会增加不必要的复杂性,使代码难以理解。

静态工厂方法不易被继承如果使用静态工厂方法来创建对象,则无法通过继承改变所创建的产品类型。

增加了代码的抽象程度工厂模式引入了额外的抽象层,使得代码更加抽象,可能增加理解和调试的难度。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
相关文章
|
6月前
|
设计模式 存储 缓存
精进前端开发:深入探讨前端设计模式
精进前端开发:深入探讨前端设计模式
66 0
|
6月前
|
前端开发 搜索推荐 UED
解密前端路由: hash模式vs.history模式
解密前端路由: hash模式vs.history模式
|
6月前
|
设计模式 前端开发 JavaScript
前端设计模式之【迭代器模式】
前端设计模式之【迭代器模式】
73 0
|
6月前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
|
1月前
|
设计模式 前端开发
前端设计模式
10月更文挑战第5天
24 3
|
30天前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
26 0
|
2月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
3月前
|
设计模式 JavaScript 前端开发
Vue.js 组件设计模式:在前端热潮中找到归属感,打造可复用组件库,开启高效开发之旅!
【8月更文挑战第22天】Vue.js 以其高效构建单页应用著称,更可通过精良的组件设计打造可复用组件库。组件应职责单一、边界清晰,如一个显示文本并触发事件的按钮组件,通过 props 传递标签文本,利用插槽增强灵活性,允许父组件注入动态内容。结合 CSS 预处理器管理和封装独立模块,配以详尽文档,有效提升开发效率及代码可维护性。合理设计模式下,组件库既灵活又强大,持续实践可优化项目工作流。
51 1
|
4月前
|
前端开发 JavaScript 开发者
条件判断的模式问题之为什么不建议在前端日常业务开发中使用OOP的责任链模式实践
条件判断的模式问题之为什么不建议在前端日常业务开发中使用OOP的责任链模式实践
|
5月前
|
缓存 前端开发 安全
探索现代Web开发中的前端架构模式
【6月更文挑战第23天】随着互联网技术的飞速发展,前端架构在Web开发中扮演着越来越重要的角色。本文将深入探讨现代Web开发中使用的几种主流前端架构模式,包括单页面应用(SPA)、微前端架构和JAMStack等,并分析它们的优势与应用场景。通过实例演示,我们将看到如何根据项目需求选择合适的前端架构,以及如何利用这些架构模式提升开发效率和应用性能。