Back to Details

factory-pattern

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Factory Pattern

Factory Pattern

With the factory pattern we can use factory functions in order to create new objects. A function is a factory function when it returns a new object without the use of the 
new
keyword!
Say that we need many users for our application. We can create new users with a 
firstName
, 
lastName
, and 
email
property. The factory function adds a 
fullName
property to the newly created object as well, which returns the 
firstName
and the 
lastName
.
借助Factory Pattern，我们可以使用factory functions来创建新对象。当一个函数无需使用
new
关键字就能返回新对象时，它就是一个factory function！
假设我们的应用需要大量用户对象。我们可以创建带有
firstName
、
lastName
和
email
属性的新用户。factory function还会为新创建的对象添加
fullName
属性，该属性会返回
firstName
和
lastName
的组合。

When to Use

适用场景

  • Use this when you need to create multiple objects that share the same properties
  • This is helpful when object creation depends on a certain environment or configuration
  • 当你需要创建多个具有相同属性的对象时使用此模式
  • 当对象的创建依赖特定环境或配置时，此模式会很有帮助

Instructions

使用说明

  • Use factory functions to return custom objects based on current environment or user-specific configuration
  • Prefer ES6 arrow functions for concise factory function definitions
  • Consider using class constructors instead when memory efficiency matters, as instances share prototype methods
  • 使用factory functions根据当前环境或用户特定配置返回自定义对象
  • 优先使用ES6箭头函数来定义简洁的factory function
  • 当内存效率很重要时，考虑改用类构造函数，因为实例会共享原型方法

Details

示例代码

js
const createUser = ({ firstName, lastName, email }) => ({
  firstName,
  lastName,
  email,
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
});
Perfect! We can now easily create multiple users by invoking the 
createUser
function.
The factory pattern can be useful if we're creating relatively complex and configurable objects. It could happen that the values of the keys and values are dependent on a certain environment or configuration. With the factory pattern, we can easily create new objects that contain the custom keys and values!
js
const createObjectFromArray = ([key, value]) => ({
  [key]: value,
});

createObjectFromArray(["name", "John"]); // { name: "John" }
js
const createUser = ({ firstName, lastName, email }) => ({
  firstName,
  lastName,
  email,
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
});
完美！现在我们可以通过调用
createUser
函数轻松创建多个用户。
如果我们要创建相对复杂且可配置的对象，Factory Pattern会非常有用。对象的键值对可能依赖于特定环境或配置。借助Factory Pattern，我们可以轻松创建包含自定义键值对的新对象！
js
const createObjectFromArray = ([key, value]) => ({
  [key]: value,
});

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

Pros

优点

The factory pattern is useful when we have to create multiple smaller objects that share the same properties. A factory function can easily return a custom object depending on the current environment, or user-specific configuration.
当我们需要创建多个具有相同属性的小型对象时，Factory Pattern十分实用。factory function可以根据当前环境或用户特定配置轻松返回自定义对象。

Cons

缺点

In JavaScript, the factory pattern isn't much more than a function that returns an object without using the 
new
keyword. ES6 arrow functions allow us to create small factory functions that implicitly return an object each time.
However, in many cases it may be more memory efficient to create new instances instead of new objects each time.
js
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: "john@doe.com",
});

const user2 = new User({
  firstName: "Jane",
  lastName: "Doe",
  email: "jane@doe.com",
});
在JavaScript中，Factory Pattern本质上就是一个无需使用
new
关键字返回对象的函数。ES6箭头函数让我们可以创建小型factory function，每次调用都会隐式返回一个对象。
不过，在很多情况下，创建新实例可能比每次创建新对象更节省内存。
js
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: "john@doe.com",
});

const user2 = new User({
  firstName: "Jane",
  lastName: "Doe",
  email: "jane@doe.com",
});

Source

来源

References

参考资料