Uncategorized

Custom ports/events/callbacks II for modules dependencies injection

Cada vez hay más frameworks que nos hacen tener un ancla extremadamente fuerte de nuestra lógica con él, esta lógica de negocio se ve altamente contaminada por implementaciones de librerías que son difíciles y farragosas de actualizar. Ahora que estoy muy focalizado en la arquitectura modular reactiva he intentado que estos acaben teniendo una implementación propia, esto sería mucho más sencillo, casi nativo, si no tuviese que dar soporte a IE>=8.

Os presento un muy muy muy simple ejemplo de módulo que usa la implementación de la librería externa con una lógica de negocio propia ( en este caso la funcionalidad es simplemente detectar la carga del document o del window usando jquery), inyectándole otro módulo que tiene la implementación propia de la librería en cuestión.

Inicializamos el objeto ui y su objeto jquery, observar que dentro de este objeto del namespace podemos apilar nuestras implementaciones en este caso, de jquery, notar que con un buen trabajo de closure compiler y una buena arquitectura modular podemos inyectar de fuera a dentro las implementaciones necesarias para cada módulo y sus dependencias.

var ui = {};
ui.jquery = {};
ui.dojo = {};

tendríamos por tanto los siguientes módulos:

El modulo onLoadPage que tiene las implementaciones de inyección del callback (ifDocumentIsReady) y escucha del “custom port event” (onDocumentIsReady) que vimos en el ejemplo anterior:

ui.jquery.onLoadPage = ( function () {
  'use strict';
  var exports = {};
  var onDocumentIsReady = function() {
  	$( document ).ready( function () {
  		exports.ifDocumentIsReady();
  	} );
  };
  var onWindowIsLoad = function() {
  	$( window ).load( function () {
  		exports.ifWindowIsLoad();
  	} );
  };
  exports = {
    ifDocumentIsReady : function() {},
    ifWindowIsLoad:function() {},
    onDocumentIsReady: onDocumentIsReady,
    onWindowIsLoad: onWindowIsLoad
  };
  return exports;
} )();

También está el modulo que contiene las implementaciones para dojo de igual forma:

ui.dojo.onLoadPage = ( function () {
  'use strict';
  var exports = {};
  var onWindowIsLoad = function() {
  	window.onload = function () {
  		exports.ifWindowIsLoad();
  	};
  };	
  var onDocumentIsReady = function() {
  	dojo.addOnLoad(
 			function(){						
    		exports.ifDocumentIsReady();
  	} );  	
  };	
  exports = {
    ifDocumentIsReady : function() {},
    ifWindowIsLoad:function() {},
    onDocumentIsReady: onDocumentIsReady,
    onWindowIsLoad: onWindowIsLoad
  };
  return exports;
} )();

Y tendríamos el módulo donde inyectaríamos como dependencia esta implementación, que setearíamos en ya, nuestra propia lógica que no estaríamos obligados a modificar si la implementación lo hiciese, como veis al inicializar el módulo con el operador new, se inicializa, es decir, setea la implementación como suya y añade el callback que el modulo precisa y se pone a escuchar el “evento”:

ui.moduleExample = function(externalDependencie) {
	'use strict';
  var onLoadPage; 
  var injectExternalDependencies = function(){
    onLoadPage = externalDependencie; 
  };
  var sayIfDocumentIsReady = function() {		
    onLoadPage.ifDocumentIsReady = function () {
      console.log('DOCUMENT IS READY WITH LOGIC CLOSED');
    };
    onLoadPage.onDocumentIsReady();
  };
	var sayIfWindowIsLoad = function() {
    onLoadPage.ifWindowIsLoad = function () {
      console.log('WINDOW IS LOAD WITH LOGIC CLOSED');
    };   
    onLoadPage.onWindowIsLoad();
  };
  var initialize = function(){  
    injectExternalDependencies();
		sayIfWindowIsLoad();
    sayIfDocumentIsReady();		
  }; 
  initialize();
};

Una vez inicializadas las variables y definidos los módulos, usaríamos la implementación que quisiéramos en nuestro módulo🙂

var loadPage = ui.jquery.onLoadPage;
//var loadPage = ui.dojo.onLoadPage;
var module = new ui.moduleExample(loadPage);

Como veis las implementaciones pueden ser más o menos complejas dependiendo de las librerías, intentaré seguir poniendo algunos ejemplos más, de momento podéis echar un vistazo a este ejemplo en jsbin como siempre

http://jsbin.com/voqisa/3
http://jsbin.com/voqisa/3/edit?js,output

Estándar

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s