Dustin Diaz, ha hecho una recopilación de las mejores funciones en Javascript, cuando empezé a leer este artículo pensé, “Serán las 10 que más le han gustado a él…”, he terminado de leerlo y aplaudo su elección, sin duda son las mejores, o por lo menos las más útiles.
Esto no se puede aplicar a todos los proyectos ya que para cada uno requeríremos unas funciones u otras, dependiende siempre de nuestras necesidades. Lo que si es cierto que generalizando estas funciones son execepcionalmente buenas, he de ahi el motivo por el cual la mayoría de las grandes librerías las integren iguales o con una leve modificación.
10 – addEvent()
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
Empezamos fuerte, esta función se encarga de ayudarnos a gestionar los eventos de nuestra web, con ella podremos asignar a cualquier elemento un evento determinado, gracias al contenido de esta función el javascript no obstructivo es una realidad. Creada por Scott Andrew.
9 – addLoadEvent()
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
Se trata de una versión exclusivamente para el objeto window en el evento onload, de forma que podremos asignar una serie de funcionalidades a nuestro evento onload y ver el resultado al finalizar la carga de nuestra web. Tambien es posible usar addEvent() para realizar lo mismo. Creada por Simon Willison.
8 – getElementsByClass()
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
Una gran función que mediante un nombre de class, podremos encontrar los elementos que la compongan, devolviendo un array de objetos para trabar con ellos de forma más cómoda. Originalmente no fue creada por nadie en partícular aunque con el tiempo los desarrolladores han ido añadiendo mejoras para depurar la función.
7 – cssQuery()
Quizas la mejor aliada para trabajar con CSS desde Javascript, escrita por Dean Edwars, llama la atención por la cantidad de selectores que permite usar a la hora de realizar la consulta. Ver documentación.
6 – toggle()
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
Esta función la habré implementado un millón de veces, es la típica que se usa una infinidad de veces y generalmente no sabes ni como se llama. Se trata de una función que oculta/muestra un elemento dependiendo de su estado anterior, osea mostrado lo que está oculto y viceversa.
5 – insertAfter()
function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}
Esta no la había usado nunca, creada por Jeremy Keith, nos permite insertar un nodo despues de otro elemento padre.
4 – inArray()
Array.prototype.inArray = function (value) {
var i;
for (i=0; i < this.length; i++) {
if (this[i] === value) {
return true;
}
}
return false;
};
¿Cuantas veces has tenido que recorrer un array entero para saber si hay un valor o no? Pues esta función realiza la busqueda por ti.
3 – getCookie()
function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}
Función de manual para recoger datos de la cookie del cliente, muy cómoda y práctica.
2 – setCookie()
function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+'='+escape( value ) +
( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
( ( path ) ? ';path=' + path : '' ) +
( ( domain ) ? ';domain=' + domain : '' ) +
( ( secure ) ? ';secure' : '' );
}
Función compañera a getCookie() con la cual podrás almacenar en el cliente los datos necesarios en forma de cookie.
1 – deleteCookie()
function deleteCookie( name, path, domain ) {
if ( getCookie( name ) ) document.cookie = name + '=' +
( ( path ) ? ';path=' + path : '') +
( ( domain ) ? ';domain=' + domain : '' ) +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}
Función encargada de eliminar cookies en el cliente.
Mención Honorífica – $()
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;
}
Con diferencia la función más extendida de la red, todas las librerías la usan e incluso le han añadido funcionalidades (como xPath en jQuery), consiguiendo una función muy pontente que nos volverá un elemento o una serie de elementos, únicamente pasando como parametro los id’s de los elementos deseados.
Podeis descargarlas todas desde
la página de Dustin Diaz.
Entradas
