Explication détaillée des étapes pour implémenter le mode singleton dans JS

Cette fois, je vais vous donner une explication détaillée des étapes pour implémenter le mode cas unique dans JS Quelles sont les précautions pour implémenter le mode singleton dans JS. est un cas pratique. Jetons un coup d'œil une fois.

Modèle singleton traditionnel

Assurez-vous qu’il n’existe qu’une seule instance d’une classe et fournissez-y un point d’accès global.

Mettre en œuvre l'idée de base de singleton

Il ne s'agit 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, la prochaine fois que l'instance de la classe sera obtenue, l'objet précédemment créé sera directement renvoyé. Ensuite, nous utilisons JavaScript pour Pour mettre en œuvre avec force 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 un tel code singleton traditionnel. C'est malodorant et long (en fait, je me sens mal à l'aise en le regardant). Ci-dessous, nous

utilisons la fermeture de JavaScript pour implémenter un singleton, veuillez consulter 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 fortement couplé. 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. Ce type de code peut être mieux découplé, veuillez consulter 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 un objet existant ou construire un nouvel objet et le renvoyer, nous laissons cette question à la classe proxy proxySingletonCreatep. regarde. (zhuang) obéis (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 le 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 singleton pour l'implémenter. Bien sûr, vous n'êtes pas obligé d'utiliser l'idée singleton pour. implémentez-le. Cela apportera Le résultat peut être que vous devrez 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment opérer la conversion de casse de la première lettre lorsque Jackson analyse une chaîne json

localstorage et stockage de sessions Comment utiliser

dans Vue

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!