工厂方法模式

Description

以一个框架型的类或方法为基础，继承生成不同类型的类或方法，通过不同类型的类或方法直接生成我们需要的对象

Topology

简单工厂模式 - 按钮

Code

/**
 * @description An abstract class for creating button
 * @param btn {HTMLButtonElement Object}
 */
class BtnFactory {
  const btn
  constructor(props) {
    if (new.target === Btn) {
      throw new TypeError("Cannot construct Abstract instances directly")
    }
    this.props.btn = new HTMLButtonElement()
  }
}

/**
 * @description A factory class for creating 
 * a square button
 * 
 * @param btn {HTMLButtonElement Object}
 */
class SquareBtnFactory extends BtnFactory {
  constructor() {
    super(props)
  }
  create() {
    const { btn } = this.props
    btn.classList.add('square')
    return btn
  }
}

/**
 * @description A factory class for creating 
 * a circle button
 * 
 * @param btn {HTMLButtonElement Object}
 */
class CircleBtnFactory extends BtnFactory {
  constructor() {
    super (props)
  }
  create() {
    const { btn } = this.props
    btn.classList.add('circle')
    return btn
  }
}

Summary

这个是我个人根据工厂方法模式设计的符合个人编码习惯的工厂方法模式，原本的模式会将产品生成类再从具体工厂中分离出来，但是每个工厂只是对应生产一种产品，所以个人认为没有必要

优点

面对同类不同型对象的生成场景，可以细分化对象不同型的生成工厂，当有新的需求，只需要创建新的工厂

缺点

当需要生成不同品牌，不同类别的产品时不适用