JavaScript no obstructivo

JavaScript no obstrusivo 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 o JQuery, 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, se ha escrito el javascript 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, a la accesibilidad y a la velocidad de carga del documento (los archivos javascript externos suelen guardarse en caché para posteriores visitas); por lo tanto es una mala práctica. Lo recomendable es enlazar un archivo externo que contenga código javascript desde el HTML:

<script type="text/javascript" src="archivoJavascript.js"></script>

La solución no invasiva al código superior podría ser la siguiente: Definir una función que valide un formato de fecha determinado (validaFecha()), y asociar el formulario que contiene el campo (formulario) con dicha función mediante un evento concreto (evento submit) gracias al DOM. En este ejemplo se asocia la función validaFecha(campo) al campo con id campoFecha mediante el método DOM del objeto document getElementById():

<form name="formulario" action="recibidor.php" method="post">
        <input type="text" name="fecha" id="campoFecha" />
        <button type="submit">Enviar</button>
</form>

// Función que valida un formato de fecha concreto. 
// Devolverá true o false en función de la evaluación
function validaFecha() {
        // Buscamos el elemento con id "campoFecha"
        var elCampo = document.getElementById("campoFecha"); 
        // Contenido de la función que validará que el formato de elCampo.value 
        // sea el esperado con expresiones regulares. En este caso únicamente (dd/dd/dddd)
        var resultado = /^\d{2}\/\d{2}\/\d{4}$/.test( elCampo.value );
        if( resultado )              // caso positivo
                return resultado;
        else {                    // caso negativo
                alert("El formato de fecha es dd/dd/dddd");
                return false;
        }
} 
 
// Función que añade un evento a un objeto del DOM 
// válida tanto para el código propietario de IE 
// como para el estándar definido por la W3C
function listen(event, elem, func) {
        if (elem.addEventListener)                  // W3C DOM
                return elem.addEventListener(event,func,false);
        else if (elem.attachEvent)                 // IE DOM
                return elem.attachEvent("on"+event, func);
        else {
                throw "No es posible añadir evento";
                return false;
        }
}
 
 
// Asociamos al evento submit del formulario la función validaFecha
var elFormulario = document.forms["formulario"];
listen("submit", elFormulario, validaFecha);

Es importante tener en cuenta que si javascript está desactivado o no está disponible en el agente del cliente el funcionamiento que se espera del HTML quedará intacto, y el formulario funcionará sin problemas. En caso de tener disponible javascript se complementará la funcionalidad. Es una buena práctica que mejora la accesibilidad.

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 específicas 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

• JavaScript
• AJAX
• Web 2.0

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 biblioteca que facilita el desarrollo de JavaScript no obstructivo (en inglés)
• JavaScript no obstructivo en Mozilla Developer Center
• Javascript no obstructivo, manual de buenas maneras (en castellano)