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

文章目录

前言

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


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

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

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

什么时候不用

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

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

介绍

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

工厂模式的流程

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

例子

javascript 复制代码
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的时候就应该考虑是否用工厂模式;
  • 需要依赖具体环境创建不同实例,这些实例都有相同的行为,这时候我们可以使用工厂模式,简化实现的过程,同时也可以减少每种对象所需的代码量,有利于消除对象间的耦合,提供更大的灵活性

优点

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

缺陷

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

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

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

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

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

后言

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

相关推荐
前端小小王21 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发30 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪1 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6413 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云4 小时前
npm淘宝镜像
前端·npm·node.js
dz88i84 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr4 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook