JavaScript no obstructivo es un paradigma floreciente en el uso del lenguaje de programación JavaScript, utilizado en la Web. Aunque el término no se define formalmente, sus principios generalmente incluyen:

Separación de la funcionalidad JavaScript (la "capa del comportamiento") de las capas de estructura/contenido y de presentación de un página.
Uso de buenas prácticas a fin de evitar los problemas de incompatibilidad de la programación tradicional en JavaScript (tales como inconsistencias entre navegadores y falta de escalabilidad)

La necesidad de un nuevo paradigma

JavaScript ha tenido durante mucho tiempo la reputación de lenguaje torpe e inadecuado para el desarrollo serio. Esto ha sido en gran parte debido a las implementaciones incompatibles del lenguaje y del DOM en varios navegadores, y al uso extenso de código "pegado" lleno de errores por parte de los aficionados. Los errores en tiempo de ejecución eran tan frecuentes y difíciles de solucionar que pocos programadores intentaban corregirlos.

La reciente aparición de navegadores con un soporte adecuado de los estándares web, frameworks para JavaScript tales como Prototype, y herramientas de depuración de alta calidad han facilitado enormemente la creación de código organizado y escalable en JavaScript, y la aparición de AJAX lo ha hecho esencial. Mientras hasta hace poco JavaScript era solo utilizado para las tareas relativamente simples y no críticas (validación de formularios y decoraciones llamativas), actualmente se está utilizando para escribir código complejo que a menudo es responsable de buena parte de la funcionalidad básica de un sitio. Los errores en tiempo de ejecución y el comportamiento imprevisible ya no son molestias de menor importancia; son errores fatales.

JavaScript no obstructivo se puede considerar como parte del movimiento a favor de los estándares web. Así como la demanda de compatibilidad de los navegadores ha conducido al aumento de estandarización de código y estilo, la demanda creciente de aplicaciones ricas está haciendo necesarios los métodos más robustos de JavaScript no obstructivo.

Separando comportamiento y contenido

Tradicionalmente, la mayoría JavaScript se escribe en línea, como parte del contenido de un documento HTML. Por ejemplo, lo siguiente es una práctica típica de validación de formularios JavaScript:

 <input type="text" name="fecha" onchange="validateDate (this);" />

Pero el propósito de HTML es describir la estructura de un documento, no su comportamiento programático. Combinar los dos afecta negativamente la facilidad de mantenimiento de un sitio por la misma razón que lo hace combinar el contenido y la presentación: si un sitio contiene centenares de estos campos de fecha, agregar la cualidad apropiada del onchange para cada uno (y modificándolos más adelante, en caso de necesidad) puede ser un trabajo dificil. Además, la sintaxis en linea impide la asignación de mas de un "manejador de evento" (event handler) para el evento onchange, lo que puede ser un problema si la aplicación crece.

La solución "no obstructiva" es colocar a los manejadores de eventos necesarios pragmaticamente, en lugar de en línea. Esto es logrado comúnmente asignando una clase particular de la CSS a todos los elementos que necesiten utilizar el script:

 <input type="text" name="fecha" class="campoFecha" />

El script puede entonces buscar todos los elementos con la clase campoFecha, y configurarlos:

//Asigna los manejadores de eventos para onchange
//Este script usa objetos y metodos propios de Prototype
 camposFecha = $("campoFecha");
 for ( i=0; i<camposFecha.length; i++ ) {
    Event.observe( camposFecha[i], "change", validateDate );
 }

El siguiente código es equivalente al anterior pero usa Behaviour en vez de Prototype.

var myrules = {
	'.campoFecha' : function(element){
		element.onchange = validateDate;
	}
};
	
Behaviour.register(myrules);

Dado que el propósito del atributo class es describir el rol semántico de un elemento esta aproximación es común en las prácticas basadas en estándares web.

Mejorando las prácticas

Aunque la esencia JavaScript no obstructivo es el concepto de una capa separada del comportamiento, los seguidores del paradigma suscriben generalmente los principios relacionados, por ejemplo:

La adherencia estricta al W3C DOM y modelo de evento, y evasión de extensiones especificas para un navegador.
Las mejores prácticas de JavaScript son paralelas a menudo a otros lenguajes de programación, tales como el encapsulamiento y la abstracción, evasión de variables globales, convenciones de nombramiento significativas, uso de los patrones apropiados del diseño, y prueba sistemática. Tales principios son esenciales para el desarrollo de software en gran escala, pero no se han observado extensamente en JavaScript en el pasado; su adopción se considera como componente esencial de la transición de JavaScript de un lenguaje "juguete" a una herramienta para el desarrollo serio.

Véase también

Enlaces externos

La capa de comportamiento: Usando JavaScript para el bien, no para mal (en inglés)
JavaScript no obstructivo (en inglés)
A List Apart: Separando el comportamiento (en inglés)
JavaScript no obstructivo para Ruby on Rails (en inglés)
Behaviour, una libreria que facilita el desarrollo de JavaScript no obstructivo (en inglés)