前端开发设计模式：工厂模式（Factory Pattern）【上】

一、工厂模式是什么？

工厂模式是前端开发中一种常见的创建型设计模式。

核心思想：将对象的创建和使用分离，通过统一接口控制不同对象的生成。

好处：将对象的创建逻辑封装起来，当对象的创建过程发生变化时，只需修改工厂部分的代码，而不会影响到使用这些对象的代码。

 关键角色：

• 工厂接口：定义创建对象的方法
• 具体工厂：实现工厂接口，负责生产特定类型的产品
• 产品接口：定义产品的通用规范
• 具体产品：实现产品接口的具体对象

 

 

二、怎么用？

 

简单工厂模式

工厂模式的基础版，它定义了一个工厂类或工厂函数，根据传入的参数来决定创建哪种类型的对象。

适用场景：产品种类较少，且不经常扩展时。

缺点：违背开闭原则（新增产品需要修改工厂类）。

// 定义不同类型的产品类 --- 具体产品
class ProductA {
  constructor() {
    this.type = "productA";
  }
  showInfo() { // 产品接口
    console.log(`我是${this.type}`);
  }
}

class ProductB {
  constructor() {
    this.type = "productB";
  }
  showInfo() {
    console.log(`我是${this.type}`);
  }
}

// 简单工厂函数 --- 工厂接口
function createProduct(type) {
  switch (type) { // 根据传入的参数返回具体的产品实例
    case "A":  // 具体工厂：switch 中的 case
      return new ProductA();
    case "B":
      return new ProductB();
    default:
      throw new Error("no this type");
  }
}

// 使用简单工厂创建对象
const productA = createProduct("A");
productA.showInfo(); // 输出：我是productA

const productB = createProduct("B");
productB.showInfo(); // 输出：我是productB

 

 

工厂方法模式

将对象的创建逻辑抽象成一个抽象方法，由具体的子类来实现这个方法，从而决定创建哪种类型的对象。

适用场景：产品种类较多，需要频繁扩展时

核心：工厂基类定义抽象创建方法，子类实现具体创建逻辑

// 定义不同类型的产品类 --- 具体产品
class ProductA {
  constructor() {
    this.type = "productA";
  }
  showInfo() { // 产品接口
    console.log(`我是${this.type}`);
  }
}
class ProductB {
  constructor() {
    this.type = "productB";
  }
  showInfo() {
    console.log(`我是${this.type}`);
  }
}

// 抽象工厂类 --- 工厂接口Factory：定义了创建产品的接口(方法)，但本身不实现具体的逻辑
class Factory { 
    createProduct(){ // 定义一个抽象方法
        throw new Error('必须重写该方法！');
    }
}

// 具体工厂类 ConcreteFactoryA/B --- 具体工厂 --- 具体工厂子类
// 继承自抽象工厂类Factory的具体工厂类，实现createProduct方法以返回具体的产品实例
class ConcreteFactoryA extends Factory {
    createProduct() {
        return new ProductA();
    }
}
class ConcreteFactoryB extends Factory {
    createProduct() {
        return new ProductB();
    }
}

// 使用工厂方法创建对象
const factoryA = new ConcreteFactoryA();
const productA = factoryA.createProduct();
productA.showInfo(); // 输出: 我是productA

const factoryB = new ConcreteFactoryB();
const productB = factoryB.createProduct();
productB.showInfo(); // 输出: 我是productB

 

 

抽象工厂模式

 提供一个创建一系列相关或者相互依赖对象的接口，而无需指定它们具体的类。它可以创建多个不同类型的产品族。

适用场景：需要同时创建多个关联产品时（如 UI 组件库中的按钮+输入框组合）

核心：抽象工厂定义多组产品接口，具体工厂实现每组产品的创建

// 抽象产品类A
class AbstractProductA {
  use(){ // 创建产品接口，但本身不实现具体逻辑
    throw new Error('抽象产品A的use方法必须被重写')
  }
}
// 具体产品A1 --- 具体产品
class ProductA1 extends AbstractProductA {
  use(){ // 实现产品接口
    console.log('使用产品A1')
  }
}
class ProductA2 extends AbstractProductA {
  use(){
    console.log('使用产品A2')
  }
}


// 抽象产品类B --- 具体产品
class AbstractProductB {
  operate(){ // 创建产品接口但本身不实现
    throw new Error('抽象产品B的use方法必须被重写')
  }
}
// 具体产品B1
class ProductB1 extends AbstractProductB {
  operate(){ // 实现产品接口
    console.log('使用产品B1')
  }
}
class ProductB2 extends AbstractProductB {
  operate(){
    console.log('使用产品B2')
  }
}


// 抽象工厂类  --- 工厂接口
class AbstractFactory {
  createProductA(){ // 定义创建产品A 和产品B 的抽象方法
    throw new Error('抽象工厂类createProductA方法必须被重写')
  }
  createProductB(){
    throw new Error('抽象工厂类createProductB方法必须被重写')
  }
}
// 具体工厂子类1 --- 具体工厂 ConCreteFactory1/2 分别实现产品A/B，创建不同的产品族
class ConcreteFactory1 extends AbstractFactory {
  createProductA(){
    return new ProductA1()
  }
  createProductB(){
    return new ProductB1()
  }
}
// 具体工厂子类2
class ConcreteFactory2 extends AbstractFactory {
  createProductA(){
    return new ProductA2()
  }
  createProductB(){
    return new ProductB2()
  }
}


// 使用抽象工厂创建对象
const factory1 = new ConcreteFactory1()
const productA1 = factory1.createProductA()
const productB1 = factory1.createProductB()
productA1.use() // 输出：使用产品A1
productB1.operate() // 输出：使用产品B1

const factory2 = new ConcreteFactory2()
const productA2 = factory2.createProductA()
const productB2 = factory2.createProductB()
productA2.use() // 输出：使用产品A2
productB2.operate() // 输出：使用产品B2

 

三、工厂模式的使用场景

避免篇幅过长，将此文拆分上下两节。

《前端开发设计模式：工厂模式（Factory Pattern）【下】》