Introducción

Retomamos de nuevo el tema de los patrones de diseño para, en esta ocasión, echar una mirada rápida a cuáles son algunos de los utilizados por la más popular de las bibliotecas Javascirpt a día de hoy: jQuery.

Como he dicho en varias ocasiones, jQuery no es un framework aunque puede ser utilizado como tal. Esto implica que mientras desarrollamos con sus métodos y funciones, podemos implementar diferentes patrones para hacer nuestros códigos más estructurados y mantenibles. Sin embargo, resulta muy interesante comprobar como la propia biblioteca utiliza internamete un amplio número de estos patrones para proporcionar muchas de sus funcionalidades. Revisarlos puede ser una buena forma de acercarnos más a estas estructuras y entender la flexibilidad que ofrecen dentro de la programación moderna.

Pasemos a ver una selección de ellos:

NOTA: Ejemplos facilitados por BGerrissen.

Lazy Initialization

En programación, la inicialización perezosa es la táctica de retrasar la creación de un objeto, el cálculo de un valor o cualquier otro proceso costoso hasta que no resulta estrictamente necesario.

$(document).ready(function(){
    $('div.app').myPlugin();
});

Adapter

El patrón adaptador traduce una determinada clase o interfaz en un modelo compatible para todo escenario.

$('div').css({
    opacity: .1 // opacity in modern browsers, filter in IE.
});

Facade / Template

El patrón facade, uno de los más extendidos, consiste en una clase u objeto simple que encierra -escondiendo- todo un subsistema complejo.

// higher level interfaces (facades) for $.ajax();
$.getJSON();
$.get();
$.getScript();
$.post();

Observer

El patrón observador consiste en un objeto, llamado ‘sujeto’, que mantiene una lista de dependencias, ‘observadores’, las cuales le notifican automáticamente de cualquier cambio.

// jQuery utilizes it's own event system implementation on top of DOM events.
$('div').click(function(){})
$('div').trigger('click', function(){})

Iterator

El patrón iterador se encarga de recorrer un conjunto de elementos para interactuar de forma individual con cada uno de ellos.

$.each(function(){});
$('div').each(function(){});

Strategy

Este patrón permite la definición de una familia de algoritmos que se aplican en cascada (o según criterios especifícos) en tiempo de ejecución.

$('div').toggle(function(){}, function(){});

Proxy

El patrón proxy se compone de un objeto de sustitución que representa al verdadero preservándolo de todo cambio real.

$.proxy(function(){}, obj);

Builder

El constructor es un patrón básico para la lograr la abstracción de los pasos necesarios para la creación de un objeto.

$('<div class="hello">world</div>');

Prototype

El patrón prototípico se corresponde con una representación abstracta de un objeto que puede utilizarse para producir copias idénticas del original y derivarlas en objetos nuevos.

// this feels like cheating...
$.fn.plugin = function(){}
$('div').plugin();

Flyweight

Con este patrón, se busca minimizar el uso de memoria mediante la distribución de datos entre tantos objetos similares como sea posible.

// CONFIG is shared
$.fn.plugin = function( CONFIG ){
     CONFIG = $.extend({
         content: 'Hello world!'
     }, CONFIG);
     this.html( CONFIG.content );
}

Conclusión

Estos son algunos de los patrones de diseño que jQuery utiliza internamente y de los que podemos aprovecharnos para crear nuestras aplicaciones.

Para saber más sobre este interesante tema, recomiendo la lectura del gran trabajo de Osmani, Essential JavaScript & jQuery Design Patterns en descarga directa desde OpenLibra.