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

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

前言

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

优点

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

缺陷

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

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

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

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

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

后言

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


目录
相关文章
|
1天前
|
设计模式 前端开发
前端设计模式
前端设计模式
9 2
|
8天前
|
缓存 前端开发 安全
探索现代Web开发中的前端架构模式
【6月更文挑战第23天】随着互联网技术的飞速发展,前端架构在Web开发中扮演着越来越重要的角色。本文将深入探讨现代Web开发中使用的几种主流前端架构模式,包括单页面应用(SPA)、微前端架构和JAMStack等,并分析它们的优势与应用场景。通过实例演示,我们将看到如何根据项目需求选择合适的前端架构,以及如何利用这些架构模式提升开发效率和应用性能。
|
2月前
|
前端开发 搜索推荐 开发者
【Flutter前端技术开发专栏】Flutter中的自定义主题与暗黑模式
【4月更文挑战第30天】本文介绍了如何在Flutter中自定义主题和实现暗黑模式。通过`ThemeData`类定义应用的外观,包括颜色、字体和样式。示例展示了如何设置主色、强调色及文本、按钮主题。暗黑模式可通过`darkTheme`属性启用,结合`ThemeData.dark()`方法定制。利用`MediaQuery`监听系统亮度变化,动态调整暗黑模式状态。Flutter的这些特性有助于开发者创建独特且用户友好的界面。
【Flutter前端技术开发专栏】Flutter中的自定义主题与暗黑模式
|
2月前
|
前端开发 UED
前端事件驱动模式如何提高用户体验和应用程序的交互性
前端事件驱动模式提升用户体验,实现即时响应、动态更新界面、精确处理交互、创建用户友好界面和增强可扩展性。通过监听用户操作触发事件处理,实现流畅、直观的交互,如表单验证、输入补全、拖拽排序等。模块化设计便于功能扩展和维护,打造响应式、用户中心化的应用。
|
2月前
|
前端开发 网络协议 JavaScript
如何在前端实现WebSocket发送和接收TCP消息(多线程模式)
请确保在你的服务器端实现WebSocket的处理,以便它可以接受和响应前端发送的消息。同时,考虑处理错误情况和关闭连接的情况以提高可靠性。
89 0
|
2月前
|
设计模式 存储 缓存
精进前端开发:深入探讨前端设计模式
精进前端开发:深入探讨前端设计模式
39 0
|
2月前
|
前端开发 搜索推荐 UED
解密前端路由: hash模式vs.history模式
解密前端路由: hash模式vs.history模式
|
2月前
|
设计模式 算法 前端开发
【面试题】如何理解 前端设计模式-测策略模式?
【面试题】如何理解 前端设计模式-测策略模式?
|
2月前
|
前端开发
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
|
2月前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?