Comment implémenter un modèle singleton en JavaScript-js tutoriel-php.cn

Comment implémenter un modèle singleton en JavaScript

亚连

Libérer： 2018-06-19 11:36:23

original

2276 Les gens l'ont consulté

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;　　　　　　 }
})();

Copier après la connexion

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( &#39;p&#39; );
p.innerHTML = this.html; 
document.body.appendChild( p );
　　　　　　};
　　　　　　return Createp; })();
var a = new Createp( &#39;sven1&#39; ); var b = new Createp( &#39;sven2&#39; );
alert ( a === b ); // true

Copier après la connexion

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(&#39;p&#39;);
    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(&#39;sven1&#39;);
  var b = new ProxySingletonCreatep(&#39;sven2&#39;);
  alert(a === b); //true

Copier après la connexion

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) );
    }
  };

Copier après la connexion

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.