Archivo de la etiqueta: tutoriales

javascript, tutoriales

Custom ports/events/callbacks for modules in javascript

Gran parte de nuestro trabajo con javascript consiste en hacer las cosas de una forma más limpia y regularizada. A veces, yo añadiría que debemos hacer todo esto con, además, un componente semántico adecuado y mucho amor :).

Últimamente ando poniendo mucha atención al control de puertos de entrada/salida de mis módulos, y de mantener mi lógica de negocio bien aislada de desconocidos.

Utilizando esta aproximación de puertos de entrada, construyo mediante una simulación semántica la ejecución de eventos custom a los que se pueden inyectar callbacks, no son eventos propiamente, pero su funcionamiento es el mismo.

veamos el html

<div id="seya"><img src="http://kyubimugen.ucoz.com/imagenes/saintseiya/seiya.gif" /></div>
<button id="meteorsON">Press if atenea need help</button>
<button id="meteorsOFF">Press if atenea needn't help</button>

veamos el código del módulo:

// seya module closure
var seya = ( function () {	
  var exports; 
  var initialize = function () {
    document.getElementById('seya').style.display = 'none';
  };
  var ateneaNeedHelp = function () {
    exports.onPegasoMeteors();
  };  
  exports =  {    
    ateneaNoNeedHelp: initialize,
    ateneaNeedHelp: ateneaNeedHelp,
    onPegasoMeteors: function(){}
  };	 
  initialize();
  return exports;
})();

Notar que el return del objeto en esta ocasión es un objeto export, que tiene el método onPegasusMeteors que contiene una función vacía. Este metodo, nuestro evento, lo disparamos cuando atenea necesita ayuda 🙂 con el método ateneaNeedhelp.

// define callback to onPegasoMeteors
seya.onPegasoMeteors = function(){
  document.getElementById('seya').style.display = 'block';
};

Con esto, ya tenemos el objeto seya y podemos inyectarle el callback que nosotros queramos por el «puerto»,»evento» onPegasoMeteors.

Lo siguiente es bindear comportamientos de puertos de salida de seya a los botones adecuados para conseguir lanzar nuestros nuevos eventos/callbacks inyectados.

// bind button on click
document.getElementById('meteorsON').addEventListener( 'click', seya.ateneaNeedHelp, false);
// bind button on click
document.getElementById('meteorsOFF').addEventListener( 'click', seya.ateneaNoNeedHelp, false);

Podéis ver mas detalles del código funcionando en el enlace:

http://jsbin.com/vunefa/12
http://jsbin.com/vunefa/12/edit?js,output

Estándar