Implémentation du modèle Singleton dans JavaScript ES6+ : un guide étape par étape

Dans cet article, je vais vous montrer comment implémenter le modèle Singleton en JavaScript.

Si vous êtes un développeur JavaScript full-stack, vous savez que JavaScript est un langage puissant que vous pouvez utiliser pour créer des sites Web étonnants. D'un autre côté, si vous utilisez uniquement JavaScript pour la validation des formulaires frontaux et les appels AJAX, vous n'avez fait qu'effleurer la surface de ce qu'il peut faire, et c'est bien plus que cela. Puisqu’il s’agit d’un langage riche en fonctionnalités, de nombreux frameworks sont construits dessus.

Dans cet article, nous aborderons un modèle de programmation utile en JavaScript orienté objet : le modèle singleton. Les objets Singleton ne sont créés qu'une seule fois dans la portée globale pendant l'exécution de l'application. Ils sont utilisés pour partager des ressources ou coordonner entre différentes parties de l’application.

Qu'est-ce que le modèle singleton ?

Jetons un coup d'œil à la définition du modèle singleton :

En génie logiciel, le modèle singleton est un modèle de conception logicielle qui limite l'instanciation d'une classe à une instance « unique ». Ceci est utile lorsqu'un seul objet est nécessaire pour coordonner le fonctionnement de l'ensemble du système.

Lorsque vous développez une application, vous devez parfois créer des objets globaux dans l'ensemble de l'application. Plus précisément, vous souhaitez qu'un objet soit instancié une seule fois pendant toute la durée de vie de la requête. Par exemple, il peut s'agir d'un objet de connexion à une base de données que vous souhaitez conserver global dans toutes les requêtes, car vous n'avez pas besoin de créer plusieurs objets de base de données pour chaque requête. Dans ce cas, le modèle singleton est très utile car il garantit qu’une seule copie de l’objet sera instanciée.

Aperçu rapide : modèle Singleton dans les anciennes versions de JavaScript

Dans cette section, nous examinerons rapidement comment implémenter le modèle singleton dans les anciennes versions de JavaScript.

Jetons un coup d'œil à l'exemple ci-dessous.

Dans l'exemple ci-dessus, nous avons utilisé la méthode Singleton 对象实现为闭包，因此它将立即被调用。它实现了 getInstance 方法，我们可以调用该方法来实例化一个对象。在 getInstance 方法中，我们检查 instance 属性是否已经拥有我们正在查找的对象，如果存在，我们不会创建另一个对象。如果它不包含任何对象，我们将调用 createInstance pour instancier un nouvel objet puis le renvoyer. De cette façon, cela garantit qu'une seule copie de l'objet est créée chaque fois que vous essayez d'instancier un nouvel objet.

Pour le démontrer, nous appelons la méthode Singleton.getInstance() deux fois pour vérifier si elle crée effectivement deux objets différents. Dans la console, vous devriez pouvoir voir que les deux objets sont identiques et qu'ils impriment tous les deux la même date et la même heure.

Voici comment implémenter le modèle singleton dans les anciennes versions de JavaScript. Dans la section suivante, nous verrons comment implémenter cela dans la version JavaScript ES6+.

Modèle Singleton dans ES6+

Dans cette section, nous apprendrons comment implémenter le modèle singleton dans la version JavaScript ES6+. En ce qui concerne la méthode ES6, il existe plusieurs manières différentes d'implémenter le modèle singleton.

Modules ES6

Si vous avez utilisé des modules ES6 et que vous ne le saviez pas encore, les modules ES6 sont des singletons par défaut. Plus précisément, en combinant des modules et le mot-clé const, vous pouvez facilement écrire des singletons.

Jetons un coup d'œil au code du module ES6 ci-dessous.

const currentDateAndTime = new Object("I am instantiated at:" + new Date().toLocaleString());

export default currentDateAndTime;

Alors maintenant, chaque fois que vous importez le module ES6 ci-dessus, vous êtes assuré d'obtenir la même version de currentDateAndTime 对象。由于 currentDateAndTime L'objet est limité au module, donc chaque fois que vous incluez le module ES6 ci-dessus dans d'autres fichiers, vous êtes assuré d'obtenir le même objet.

Cours ES6

Dans cette section, nous apprendrons comment implémenter le modèle singleton à l'aide des classes ES6.

Jetons un coup d'œil à l'exemple ci-dessous.

Comme vous pouvez le voir, nous avons implémenté la classe DBConnection que nous pouvons utiliser pour instancier des objets de connexion à une base de données dans nos applications.

Pour tester cela, nous instancions deux objets en appelant la méthode getInstance de la classe DBConnection 类的 getInstance 方法实例化了两个对象。然后，我们比较两个对象，看看它们是否相同。由于我们使用的是单例模式，因此它们应该是相同的，并且 console.log 语句将打印 true. Nous comparons ensuite les deux objets pour voir s’ils sont identiques. Puisque nous utilisons le modèle singleton, ils devraient être identiques et l'instruction console.log affichera true pour confirmer. Vous pouvez appeler cela un objet singleton paresseux car l'objet n'est créé qu'en cas de besoin et non lors du chargement initial.

Voici comment définir une classe qui implémente le modèle Singleton.

带有模块的 ES6 类

在本节中，我们将了解如何使用 ES6 类和模块来实现单例模式。

让我们看一下下面的例子。

  constructor(conString) {}

  static getInstance(conString) {
    if (!this.instance) {
      this.instance = new DBConnection(conString);
    }

    return this.instance;
  }
}

const dbConObj = DBConnection.getInstance('mysqldb1');

export default dbConObj;

创建作用域为模块的类的实例是实现单例模式的最佳方法。因此，如果您正在使用 ES6 模块，这是使用 ES6 类实现单例模式的推荐方法。

这就是如何使用 ES6 类和模块实现单例模式。

结论

今天，我们讨论了 JavaScript 中的单例模式。除了基础知识之外，我们还通过几个示例来了解它如何与不同版本的 JavaScript 配合使用。

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!