Patrón Singleton con JavaScript

Seguimos con esta idea de presentar diferentes patrones de diseño desde la mirada de JavaScript. En esta oportunidad les traigo el patrón singleton.

En muchos lenguajes de programación este patrón ya viene encapsulado en la propia sintaxis. Usar, por ejemplo, un tipo static en C# es básicamente lo mismo que un singleton, pero sin tener que escribir el código del patrón y al mismo tiempo con ventajas sobre el manejo de hilos y procesos.

En otros lenguajes, como en el caso de JavaScript, aún tenemos que hacerlo al viejo estilo (O por lo menos eso queremos para que este post tenga sentido).

Este patrón nos permite, para resumirlo de forma rápida, obtener una misma instancia de determinado objeto. Una ventaja de esto sería si necesitamos que un proceso particular no pueda ser manejado desde diferentes objetos por más que sean una copia del mismo código.

Un ejemplo simple de imaginar (Aunque no relacionado de forma directa a JavaScript) sería el de tener un formulario para una aplicación de escritorio, el cuál se abre al presionar un botón. Si para abrir este formulario necesitáramos crear un nuevo objeto del mismo, tendríamos copias de este formulario tras cada creación. Con un singleton, por el contrario, podríamos llamar al mismo formulario una y otra vez asegurándonos que siempre será el único y originalmente creado el que se muestre al usuario.

Pero vamos con el código para JavaScript:

(function (w) {
 var _instance = null;
 
 var singleton = function () {
  this.URL = "";
 };
 
 singleton.prototype.conectar = function () {
  console.log("Conectando a ", this.URL);
 };
 
 w.conector = {
  getInstance: function () {
   if (_instance === null) {
    _instance = new singleton();
   }
 
   return _instance;
  }
 };
}(window));

Analicemos un poco el código. Lo que usamos para generar todo el objeto es una función auto ejecutada (Tiene otros nombres, pero puede que ese nombre ayude a entender cómo funciona). Esta función se ejecuta automáticamente y debido a la forma en cómo JavaScript maneja las variables y su alcance (Closure) podremos mantener la variable _instance a la espera de una instancia de un nuevo objeto.

Luego crearemos en la variable singleton lo que sería una representación de nuestro objeto (Como si fuese una clase en otros lenguajes). Esta posee una variable URL y una función conectar.

Por último, inyectaremos al objeto window (Padre del árbol de objetos en el navegador) un objeto llamado conector y que tendrá una función getInstance. Es esta función la que nos permite crear y manejar el singleton. En ella, cada vez que alguien pide una instancia de nuestro singleton verificamos si la variable _instance tiene ya una referencia al objeto en cuestión. Si no la tuviere, creamos un nuevo objeto y retornamos ese valor, pero si por el contrario ya hubiera sido instanciado por otra llamada, entonces retornaremos el mismo objeto ya creado, haciendo que el consumidor de nuestro objeto siempre obtenga la misma referencia al objeto singleton.

Patrón State con JavaScript

Siguiendo con esta idea de los patrones de diseño con JavaScript, y a pedido de (Otra vez) algunos amigos, vamos con el patrón State.

Este patrón es bastante simple pero puede ser implementado de diferentes formas, dependiendo del lenguaje de programación que usemos. En JavaScript, desde lo personal, me gusta jugar un poco con las funciones y algunas referencias a las mismas.

Este patrón, en resumen, permite modificar el comportamiento de un objeto en base a cosas que pudiesen pasar dentro del mismo. De cara al consumidor del objeto, esto se aprecia solo por medio de los resultados del objeto. Otro motivo por el cual utilizar este patrón es el de ahorrarnos en complicados switchs e ifs para realizar determinadas acciones.

Supongamos lo siguiente:

contador += 1
if (contador < 10)
  EjecutarX()
else
  EjecutarY()

En el caso anterior, el código se repetiría indefinidamente, sumando la variable contador y evaluando el if constantemente. Internamente, una función o la otra se ejecutarían en base al estado interno de la variable. El problema de esto es que (Y si bien así como lo vemos no es un problema realmente) si tenemos muchos estados (ifs o switchs) puede ser difícil de mantener y depurar por lo que el patrón en cuestión sería una mejor aproximación.

var State = (function () {

   var state = function () {
      ...
       this._counter = 1;
    };
 
    state.prototype.run = function () {
       var self = this;
      ...
    };
 
    return state;
}());

Lo primero es crear un objeto. En este dejamos la variable _counter y una función run. Además agregaremos dos funciones que representarán el estado del objeto en diferentes momentos de la ejecución.

 state.prototype.state1 = function () {
   console.log("Estado 1");
    this._counter++;
    if (this._counter > 10) {
       this._innerPointer = this.state2;
    }
 };
 
 state.prototype.state2 = function () {
    console.log("Estado 2");
 };

También una función vacía, que si notamos en la función state1 notaremos que se utiliza para asignar la función state2 cuando el contador es superior a 10.

 state.prototype._innerPointer = function () {
 };

El último cambio será en la función run donde iniciaremos un intervalo de 1 segundo ininterrumpido y que llamará a la función _innerPointer. Esta función fue asignada con el estado 1 al inicio del objeto. De esta forma, cada vez que se llame a _innerPointer en realidad se estará llamando a state1. Luego de ser llamada 10 veces, state1 cambiará la referencia de _innerPointer a state2 y esta función se ejecutará indefinidamente.

var State = (function () {

   var state = function () {
       this._innerPointer = this.state1;
       this._counter = 1;
    };
 
    state.prototype.run = function () {
       var self = this;
       setInterval(function () {
          self._innerPointer.call(self);
       }, 1000);
    };
 
    state.prototype._innerPointer = function () {
    };
 
    state.prototype.state1 = function () {
       console.log("Estado 1");
       this._counter++;
       if (this._counter > 10) {
          this._innerPointer = this.state2;
       }
    };
 
    state.prototype.state2 = function () {
       console.log("Estado 2");
    };
 
    return state;
}());