Maison  >  Article  >  interface Web  >  Explication détaillée de la façon d'utiliser ES6 pour implémenter le modèle singleton et ses applications

Explication détaillée de la façon d'utiliser ES6 pour implémenter le modèle singleton et ses applications

小云云
小云云original
2017-12-11 09:39:231768parcourir

Singleton est une chose très basique en programmation.Cet article vous présente principalement les informations pertinentes sur l'utilisation d'ES6 pour implémenter le modèle singleton et son application.L'article le présente en détail à travers un exemple de code auquel les amis dans le besoin peuvent se référer. J'espère que cela aidera tout le monde.

Avant-propos

Aux yeux des ingénieurs de développement traditionnels, un singleton consiste à garantir qu'une classe n'a qu'une seule instance. La méthode d'implémentation consiste généralement à déterminer d'abord si l'instance existe. , il reviendra directement s'il n'existe pas, il sera renvoyé directement. Il est créé puis renvoyé, ce qui garantit qu'une classe n'a qu'un seul objet instance. En JavaScript, un singleton agit comme un fournisseur d'espace de noms, fournissant un point d'accès unique à l'objet depuis l'espace de noms global.

La définition du modèle singleton est de garantir qu'une classe n'a qu'une seule instance et de fournir un point d'accès global pour y accéder.

Le modèle singleton crée des objets au bon moment et crée le seul.

Le code est proche de la vie et très intéressant. Par exemple, lorsque vous vous connectez à un site Web, une boîte de dialogue contextuelle de connexion apparaîtra après avoir cliqué sur Connexion. Même si vous cliquez à nouveau, la même boîte de dialogue contextuelle n'apparaîtra plus. Ou dans un programme de lecture de musique, si l'utilisateur ouvre un morceau de musique et souhaite en ouvrir un autre, l'interface de lecture précédente se fermera automatiquement et passera à l'interface de lecture actuelle. Ce sont tous des scénarios d’application du modèle singleton.

Pour implémenter un modèle singleton, une méthode classique consiste à créer une classe. Il existe une autre méthode dans la classe qui peut créer un objet instance de la classe, et il existe également une marque pour enregistrer si. il a été créé. Si l'objet existe déjà, une référence au premier objet instancié est renvoyée.

Implémentation du modèle singleton

Méthode d'implémentation ES5

var Singleton = function(name) {
 this.name = name;
 //一个标记,用来判断是否已将创建了该类的实例
 this.instance = null;
}
// 提供了一个静态方法,用户可以直接在类上调用
Singleton.getInstance = function(name) {
 // 没有实例化的时候创建一个该类的实例
 if(!this.instance) {
  this.instance = new Singleton(name);
 }
 // 已经实例化了,返回第一次实例化对象的引用
 return this.instance;
}

Les utilisateurs peuvent passer A interface bien connue pour accéder à cette instance.

Nous essayons d'instancier l'objet deux fois et observons si les deux résultats d'instanciation pointent vers le même objet.

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一实例化的对象
console.log(a === b);

Le résultat renvoyé est : vrai. Expliquez qu’il existe une relation de référence entre a et b.

Méthode d'implémentation es6

Créer une classe Singleton. Le mot-clé class et les fonctions statiques sont tous deux nouveaux dans es6.

class Singleton {
 constructor(name) {
  this.name = name;
  this.instance = null;
 }
 // 构造一个广为人知的接口,供用户对该类进行实例化
 static getInstance(name) {
  if(!this.instance) {
   this.instance = new Singleton(name);
  }
  return this.instance;
 }
}

Exemple d'application de modèle singleton

Nous utilisons un scénario courant dans la vie pour illustrer l'application du modèle singleton.

Sur n'importe quel site Web, si vous cliquez sur le bouton de connexion, une seule boîte de connexion apparaîtra. Même si vous cliquez à nouveau sur le bouton de connexion plus tard, aucune boîte contextuelle n'apparaîtra. Il s'agit d'une application typique du modèle singleton. Ensuite, nous le mettons en œuvre. Afin de nous concentrer sur l’affichage du mode singleton, simplifions la boîte de connexion.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn