Compartir ejemplos de implementación del patrón Singleton en JavaScript

Patrón de singleton tradicional

Asegurar que una clase tenga solo una instancia y proporcionar un punto de acceso global para acceder a ella.

La idea central de la implementación del singleton

No es más que usar una variable para marcar si se ha creado un objeto para una clase en particular. Si es así, al obtener la instancia de la clase la próxima vez, devolveremos directamente el objeto creado anteriormente. A continuación, implementamos esta idea forzadamente en JavaScript, consulte el código:

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

Nosotros obtenemos el objeto único de la clase Singleton a través de Singleton.getInstance, lo que es absolutamente correcto, pero JavaScript no tiene el concepto de clase, por lo que la implementación forzada del pensamiento de singleton tradicional no tiene ningún sentido. Este código es desagradable y largo (de hecho, no me siento cómodo viéndolo así, jeje). A continuación, utilizamos el closure de JavaScript para implementar un singleton, consulte el código:

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

Se puede ver, así es como realmente implementamos un singleton usando closures, pero este código sigue siendo altamente acoplado. La función constructora de CreateDiv realmente se encarga de dos tareas. La primera es crear el objeto y ejecutar el método de inicialización init, y la segunda es garantizar que solo haya un objeto. Este código es impreciso en términos de responsabilidades, por lo que ahora queremos separar estas dos tareas. La función constructora se encargará de construir el objeto, y la decisión de devolver un objeto existente o construir uno nuevo y devolverlo se dejará a otra función para completar. En realidad, esto también cumple con una idea de programación: el principio de responsabilidad única. Este código puede desacoplarse mejor, veamos el siguiente código:

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

Se puede ver, ahora nuestra función constructora CreateDiv solo se encarga de construir objetos, y si debe devolver un objeto existente o construir uno nuevo y devolverlo, esa tarea se la dejamos a la clase proxySingletonCreateDiv para manejar, ¿no es así que el código se ve más cómodo?

Finalmente, adjunto un código de patrón Singleton altamente abstracto, ¡la esencia del singleton perezoso!

//Abstracción de patrón Singleton, separación de la función de creación de objetos y la función de juicio de si el objeto ya se ha creado
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    };
  };

El parámetro fn es nuestra función constructora, podemos generar un nuevo singleton perezoso simplemente pasando cualquier función constructora necesaria. Por ejemplo, al pasar una función constructora para crear una novia y llamar a getSingle(), se puede generar una nueva novia. Si luego llamamos a getSingle() nuevamente, también solo devolverá la novia creada anteriormente. Respecto a la nueva novia, ¡no existe!

Escenarios comunes de Singleton

Solo se necesita generar un objeto único, por ejemplo, el cuadro de inicio de sesión de la página, solo puede haber una caja de inicio de sesión, entonces puedes implementarlo con la idea de Singleton, por supuesto, puedes hacerlo sin la idea de Singleton, el resultado puede ser que cada vez que desees mostrar la caja de inicio de sesión, debes generar una nueva caja de inicio de sesión y mostrarla (consumo de recursos), o accidentalmente mostrar dos cajas de inicio de sesión.

Aquí están las experiencias de aprendizaje que compartimos sobre la implementación del patrón Singleton en JS, agradecemos el apoyo a la tutorial de gritos.

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, se ha subido por los usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)