抽象工厂模式 + 建造者模式

前言

要深度理解对扩展开放，对修改关闭，并应用到实际开发项目当中。

---

一、抽象工厂模式

抽象工厂模式是一种创建型设计模式，它可以创建一系列相关或相互依赖的对象，而无需指定其具体类。

在抽象工厂模式中，我们定义一个抽象工厂，它定义了创建一系列相关对象的方法，而不是实现它们。具体工厂类实现这些方法以创建特定类型的产品。这使得客户端从这些工厂中获取一个抽象产品，并不影响客户端，因为客户端仅与这些抽象类／接口交互。

举个例子，假设我们正在开发一个多媒体播放器。这个播放器可以播放音频和视频文件。我们可以定义一个抽象工厂接口来管理不同类型的播放器组件。然后我们可以实现一个具体的工厂类来创建 Windows 媒体播放器、Mac 媒体播放器以及 Linux 媒体播放器。每个具体工厂类都可以返回不同操作系统下特定的视频和音频播放组件。这个抽象工厂模式使得我们可以轻松地扩展播放器以支持新的操作系统和新的媒体格式。

二、建造者模式

建造者模式是一种对象创建模式，旨在将复杂的对象构建过程简化并相互分离，以便能够以更加灵活和独立的方式创建和表示对象（将创建和表示分离）。在前端开发中，建造者模式的一个常见应用是通过构建器对象来创建复杂的 UI 组件、表单、数据集合等等。

以下是一段使用建造者模式创建表单的示例代码：

// 具体表单构建者
class FormBuilder {
  constructor() {
    this.form = {};
  }

  addInput(name, label, type = 'text', required = false) {
    this.form[name] = {
      label,
      type,
      required,
    };
  }

  addCheckbox(name, label, required = false) {
    this.form[name] = {
      label,
      type: 'checkbox',
      required,
    };
  }

  getResult() {
    return this.form;
  }
}

// 使用者
const formBuilder = new FormBuilder();

formBuilder.addInput('firstName', 'First Name', 'text', true);
formBuilder.addInput('lastName', 'Last Name', 'text', true);
formBuilder.addInput('email', 'Email Address', 'email', true);
formBuilder.addCheckbox('newsletter', 'Sign up for our newsletter', false);

const form = formBuilder.getResult();
console.log(form);

/*
输出：
{
  firstName: { label: 'First Name', type: 'text', required: true },
  lastName: { label: 'Last Name', type: 'text', required: true },
  email: { label: 'Email Address', type: 'email', required: true },
  newsletter: { label: 'Sign up for our newsletter', type: 'checkbox', required: false }
}
*/

在这个示例中，FormBuilder 类是具体的表单构建者。它允许我们向表单添加不同类型的输入字段，并在构建完成后返回表单对象。

使用者可以通过实例化一个 FormBuilder 对象，并使用其提供的方法来添加不同类型的表单字段。一旦完成，调用 getResult 方法返回一个 JSON 对象表示表单。