惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园_首页
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
P
Proofpoint News Feed
G
Google Developers Blog
B
Blog
Engineering at Meta
Engineering at Meta
阮一峰的网络日志
阮一峰的网络日志
The Register - Security
The Register - Security
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - 叶小钗
The Cloudflare Blog
The Hacker News
The Hacker News
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
CXSECURITY Database RSS Feed - CXSecurity.com
雷峰网
雷峰网
F
Fortinet All Blogs
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
H
Hackread – Cybersecurity News, Data Breaches, AI and More
酷 壳 – CoolShell
酷 壳 – CoolShell
Last Week in AI
Last Week in AI
T
Threat Research - Cisco Blogs
A
About on SuperTechFans
量子位
Recorded Future
Recorded Future
博客园 - 三生石上(FineUI控件)
H
Help Net Security
Help Net Security
Help Net Security
P
Palo Alto Networks Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
T
Troy Hunt's Blog
W
WeLiveSecurity
V
Vulnerabilities – Threatpost
T
The Exploit Database - CXSecurity.com
Know Your Adversary
Know Your Adversary
Apple Machine Learning Research
Apple Machine Learning Research
Scott Helme
Scott Helme
N
News | PayPal Newsroom
AWS News Blog
AWS News Blog
D
DataBreaches.Net
Blog — PlanetScale
Blog — PlanetScale
MongoDB | Blog
MongoDB | Blog
B
Blog RSS Feed
腾讯CDC
J
Java Code Geeks
Microsoft Azure Blog
Microsoft Azure Blog
TaoSecurity Blog
TaoSecurity Blog
GbyAI
GbyAI
Y
Y Combinator Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
D
Docker

博客园 - bala001

【记录】一文搞懂pinia状态管理(保姆级教程) 前端开发设计模式:原型模式 2025 年前端面试中常见问题 Object.create 前端开发设计模式:工厂模式(Factory Pattern)【下】 前端开发设计模式:单例模式之场景应用&实现 前端开发设计模式:架构 前端开发设计模式: 单例模式(Singleton Pattern) JS篇之JS类型 2024/10/20: TypeScript 学习笔记三:TypeScript 类型系统 博文阅读密码验证 - 博客园 2024/09/22:TypeScript 学习笔记二 2024/09/20: TypeScript 学习笔记一 css 技巧 博文阅读密码验证 - 博客园 博文阅读密码验证 - 博客园 45 个每个开发人员都应该知道的 JavaScript 超级技巧 - 抄录 明确学习路径与方法 开篇词 - 《重学前端》
前端开发设计模式:工厂模式(Factory Pattern)【上】
bala001 · 2025-03-18 · via 博客园 - bala001

一、工厂模式是什么?

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

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

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

 关键角色

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

二、怎么用?

简单工厂模式

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

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

缺点:违背开闭原则(新增产品需要修改工厂类)。

// 定义不同类型的产品类 --- 具体产品
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)【下】