aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Mr. Dustin Diaz, uno de los verdaderos gurus del Javascript mundial, nos deleíta con este post con buenas prácticas para el desarrollo en Javascript. Un post enfocado para los que comienzan a desarrollar conociendo la potencia del lenguaje y de las maravillas que se pueden hacer.

1) Deja de escribir document.getElementById()

Hasta que la función $() forme parte del estandar (si al final forma parte él) para obtener un objeto usando su ID, puede ser una tarea considerablemente pesada al tener que escribir tantas letras (mira que somos vagos los desarrolladores) y por eso podemos ahorrarnos algo de trabajo creando funciones sencillas que nos hagan lo mismo.

function get(el) {
  return document.getElementById(el);
}

O mejor aún, si usamos alguna de las ya comentadas aqui con anterioridad, mucho más completas y perfeccionadas para el trabajo diario.

function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}
//uso
$('uno', 'dos','tres');

2)Abstrae la gestión de eventos

Si desde el principio consigues separar los eventos de la estructura tendrás mucho ganado. Usando la gestión de eventos de javascript, esta tarea es relativamente más sencilla y más óptima para futuras etapas de mantenimiento o mejora.

var addEvent = function() {
  if (window.addEventListener) {
    return function(el, type, fn) {
      el.addEventListener(type, fn, false);
    };
  } else if (window.attachEvent) {
    return function(el, type, fn) {
      var f = function() {
        fn.call(el, window.event);
      };
      el.attachEvent('on' + type, f);
    };
  }
}();
//Uso
addEvent($('ejemplo'), 'click', function(e) {
	alert("Hola, soy Ejemplo");
});

3) Usa Toggle, es fácil

En muchas situaciones, tenemos que hacer que elementos cambien de estado o de apariencia al interactuar con ellos, volviendo a su estado inicial cuando dejamos de hacerlo. En muchos casos hacemos que estos elementos desaparezca y se muestren, dependiendo del criterio que deseemos. Funciones como toggle() pueden ayudarnos a hacer esto más fácil.

//Versión para un solo elemento
function toggle(el) {
	$(el).style.display = ($(el).style.display='')?'none':'';
}
//Versión multi-elemento
function toggle() {
  for (var i=0, el; el = get(arguments[i]); i++) {
    el.style.display = (el.style.display != 'none' ? 'none' : '' );
  }
}

4) Ajax

Aún a las alturas que estamos mucha gente le tiene miedo a meterle mano a Ajax, y son reticentes a desarrollar aplicaciones con su potencial. Ajax, es más fácil de implementar y usar que otras técnicas de javascript.

var ajax = (XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP'); //Objeto Ajax
ajax.open("GET", PAGINA+"?"+PARAMETROS, true);