Comment implémenter un modèle singleton en JavaScript

Cet article présente principalement des exemples d'implémentation JavaScript du mode singleton et des explications de code. Les lecteurs dans le besoin peuvent le suivre pour référence.

Modèle singleton traditionnel

Garantit qu'une classe n'a qu'une seule instance et fournit un point d'accès global pour y accéder.

Implémenter l'idée de base d'un singleton

n'est rien de plus que d'utiliser une variable pour marquer si un objet a été créé pour une certaine classe. Si tel est le cas, il sera renvoyé directement le. la prochaine fois qu'une instance de la classe sera obtenue. Pour les objets créés précédemment, nous utiliserons JavaScript pour implémenter cette idée. Veuillez consulter le code :

var Singleton = function( name ){
  this.name = name;
};
Singleton.prototype.getName = function(){　　 alert ( this.name );
};
Singleton.getInstance = (function(){ 　　var instance = null;
　　return function( name ){
　　　　　　　　　　if ( !instance ){
　　　　　　　　　　　　instance = new Singleton( name );
　　　　　　　　　　}
　　　　　　　　return instance;　　　　　　 }
})();

Nous utilisons Singleton.getInstance pour obtenir le seul objet de. la classe Singleton. Ce n'est en effet pas un problème, mais JS lui-même n'a pas le concept de classe, cela n'a donc aucun sens pour nous de l'implémenter avec la pensée singleton traditionnelle. Un tel code est long et malodorant (en fait, je me sens mal à l'aise de le regarder). il). Ci-dessous, nous utilisons des fermetures JavaScript pour implémenter un singleton. Veuillez regarder le code :

var Createp = (function(){ 　　　　　　var instance;
　　　　　　var Createp = function( html ){ 　　　　　　　　　　if ( instance ){
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
Createp.prototype.init = function(){
var p = document.createElement( 'p' );
p.innerHTML = this.html; 
document.body.appendChild( p );
　　　　　　};
　　　　　　return Createp; })();
var a = new Createp( 'sven1' ); var b = new Createp( 'sven2' );
alert ( a === b ); // true

Comme vous pouvez le voir, nous avons effectivement utilisé des fermetures pour implémenter un singleton, mais ce code est toujours hautement couplé, le. Le constructeur de Createp est en réalité responsable de deux choses. La première consiste à créer l'objet et à exécuter la méthode d'initialisation init, et la seconde consiste à s'assurer qu'il n'y a qu'un seul objet. Un tel code a des responsabilités peu claires. Nous devons maintenant séparer ces deux tâches. Le constructeur est responsable de la construction de l'objet. Quant à décider s'il faut renvoyer un objet existant ou construire un nouvel objet et le renvoyer, nous laissons le soin à une autre fonction de le faire. Il s'agit en fait de satisfaire une idée de programmation : le principe de responsabilité unique. Un tel code peut être mieux découplé. Veuillez regarder le code suivant :

var Createp = function (html) {
    this.html = html;
    this.init();
  };
  Createp.prototype.init = function () {
    var p = document.createElement('p');
    p.innerHTML = this.html;
    document.body.appendChild(p);
  };
  var ProxySingletonCreatep = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new Createp(html);
      }
      return instance;
    }
  })();
  var a = new ProxySingletonCreatep('sven1');
  var b = new ProxySingletonCreatep('sven2');
  alert(a === b); //true

Comme vous pouvez le voir, notre constructeur Createp est désormais uniquement responsable de la construction des objets Quant à savoir s'il faut renvoyer les objets existants ou en construire de nouveaux. L'objet est renvoyé. Nous laissons cette question à la classe proxy proxySingletonCreatep. Ce type de code semble confortable (zhuang) et confortable (bi) !

Enfin, publiez un code de modèle singleton très abstrait, l'essence du singleton paresseux !

//单例模式抽象，分离创建对象的函数和判断对象是否已经创建
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || ( result = fn.apply(this, arguments) );
    }
  };

Le paramètre formel fn est notre constructeur. Il nous suffit de transmettre n'importe quel constructeur dont nous avons besoin pour générer un nouveau singleton paresseux. Par exemple, si vous transmettez le constructeur pour créer une petite amie et appelez getSingle(), vous pouvez générer une nouvelle petite amie. Si vous appelez getSingle() à l'avenir, seule la petite amie que vous venez de créer sera renvoyée. Quant à une nouvelle petite amie, elle n’existe pas.

Scénarios courants pour les singletons

Lorsque vous avez uniquement besoin de générer un objet unique, tel qu'une boîte de connexion de page, il ne peut y avoir qu'une seule boîte de connexion, vous pouvez alors utiliser l'idée de un singleton pour l'implémenter, bien sûr, vous n'êtes pas obligé de l'implémenter en utilisant l'idée du singleton, le résultat peut être que vous devez régénérer et afficher une boîte de connexion à chaque fois que vous souhaitez afficher la boîte de connexion (consommateur de performances), ou vous pouvez accidentellement afficher deux boîtes de connexion une boîte de connexion.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le téléchargement de fichiers dans nodejs+express

Comment implémenter une plateforme de gestion de blog dans Vue+SpringBoot

Comment résoudre l'erreur maximale de pile d'appels dépassée dans nodejs

Il existe des exemples de composants asynchrones dans Vue

Comment implémenter des références circulaires entre les composants dans Vue.js

Comment implémenter des effets d'animation et des fonctions de rappel

Utiliser jQuery opérations Comment implémenter la fusion de cellules dans le tableau

Comment implémenter le passage des paramètres de route dans vue-router

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!