Patrones de diseño en Javascript, Singleton y Factory

¿Qué es un patrón de diseño?

Cada patrón describe un problema que ocurre una y otra vez en nuestro entorno, y luego describe el núcleo de la solución a ese problema, de tal manera que puedes utilizar esta solución millones de veces, sin nunca hacerlo de la misma forma dos veces.

  • Arquitecto Christopher Alexander

La definición del patrón de diseño no viene del desarrollo de software, sino de la arquitectura del habitat humano.

Tanto la arquitectura del hábitat humano como el desarrollo de software tienen muchas similitudes, esto es porque como seres humanos, somos parte del mundo y de la naturaleza, el paradigma orientado a objetos busca siempre representar el mundo real, el desarrollo de software mismo siempre se usa en busca de solucionar problemas reales de nuestro entorno.

Luego de meditar un poco, podemos comprender que un patrón de diseño permite ofrecer una solución a problemas comunes en el diseño de software, describe la solución a problemas que se repiten muchas veces y que son muy similares entre ellos, en concreto, esta similitud permite diseñar una solución para un conjunto de problemas parecidos.

Lo patrones de diseño actuales fueron popularizados por el libro Design patterns: elements of reusable object-oriented softwarede los autores conocidos como GoF(Gang of Four):

  • Erich Gamma
  • Richard Helm
  • Ralph Johnson
  • John Vlissides

En este libro se describen 23 patrones de diseño que desde 1995 hasta nuestros días siguen en uso con un gran impacto en el desarrollo de software.

Este articulo sera el primero de una serie, que nos permitirá entender como se pueden implementar muchos de estos patrones de diseño en el lenguaje de programación Javascript y no solo los descritos por GoF, también se explicara otros patrones de diseño útiles en Javascript.

El primer patrón de diseño sera el Patron Singleton.

Patrón Singleton

Este patrón nos permite tener una solo instancia de un tipo de objeto, porque no es necesario crear instancias y/o porque no queremos crear nuevas instancias cuando una solo instancia puede encargarse del trabajo en varios puntos de nuestra aplicación. Al solo tener un instancia mejoramos el rendimiento disminuyendo el uso de memoria.

En Javascript es muy fácil utilizar este patrón, tan fácil como crear un objeto literal, por ejemplo supongamos que tenemos una configuración para el numero de caracteres y palabras que se muestran en un sitio web optimizado para buscadores:

let configSEO = {
    nombre: 'Pensemosweb',
    seo: {
      descripcion: {
        limiteCaracteres: 155,
        limitePalabras: 23
      },
      titulo: {
        limiteCaracteres: 70,
        limitePalabras: 9
      }
    }
};

Un simple objeto de configuración es un singleton, pues en toda la app se va hacer referencia al objeto configSEOy nunca se va a crear un nuevo objeto de configuración. Se puede extender esa configuración añadiendo mas propiedades.

Supongamos que necesitamos utilizar un singleton mas complejo, donde existan funciones de configuración y métodos, además de una interfaz para obtener la instancia, tomando el mismo ejemplo de configSEOahora vamos a utilizar funciones anidadas y closure(o cierres), esto ultimo permite a una función tener acceso a las funciones y variables definidas en el ámbito en que esta función también es definida.

La función anónima principal se invoca inmediatamente con la notacion (function() {}())y recibe un parámetro el, el cual guarda la referencia al elemento del DOM con id resultado. Este parámetro se lo pasamos a la función inmediata a través de la variable global elem.

Debido a que definimos instanciadentro de la función principal, las funciones anidadas definidas mas adelante tienen acceso a esa variable instancia que guardara nuestro singleton cuando invoquemos la función configSEO(). metodoPublico()y privada()tiene acceso a las variables instanciay el.

Si nos fijamos en la linea 48, elem.append(conf1 === conf2), del ejemplo, comparamos igualdad de referencia, conf1y conf2son el mismo objeto, como singleton, solo trabajamos con una instancia.

También podemos hacer uso de otro patrón de diseño llamado factory, el cual veremos mas a detalle en otro post, por el momento solo ten en cuenta que tendremos una función que fabricara singletons.

Podemos notar que con una sola función, podemos acceder a los singletons creados anteriormente y podemos agregar más si queremos. Este tipo de patrón factory de singletonses muy utilizado en frameworks como AngularJS. Aquí abajo un ejemplo del singleton configSEO y el factory usando AngularJS.

1 Comment

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.