factory-pattern

工厂模式

使用工厂模式，我们可以通过工厂函数来创建新对象。如果一个函数在不使用 new 关键字的情况下返回一个新对象，那么它就是工厂函数！

假设我们的应用需要很多用户。我们可以创建包含 firstName、lastName 和 email 属性的新用户。工厂函数还会为新创建的对象添加 fullName 属性，该属性会返回 firstName 和 lastName。

适用场景

• 需要创建多个具有相同属性的对象时
• 对象的创建取决于特定环境或配置时

不适用场景

• 对于使用普通对象字面量就足够的简单对象，工厂会带来不必要的间接性
• 如果类构造函数是项目中约定俗成的方式，且团队习惯使用 new
• 如果对象创建不受条件逻辑或配置影响

说明

• 使用工厂函数，根据当前环境或用户专属配置返回自定义对象
• 优先使用 ES6 箭头函数，以简洁地定义工厂函数
• 如果注重内存效率，可以考虑改用类构造函数，因为实例会共享原型方法

详情

const createUser = ({ firstName, lastName, email }) => ({
  firstName,
  lastName,
  email,
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
});

太好了！现在，我们只需调用 createUser 函数，就可以轻松创建多个用户。

如果我们要创建相对复杂且可配置的对象，工厂模式会很有用。键和值可能取决于特定环境或配置。借助工厂模式，我们可以轻松创建包含自定义键和值的新对象！

const createObjectFromArray = ([key, value]) => ({
  [key]: value,
});

createObjectFromArray(["name", "John"]); // { name: "John" }

优点

当我们需要创建多个具有相同属性的小型对象时，工厂模式很有用。工厂函数可以根据当前环境或用户专属配置，轻松返回自定义对象。

缺点

在 JavaScript 中，工厂模式不过是一个不使用 new 关键字来返回对象的函数。ES6 箭头函数允许我们创建简短的工厂函数，每次调用时都会隐式返回一个对象。

不过，在很多情况下，创建新实例比每次都创建新对象更加节省内存。

class User {
  constructor(firstName, lastName, email) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
  }

  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const user1 = new User({
  firstName: "John",
  lastName: "Doe",
  email: "[email protected]",
});

const user2 = new User({
  firstName: "Jane",
  lastName: "Doe",
  email: "[email protected]",
});

来源

• patterns.dev/vanilla/factory-pattern

参考资料

• JavaScript Factory Functions with ES6+ - Eric Elliott