¿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. Por lo tanto el desarrollo de software busca siempre representar el mundo real,  de hecho la programación de cualquier aplicación siempre se usa para solucionar problemas reales de nuestro entorno.

Entonces 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.

Los 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. Esto no quiere decir que estos patrones no fueron utilizados mucho antes de la publicación del libro.

Este artículo será 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 es 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 varias instancias nuevas cuando una solo instancia puede encargarse del mismo trabajo en toda la aplicación. Al solo tener una instancia, centralizamos la información, funcionalidad y 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 número 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 a hacer referencia al objeto configSEO y nunca se va a crear más nuevos objetos porque se puede extender esa configuración añadiendo más propiedades.

Ahora supongamos que necesitamos utilizar objeto donde existan funciones de configuración y métodos, además de una interfaz para obtener la instancia, tomando el mismo ejemplo de configSEO ahora 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 instancia dentro de la función principal, las funciones anidadas definidas más adelante tienen acceso a esa variable instancia que guardara nuestro singleton cuando invoquemos la función configSEO().

Además metodoPublico()y privada() tienen acceso a las variables instancia y el.

Si nos fijamos en la línea 48, elem.append(conf1 === conf2), 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 más 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 singletons es muy utilizado en frameworks como AngularJS. Aquí abajo un ejemplo del singleton configSEO y el factor y usando AngularJS.