前端设计模式-工厂模式

274 阅读2分钟

前言

提示:以下是本篇文章正文内容,下面案例可供参考

定义

工厂设计模式属于创建型模式,它提供了一种创建对象的最佳方式。在工厂模式中,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口来指向新创建的对象。

主要解决: 主要解决接口选择的问题。

何时使用: 我们明确地计划不同条件下创建不同实例时。

如何解决: 让其子类实现工厂接口,返回的也是一个抽象的产品。

关键代码: 创建过程在其子类执行。

生活中的工厂模式

  • 1、厨房,进去不同的食材,通过相同的方法和特有的烹饪方法,产出不同的菜肴。
  • 2、加工厂,进入不同的原材料,通过差不多的流水线,得到不同的产品。不同条件下,创建不同的实例。
  • 3、多观察生活现象,联想自然科学。。。。。。

应用场景

  • 1、 Jquery 的 $('div')
  • 2、 React.createElement
  • 3、 vue 的异步组件

注意事项: 作为一种创建类模式,在任何需要生成复杂对象的地方,都可以使用工厂方法模式。有一点需要注意的地方就是复杂对象适合使用工厂模式,而简单对象,特别是只需要通过 new 就可以完成创建的对象,无需使用工厂模式。如果使用工厂模式,就需要引入一个工厂类,会增加系统的复杂度。

实现工厂类

UML建模图 image.png

代码实现

// 创建一个工厂类
class Product {
  constructor(name) {
    this.name = name 
  }
  
  init() {
    console.log('init');
  }
  fn1() {
    console.log('fn1');
  }
  fn2(){
    console.log('fn2');
  }
  getName() {
    console.log(this.name);
  }
}

// 使用该工厂
class Creator {
  create(name) {
    return new Product(name)
  }
}

// 创建实例
let creator = new Creator()
let p = creator.create('ppp')

p.init()
p.fn1()
p.getName()

输出

init
fn1
ppp

设计原则

  • 1、 构造函数和创建者分离
  • 2、开发封闭原则