> Manuales > Taller de Javascript

Behaviour, es una imprescindible libreria que nos permite programar con javascript de manera mas sencilla

Una de las premisas mas importantes planteadas al diseñar mediante el uso de estándares es la separación de capas lógicas, es decir, por un lado tenemos el maquetado, que se representa mediante lenguaje (x)html, por otra parte esta el diseño visual, que normalmente se adjunta mediantes hojas de estilo (css) hasta aquí todo esta muy claro.

Pero que ocurre con el comportamiento que se le quiera asignar a algunos objetos del documento, aquí es donde entra en juego el lenguaje JavaScript.

Imaginemos por ejemplo que tenemos un enlace al que le queremos dar una funcionalidad un poco diferente al resto, abrirlo en una ventana nueva por ejemplo, a la mayoría lo primero que nos viene en mente es hacer algo mas o menos similar a lo siguiente:

<a href="popup.html" onclick="window.open('popup.html', 'width=400,height=450,resizable=yes')">Abrir popup</a>

Lamentablemente esta linea acaba con toda nuestra teoría de separación de capas, por fortuna, existen maneras alternativas para asignar eventos usando JavaScript, en el caso concreto de este ejemplo una manera mas limpia de realizar lo mismo necesitaba algo mas de código para poder llevarse a cabo.

Primero tendremos que asignar una identidad única al enlace, y luego mediante el DOMDocument Object Model asignaremos el evento a dicha id, algo mas o menos tal que así.

<a href="popup.html" id="mypopup">Abrir popup</a>

<script type="text/javascript">

   var x = getElementByID('mypopup');
   
   x.onclick = function() {
   
    window.open('popup.html', 'width=400,height=450,resizable=yes')
   
   }

</script>


Sencillo, ¿no? bueno, quizás no resulte tan sencillo, pero gracias a mentes inquietas como la de Ben Nolan, disponemos de algunas herramientas que si que hacen que resulte una tarea sencilla.

Me refiero a behaviour, una librería JavaScript basada en la función document.getElementsBySelector escrita por Simon Willison. Este fantástico “trozo de código” nos permite olvidarnos de programar complejas funciones que asignen eventos según clase, id o selector.

Continuando con el ejemplo anterior, si incluimos esta librería podemos conseguir el mismo efecto asignando la función directamente al id seleccionado,

<script type="text/javascript">

   var myrules = {
   
      '#mypopup' : function(element){
      
         element.onclick = function(){
         
            window.open('popup.html', 'width=400,height=450,resizable=yes')
         
         }
   
      }

};

Behaviour.register(myrules);

</script>


Personalmente creo que resulta una librería de inmensa utilidad, ahora solo falta ver como poder sacarle partido de manera óptima.

Alex Sancho

Manual