Javascript no obtrusivo

Unobtrusivo. Un “palabro” muy de moda ¿Qué quiere decir?

Recuerdo mi primera página dinámica. Básicamente consistía en un fichero .php en el que se podía ver varias partes de código PHP, código HTML formado por tags que contenian atributos tipo width, align, font… (que tiempos aquellos!), y media ración de funciones JavaScript. En fin, un caos llamado “spaguetti code”.

Mas adelante leí acerca de una tal arquitectura MVC (Model View Controller), con aquello se conseguía quitar las funcionalidades definidas en los bloques PHP y definirlas como métodos de objetos. Luego aparecieron las hojas de estilo CSS y con ellas se fueron los atributos width, align, font… Y ahora llega el unobstrusive JavaScript :).

Lo que se prendete con esta técnica es “separar” la funcionalidad javaScript del código HTML, al igual que separamos el diseño con CSS. Alguna vez hemos tenido el típico formulario que necesitabamos validar con JavaScript, imaginemos que lo enviábamos con un boton (no del tipo submit, sino usando onclick) para ello declarabamos:

<input type="buttom" id="bt_send" onsubmit="javascript:validate();"/>

Ahora lo que deberíamos hacer es añadir ese comportamiento tachado en el fichero JavaScript que utilice nuestra página. La tarea no es sencilla pero disponemos de librerias que nos facilitaran el trabajo. Personalmente utilizo JQuery, aunque hay otras donde elegir, cuestión de gustos. Con JQuery puedo hacer en el código JavaScript:

$("#bt_send").bind("onClick", validate);

Con lo que se lanza la función validate que tenga definida al hacer click en el botón. Una gozada.

JQuery

Anuncios

Etiquetado:,

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

A %d blogueros les gusta esto: