0
点赞
收藏
分享

微信扫一扫

设计模式学习笔记(一):简单工厂模式

一、定义

简单工厂模式(Simple Factory Pattern)是属于创建型模式的一种,也被称为静态工厂方法模式(Static Factory Method Pattern)。在简单工厂模式中可以根据不同的参数返回不同的实例。

二、分析

1.角色分析

简单工厂模式包含以下三种角色:

1.Factory(工厂)

即工厂类,工厂类负责实现创建所有实例的内部逻辑,是简单工厂模式的核心。在工厂内中提供静态的工厂方法来返回一个抽象产品类。

2.Product(抽象产品)

抽象产品类是所有对象的父类,它描述了所有实例所共有的公共接口。

3.ConcreteProduct(具体产品)

它是简单工厂的创建目标,所有创建的对象都充当这个角色某个具体类的实例。

2.代码分析

下面的代码简单展示了如何通过简单工厂模式创建不同颜色的div

  <script>
    // 抽象产品类
    class AbstractDiv {
      constructor() {
        this.element = document.createElement("div");
      }
      // 抽象方法,需要由具体产品类实现
      setStyle() {}
      getElement() {
        return this.element;
      }
    }
    // 具体产品类 - RedDiv
    class RedDiv extends AbstractDiv {
      constructor() {
        super();
        this.setStyle();
      }
      setStyle() {
        this.element.style.backgroundColor = "red";
        this.element.style.width = "100px";
        this.element.style.height = "100px";
        this.element.style.margin = "10px";
        this.element.style.display = "inline-block";
      }
    }
    // 具体产品类 - GreenDiv
    class GreenDiv extends AbstractDiv {
      constructor() {
        super();
        this.setStyle();
      }
      setStyle() {
        this.element.style.backgroundColor = "green";
        this.element.style.width = "100px";
        this.element.style.height = "100px";
        this.element.style.margin = "10px";
        this.element.style.display = "inline-block";
      }
    }
    // 工厂类
    class DivFactory {
      constructor() {
        // 初始化一个数组来存储所有通过工厂创建的Div实例
        this.divs = [];
      }
      createDiv(color) {
        let div;
        if (color === "red") {
          div = new RedDiv();
        } else if (color === "green") {
          div = new GreenDiv();
        } else {
          throw new Error(`暂不支持${color}色`);
        }
        // 将新创建的Div实例添加到divs数组中
        this.divs.push(div);
        // 返回Div实例
        return div;
      }
      getAllDivs() {
        return this.divs;
      }
    }

    // 示例用法
    const container = document.getElementById("div-container"); // 假设页面上有这个元素
    // 创建DivFactory实例
    const divFactory = new DivFactory();
    // 创建并添加不同颜色的div到容器中
    const redDivInstance = divFactory.createDiv("red");
    const greenDivInstance = divFactory.createDiv("green");
    container.appendChild(redDivInstance.getElement());
    container.appendChild(greenDivInstance.getElement());
    // 如果需要,可以获取所有创建的Div实例
    const allDivs = divFactory.getAllDivs();
    console.log(allDivs);
  </script>

图片简单描述:

三、作用与优缺点

作用

简单工厂设计模式的主要作用是将对象的创建与使用分离。它隐藏了对象创建的具体细节,客户端只需要知道所需对象的类型或参数,而不必关心对象的创建过程。这样,客户端代码可以更加简洁和易于维护。

优点

  1. 封装对象创建逻辑
  2. 隐藏对象创建细节
  3. 简化对象创建过程

缺陷

  1. 工厂类职责过重一旦工厂类不能正常工作,整个系统都可能受到影响
  2. 增加类的个数会增加复杂度
  3. 系统扩展困难

参考资料

设计模式(第二版) 主编:刘伟  清华大学出版社

举报

相关推荐

设计模式_简单工厂模式

0 条评论