Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2017-12-11 09:39:23
original
1781 Les gens l'ont consulté

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;
}
Copier après la connexion

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);
Copier après la connexion

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;
 }
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal