Condivisione di esempi di implementazione del pattern singleton in JavaScript

传统单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点。

实现单例核心思想

无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象，接下来我们用JavaScript来强行实现这个思路，请看代码：

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

我们通过Singleton.getInstance来获取Singleton类的唯一对象，这样确实是没问题的，但是js本身是没有类这种概念的，所以我们强行用传统单例思想来实现是没有任何意义的，这样的代码又臭又长（其实是我自己看着不舒服嘻嘻嘻）。下面我们使用JavaScript的闭包来实现一个单例，请看代码：

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( 'sven1' ); var b = new CreateDiv( 'sven2' );
alert ( a === b ); // true

Si può vedere che in questo modo abbiamo effettivamente realizzato un singleton utilizzando il closure, ma questo codice è ancora altamente coupling. Il costruttore di CreateDiv è in realtà responsabile di due cose. La prima è creare l'oggetto e eseguire il metodo di inizializzazione init, la seconda è garantire che ci sia solo un oggetto. Questo codice non ha chiari i compiti, ora dobbiamo separare queste due attività, il costruttore è responsabile della costruzione dell'oggetto, e per determinare se restituire l'oggetto esistente o costruire un nuovo oggetto e restituirlo, lo lasciamo a un'altra funzione per completare, in realtà è anche per soddisfare un'idea di programmazione: il principio di responsabilità unica. Questo codice può meglio decoupling, vedere il codice di seguito:

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('sven1');
  var b = new ProxySingletonCreateDiv('sven2');
  alert(a === b); //true

Si può vedere che al momento la nostra funzione costruttiva CreateDiv è responsabile solo della costruzione degli oggetti, e se restituire l'oggetto esistente o costruire un nuovo oggetto e restituirlo, questa cosa la lasciamo al proxySingletonCreateDiv per gestire, così il codice sembra più accettabile!

Ecco un codice di modello singleton altamente astratto, l'essenza del lazy singleton!

//Abstractione del modello singleton, separazione della funzione di creazione dell'oggetto e della verifica dell'oggetto già creato
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    };
  };

Il parametro fn è il nostro costruttore, possiamo generare un nuovo singleton lazy con qualsiasi costruttore ourselves necessitiamo. Ad esempio, possiamo passare un costruttore per creare una ragazza e chiamare getSingle(), possiamo generare una nuova ragazza. Se chiamiamo getSingle() di nuovo, tornerà solo quella ragazza creata prima. Per quanto riguarda la nuova ragazza - non esiste.

Scenari comuni di singleton

Basta generare un oggetto unico, ad esempio, il riquadro di login della pagina, è possibile avere solo un riquadro di login, allora puoi implementarlo con l'idea di singleton, naturalmente, puoi anche implementarlo senza l'idea di singleton, il risultato potrebbe essere che ogni volta che devi visualizzare il riquadro di login, devi generare un nuovo riquadro di login e visualizzarlo (consumo di risorse), o magari visualizzare due riquadri di login.

Ecco le nostre impressioni di apprendimento relative all'implementazione del modello singleton di JS che abbiamo condiviso con voi, grazie per il supporto alla guida a urlo.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.