Con la llegada de Ajax, la llegada de la lógica de negocio a las aplicaciones web y sobretodo al cliente han producido un incremento del javascript usado en las mismas. El motivo es la funcionalidad que se puede llegar a conseguir en el cliente aligerando el número de recargas de página en nuestras aplicaciones.
Al incrementarse el javascript, innevitablemente estamos haciendo Javascript dependientes nuestras aplicaciones. Mucha gente me dice que el 96% de los usuarios de Internet tienen Javascript activado en su navegador y tienen razón, pero ¿que pasa con ese 4% restante? ¿nos olvidamos de ellos?
Para evitar tener que hacernos esta comprometida pregunta, ya que no creo que ningún cliente quiera pensar… ¿no han pensado en mi?, podemos salir del paso haciendo un uso inteligente de Javascript y dando siempre un camino alternativo a los usuarios que no disponen de este lenguaje activado en su navegador. Para ello, siguiendo una serie de pautas podremos conseguir que nadie se quede fuera de nuestra aplicación.
No hagas suposiciones
Como dicen en todas las pelis deportivas sensiblonas, “La mejor defensa es un buen ataque”. Por ese motivo, una aplicación debería desarrollarse sin javascript, hacer que esta funcione y posteriormente mejorar la usabilidad y añadir funcionalidades extras con javascript. Para ello a la hora de desarrollar planteate:
- El javascript no tiene por que estar activado, ¿funcionará sin él?
- Piensa que aunque tenga Javascript activo, puede que no soporte ciertos métodos o funciones. ¿será compatible?
- Mantener la funcionalidad de forma independiente al dispositivo de entrada
- Piensa que otros scripts pueden interferir con tus scripts.
Busca las relaciones
Antes de ponernos a desarrollar debemos asegurarnos que tenemos un HTML estructurado y correctamente etiquetado. De esta forma nos ahorraremos líneas de código intentando acceder a nuestros elementos, una base sólida nos dará tranquilidad.
Para ello hemos de tener una serie de puntos bien sabidos:
- El ID de los elementos es único por página, tener 2 elementos con el mismo ID causará problemas en nuestros scripts, métodos como
getElementById() no funcionarían correctamente. - Si nos vemos obligados a tener 2 elementos similares, siempre podemos usar elementos class, para referenciarlos. Implementaciones como
getElementsByClassName() hacen posible que trabajemos con este tipo de atributos. - Planteate la forma más rápida de acceder a un elemento con el menor número de pasos por el DOM.
- O, ¿que elemento debes modificar para acceder al mayor número de hijos que quieres modificar?
- ¿Qué atributos o que información me ayuda a enlazar elementos?
Recorrer el DOM es costoso y lento, por ese debemos optimizar el número de pasos que hacemos sobre él.
Deja que los expertos lo recorran
DOM es un método muy interesante y práctico para recorrer nuestra página, pero como hemos dicho antes es realmente costoso y lento para nuestras aplicaciones. Una alternativa para algunos es casos es hacer uso de la tecnología más rápida en recorrer el arbol DOM, el CSS.
Como bien sabemos la finalidad del CSS, es dotar de estilo nuestro HTML, y por ello debemos, en medida de lo posible, usarlo para eso. Evitaremos hacer cosas como estas:
var n = document.getElementById('nav');
if(n){
var as = n.getElementsByTagName('a');
if(as.length > 0){
for(var i=0;as[i];i++){
as[i].style.color = '#369';
as[i].style.textDecoration = 'none';
}
}
}
cuando podamos hacer cosas como estas
//Javascript
var dynamicClass = ‘js’;
var b = document.body;
b.className = b.className ? b.className + ‘ js’ : ‘js’;
//CSS
/* static version */
#nav {
….
}
/* dynamic version */
body.js #nav {
….
}
o estas,…
//HTML
…
blabla…
…
//Javascript
var el = document.getElementsByClassName(”textnormal”)[0];
if (el) {
el.className = “textNegrita”;
}
//Css
.textnormal {
…
}
.textNegrita {
…
}
Conoce bien a tu enemigo
Hemos de entender que esto es una guerra, los navegadores son nuestros enemigos y hemos de no dejar flancos sin cubrir para que nos puedan cazar. Por ello debemos conocerlos bien, saber donde flojean y por que nos pueden causar un error. Si hace falta, crea otro fichero especialmente para él.
Como javascript es un lenguaje que nos ayuda a mejorar la usabilidad de nuestro sitio, podemos hacer funcionalidades exclusivas para los que tengan javascript activado. Por poner un ejemplo, los navegadores no ofrecen un sistema sin javascript para lanzar la impresión de página, por ese motivo podemos generar el contenido desde javascript, dejando al margen a todos los usuarios que no lo tengan activado. ¿No les pondremos la miel en los labios si no lo van a poder usar no?
Entiende los eventos
La gestión de eventos es sin duda la clave del javascript no obstructivo. El uso de una gestión de eventos, proporciona una separación necesaria de la capa de funcionalidad, haciendo que los elementos de la estructura esperen el evento definido. Estos eventos pueden ser definidos teniendo en cuenta:
- Solo necesitas comprobar que un simple elemento existe, no todos ellos.
- Puede añadir o eliminar dinámicamente nuevos elementos hijos sin tener que eliminar o añadir nuevos controladores.
- Puedes usar el mismo evento en diferentes elementos.
Tambien debemos recordar que lo eventos pueden ser detenidos.
Juega bien con los demás
Generalmente nuestros scripts suelen estar en un solo fichero con lo que llegamos a cargar una gran cantidad de variables globales y funciones que no llegamos a usar a lo largo del uso de la aplicación. Una muestra de ello son el uso de frameworks, por ello debemos saber donde y cuando debemos usar variables globales. Veamos un ejemplo:
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
De esta forma estamos definiendo una variable global que podemos usar en todas las funciones anteriores.
var myScript = {
nav:document.getElementById('nav'),
init:function(){
myScript.show();
if(myScript.nav.className === 'show'){
myScript.reset();
}
// do stuff
},
show:function(){
var c = myScript.nav.className;
// do stuff
},
reset:function(){
// do stuff
}
}
De esta forma, únicamente usaremos la variable nav para estos métodos del objeto, aunque para usarla debemos escribir demasiadas letras 
Tambien podemos necesitar hacer que desde fuera del objeto no podamos acceder a ciertos métodos y a otro sí, para ello podemos hacer lo siguiente.
var myScript = function(){
// these are all private methods and properties
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
var foo = 'bar';
function public(){
}
// return public pointers to the private methods and
// properties you want to reveal
return {
public:public,
foo:foo
}
}();
myScript.public(); //OK
myScript.init(); //ERROR
Fuente: http://www.anieto2k.com/2007/11/14/7-reglas-de-oro-para-hacer-un-javascript-no-obstructivo/
