Conseil rapide: quelles sont les fonctions d'usine en javascript

Fonctions d'usine JavaScript: construire des modèles puissants pour composer des objets

La fonction d'usine JavaScript est une fonction qui renvoie un objet et peut créer plusieurs objets similaires sans utiliser les mots clés new ou this. Cet article explorera plusieurs utilisations des fonctions d'usine, notamment des fonctions d'usine paramétriques, des fonctions d'usine composables, des fonctions d'usine asynchrones et des fonctions d'usine avancées, montrant comment les utiliser pour créer plus flexible et plus facile pour maintenir le code JavaScript.

Concepts de base

• Fonction d'usine: Renvoie la fonction de l'objet.
• Fonction d'usine paramétrée: Acceptez les paramètres pour modifier la fonction d'usine qui renvoie la structure de l'objet.
• Fonctions composites d'usine: Build Fonctions d'usine d'objets complexes en combinant d'autres fonctions d'usine.
• Fonction d'usine asynchrone: Renvoie la fonction d'usine de la promesse de gérer les opérations asynchrones.
• Fonctions d'usine avancées: Fonctions d'usine passées comme paramètres de fonction, utilisés pour créer des améliorants (par exemple, ajouter des horodatages ou créer des objets immuables).

Exemple simple

Une fonction d'usine simple:

<code class="language-javascript">function createJelly() {
  return {
    type: 'jelly',
    colour: 'red',
    scoops: 3
  };
}</code>

Chaque fois que la fonction createJelly() est appelée, une nouvelle instance d'objet Jelly sera renvoyée. Les noms de fonction ne commencent pas nécessairement par create, mais cela peut améliorer la lisibilité du code.

Fonction d'usine de paramétrage

Comme toutes les fonctions, les fonctions d'usine peuvent également accepter des paramètres pour modifier la structure de l'objet retourné:

<code class="language-javascript">function createIceCream(flavour = 'Vanilla') {
  return {
    type: 'icecream',
    scoops: 3,
    flavour
  };
}</code>

Bien que théoriquement un grand nombre de paramètres puissent être utilisés pour créer des objets imbriqués très spécifiques, cela ne correspond pas à l'idée des combinaisons.

Fonction d'usine composite

En définissant une fonction d'usine comme une combinaison d'une autre, des fonctions d'usine complexes peuvent être décomposées en fragments plus petits et plus réutilisables. Par exemple, nous pourrions créer une fonction d'usine de desserts basée sur la fonction d'usine de gelée et de glace précédente:

<code class="language-javascript">function createDessert() {
  return {
    type: 'dessert',
    bowl: [
      createJelly(),
      createIceCream()
    ]
  };
}</code>

En combinant les fonctions d'usine, vous pouvez construire n'importe quelle structure complexe sans utiliser new ou this.

combinaison vs héritage

Les combinaisons

ont tendance à être plus enclines à la relation «Has-A», tandis que l'héritage a tendance à être plus enclin à la relation «IS-A». Par exemple, implémentez un trifle avec héritage:

<code class="language-javascript">// Trifle is a Dessert
function Trifle() {
  Dessert.apply(this, arguments);
}
Trifle.prototype = Dessert.prototype;
// 或使用 ES6 class
class Trifle extends Dessert {}</code>

et utilisez la combinaison pour implémenter Trifle:

<code class="language-javascript">// Trifle has layers of jelly, custard and cream. It also has a topping.
function createTrifle() {
  return {
    type: 'trifle',
    layers: [
      createJelly(),
      createCustard(),
      createCream()
    ],
    topping: createAlmonds()
  };
}</code>

Fonction d'usine asynchrone

Toutes les fonctions d'usine ne peuvent pas renvoyer des données immédiatement. Certaines fonctions d'usine peuvent avoir besoin d'obtenir les données en premier. Dans ces cas, la fonction d'usine qui renvoie une promesse peut être utilisée:

<code class="language-javascript">function getMeal(menuUrl) {
  return new Promise((resolve, reject) => {
    fetch(menuUrl)
      .then(result => {
        resolve({
          type: 'meal',
          courses: result.json()
        });
      })
      .catch(reject);
  });
}</code>

Pour éviter la nidification trop profonde, la fonction d'usine asynchrone peut être décomposée en plusieurs fonctions d'usine indépendantes puis combinées:

<code class="language-javascript">function getMeal(menuUrl) {
  return fetch(menuUrl)
    .then(result => result.json())
    .then(json => createMeal(json));
}

function createMeal(courses = []) {
  return {
    type: 'meal',
    courses
  };
}</code>

Vous pouvez utiliser Promise.all pour combiner plusieurs fonctions d'usine qui renvoient une promesse:

<code class="language-javascript">function getWeeksMeals() {
  const menuUrl = 'jsfood.com/';
  return Promise.all([
    getMeal(`${menuUrl}/monday`),
    // ...
  ]);
}</code>

Fonctions et méthodes

Les fonctions d'usine ne renvoient généralement pas les objets contenant des méthodes, car cela mélange les données et les calculs ensemble. Les fonctions d'usine se concentrent sur la création d'objets de données, tandis que la logique de la manipulation des données est traitée par des fonctions indépendantes.

Fonction d'usine avancée

Passer les fonctions d'usine car les fonctions d'ordre supérieur peuvent obtenir un contrôle puissant. Par exemple, vous pouvez créer un amplificateur à l'aide de fonctions d'usine avancées:

<code class="language-javascript">function createJelly() {
  return {
    type: 'jelly',
    colour: 'red',
    scoops: 3
  };
}</code>

Cet améliorateur prend une fonction d'usine existante et l'enveloppe en une fonction d'usine qui renvoie une instance contenant un horodatage.

Conclusion

Les fonctions d'usine sont un modèle simple et puissant qui encourage l'utilisation de la composition plutôt que l'héritage, créant plus flexible, plus facile à tester et à maintenir le code. En utilisant des blocs de construction simples, le code peut être facilité à comprendre et à entretenir.

(Ce qui suit est la partie FAQ, qui a été réécrite en fonction du texte d'origine, et des problèmes similaires ont été rationalisés et fusionnés)

FAQ (FAQ)

• La différence entre les fonctions d'usine et les constructeurs? La fonction d'usine renvoie directement l'objet sans le mot-clé new; Les fonctions d'usine sont plus flexibles et plus conformes au style de programmation fonctionnelle. new this

• Comment créer des variables privées dans les fonctions d'usine?

  Utiliser les fermetures. Les variables privées sont déclarées dans la fonction d'usine et ne peuvent être accessibles que par des méthodes de l'objet renvoyés par la fonction d'usine.

• Les fonctions d'usine peuvent-elles être utilisées avec les fonctions de flèche ES6?

  Oui.

• Comment ajouter des méthodes aux fonctions d'usine?

  Définissez la méthode dans l'objet renvoyé par la fonction d'usine.

• Les fonctions d'usine peuvent-elles hériter d'autres fonctions d'usine?

  Vous pouvez combiner plusieurs propriétés d'objets avec ou développer les opérateurs pour simuler l'héritage. Object.assign

• Quel rôle les fermetures en usine fonctionnent-elles?

  Les fermetures mettent en œuvre l'encapsulation des données et créent des variables et des méthodes privées.

• La fonction d'usine peut-elle renvoyer d'autres fonctions?

  Oui, cela est souvent utilisé pour créer des fonctions d'ordre supérieur.

• Comment utiliser les fonctions d'usine avec des modules JavaScript?

  Exporter la fonction d'usine, puis l'importez et l'utilisez dans d'autres modules.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!