JavaScript Design Patterns (I) : AbstractFactoryJavaScript Design Patterns (I) : AbstractFactory

21 de enero de 2012

Vamos a hacer un pequeño compendio de ejemplos en JavaScript, recogiendo los patrones de diseño más populares o que nos parezcan más útiles. Iremos colgando el código de los ejemplos en un repositorio en Gitorious/jspatterns.

En la medida de lo posible todo serán ejemplos reales y funcionales, aplicados en alguno de nuestros desarrollos, así que no verás por aquí Pizzas, Tomates, Coches, o Garajes (a no ser que así esté en el proyecto). Además los ejemplos tendrá algo más de chicha en cuanto al código.  Se incluirán algunas bibliotecas que utilizamos en nuestros proyectos, como simple-inheritance o zepto. El código está comentado siguiendo las reglas de JSDoc.

AbstractFactory

El primero de los ejemplos es un Abstract Factory, o Factoría Abstracta. El código fuente está disponible en el repositorio de Gitorious.

https://gitorious.org/jspatterns/jspatterns/trees/master/AbstractFactory

En este caso creamos una factoría para la capa de acceso a datos de una aplicación móvil, una guía de aves. Dependiendo del estado de la conexión y la caché podemos obtener los datos de un servicio Web SOAP o de una base de datos local mediante SQL. Independientemente de la selección del origen, la aplicación debe trabajar con el mismo objeto. Para esto creamos una clase abstracta, que define los métodos y funciones comunes a todas las factorías de acceso a datos, y creamos dos factorías concretas para cada una de las fuentes de datos que implementan esos métodos.

En este caso toda las factorías hijas implementan el método getBirds, que nos devolverá todos los elementos de clase “Bird” que estén almacenados en la fuente de datos. Incluso podríamos haber enriquecido la clase con alguna funcionalidad común a toda las Factorías hijas, pero por simplificar el ejemplo lo he omitido.

Las clases que tenemos en juego son las siguientes:

  • DataSourceFactory: La clase abstracta donde se define el interfaz.
  • LocalSQLDataSourceFactory: Clase hija que define el método getBirds con acceso a una base de datos SQL local de HTML5.
  • SOAPDataSourceFactory: Clase hija que define el método getBirds con acceso a un servicio web SOAP.

Vamos a analizar cada una de ellas:

DataSourceFactory

Ésta es la clase abstracta. Dado que sólo define un método, getBirds, y una variable privada _config para almacenar los parámetros de configuración de cada una de las clases hijas. Como veréis para definir la clase hemos usado el patrón Module (que veremos en otro artículo) y la implementación de simple-inheritance de John Resig.

LocalSQLDataSourceFactory

Clase hija que define los métodos para acceder a una base de datos local SQL de HTML5. Contiene varios variables privadas que almacenan información de acceso a la base de datos. En el constructor lo primero que se hace es crear la base de datos  si no existía previamente. Esto implica que la clase debe ser instanciada sólo cuando se deba usar, para evitar crear la base de datos de manera innecesaria.

El método privado _loadData es el encargado de realizar la carga de datos propiamente dicha.

El método público getBirds realiza la llamada a _loadData, y define una función para procesar el resultado antes de devolverlo. No he incluido código en está función para simplificar el ejemplo.

SOAPDataSourceFactory

Clase hija que define los métodos para acceder a un servicio Web SOAP. Al igual que la clase anterior contiene una variable privada de configuración.

El método privado _loadData se encarga de realizar la petición al servicio Web, y se define una función para procesar el resultado antes de devolverlo.

La principal diferencia de éste método con el anterior es su sincronicidad. El primero es síncrono, y el segundo asíncrono. Para evitar que esto suponga un problema a la hora de trabajar con la factoría abstracta, ambos métodos getBirds reciben un parámetro sucessHandler, al que se envía el resultado una vez recibido. Así el método síncrono se transforma en asíncrono.

Podéis ver el ejemplo aplicado que está disponible en el repositorio (https://gitorious.org/jspatterns/jspatterns/trees/master/AbstractFactory)

Una Respuesta to “JavaScript Design Patterns (I) : AbstractFactoryJavaScript Design Patterns (I) : AbstractFactory

  1. jcesar Dice:

    Muy interesante, gracias por compartir vuestros ejemplos.

  • qrcode link