Partage d'exemples de mise en œuvre du modèle Singleton en JavaScript

Modèle de singleton traditionnel

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

Idée centrale de l'implémentation du singleton

Ce n'est rien de plus qu'un variable pour indiquer si un objet a déjà été créé pour une classe donnée, si c'est le cas, retournez directement l'objet créé précédemment lors de l'obtention de l'instance de la classe suivante. Ensuite, nous allons essayer de réaliser cette idée en forçant JavaScript, voici 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 obtenons l'objet unique de la classe Singleton à l'aide de Singleton.getInstance, ce qui est en fait sans problème, mais JavaScript n'a pas de concept de classe, donc essayer de réaliser l'idée de singleton traditionnel est sans signification, ce code est laid et long (en fait, je ne suis pas à l'aise avec ça). Voici comment nous allons réaliser un singleton en utilisant les closures JavaScript, voici le code :

var CreateDiv = (function() { 　　　　　　var instance;
　　　　　　var CreateDiv = function(html) { 　　　　　　　　　　if (instance) {
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
CreateDiv.prototype.init = function() {
var div = document.createElement('div');
div.innerHTML = this.html; 
document.body.appendChild( div );
　　　　　　};
　　　　　　return CreateDiv; })();
var a = new CreateDiv( 'sven');1'); var b = new CreateDiv( 'sven');2');
alert ( a === b ); // true

On peut voir que nous avons effectivement utilisé une closure pour réaliser un singleton, mais ce code est toujours fortement couplé. En fait, le constructeur de CreateDiv est responsable de deux choses. La première est de créer l'objet et d'exécuter la méthode d'initialisation init, et la deuxième est de garantir qu'il n'y ait qu'un seul objet. Ce code est flou en termes de responsabilité. Maintenant, nous devons séparer ces deux tâches, le constructeur étant responsable de la construction de l'objet, et la décision de renvoyer l'objet existant ou de construire un nouveau objet et de le renvoyer est laissé à une autre fonction pour être réalisée, ce qui est en fait pour satisfaire une idée de programmation : le principe de responsabilité unique. Ce code peut mieux dé耦é, voir le code suivant :

var CreateDiv = function (html) {
    this.html = html;
    this.init();
  };
  CreateDiv.prototype.init = function () {
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
  };
  var ProxySingletonCreateDiv = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new CreateDiv(html);
      };
      return instance;
    };
  })();
  var a = new ProxySingletonCreateDiv('sven');1');
  var b = new ProxySingletonCreateDiv('sven');2');
  alert(a === b); //true

On peut voir que notre constructeur CreateDiv actuel ne s'occupe que de construire des objets, et que la décision de renvoyer l'objet existant ou de construire un nouveau objet et de le renvoyer est laissé à la classe proxySingletonCreateDiv pour traiter, ainsi le code semble plus confortable (zhuang) (bi) !

Finally, let's paste a highly abstract singleton pattern code, the essence of lazy singleton!

//Singleton pattern abstraction, separates the function to create an object and the judgment of whether the object has been created
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    };
  };

The parameter fn is our constructor, as long as we pass any constructor we need, we can generate a new lazy singleton. For example, passing a constructor to create a girlfriend and calling getSingle() can generate a new girlfriend. If getSingle() is called again later, it will only return the girlfriend created just now. As for a new girlfriend - it does not exist.

Common Use Cases of Singleton

You only need to generate a unique object when, for example, a login box on the page, there can only be one login box, then you can use the singleton idea to implement it. Of course, you can also implement it without the singleton idea, and the result may be that you need to generate and display a new login box every time you want to display the login box (costing performance), or by accident, two login boxes are displayed.

That's all the learning experience we share with you about the implementation of singleton mode in JS. Thank you for your support of the Yelling Tutorial.

Declaration: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @ to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)