Javascript no intrusivo

06/9/07 - 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.

Autoría, licencia y acciones sobre este artículo

Informe de Alex Sancho* URL: http://alexsancho.name/ Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

  Ir arriba