Cuando programamos siempre hay determinadas construcciones que repetimos hasta la saciedad. En el caso de Javascript una de las construcciones más utilizadas es la de obtener un objeto especificando una ID. Un ejemplo podría ser el siguiente:

document.getElementById('element').style.display = 'none';

La gente que desarrolla Prototype ha caído en la cuenta de estas instrucciones y nos proporciona una serie de atajos claros y cortos (esa es la gracia de los atajos) y aquí vamos a tratarlos todos.

Para empezar cabe destacar que al utilizarlos Prototype automáticamente extiende todos los objetos con todas las funcionalidades disponibles.

Hay siete atajos en total y estos se caracterizan por estar construidos con el símbolo “$” y una letra.

$() Extracción rápida de objetos inteligentes

Este atajo nos permite extraer objetos especificando la ID, como ya he comentado Prototype extiende su funcionalidad automáticamente.


/**
*
* Uso del atajo $() para extraer objetos mediante su ID
*
*/

// Código clásico
document.getElementById('element').style.display = 'none';

// Mediante los atajos de Prototype
$('element').style.display = 'none';

// Utilizando los métodos extendidos
$('element').hide();

$w() Crear arrays nunca fue tan fácil

Este atajo nos permite crear arrays sin necesidad de preocuparnos de las comillas y comas que separan a cada elemento, para crear una array lo único que hay que pasarle es una string y los valores separados por un espacio (de ahí la “w” de whitespace).


/**
*
* Uso del atajo $w() para crear arrays
*
*/

// Código clásico
var frutas = ['manzana','pera','fresas','melocotón','melón'];

// Mediante $w()
var frutas = $w('manzana pera fresas melocotón melón');

$$() Buscando con estilo

Este atajo nos permite obtener cualquier objeto que cumpla las reglas CSS que le pasemos. No solo permite especificar nombres de clases sino que también podemos utilizar selectores CSS avanzados ya que $$() contempla la gran mayoría del estándar CSS 3.


/**
*
* Ejemplos de uso del atajo $$()
*
*/

$$('div');
// Selecciona todos los DIV's en el documento
// Es similar al uso de document.getElementsByTagName('div');
// Devuelve una array de elementos extendidos

$$('#container');
// Igual que $('container') solo que este devuelve siempre una array

$$('li.even');
// Todos los elementos LI con la clase 'even'

$$('#container a[rel]');
// Todos los links que tengan un atributo 'rel' que estén dentro del elemento con ID 'container'

$$('a[href="#"]');
// Todos los links cuyo atributo href sea '#'

$$('#container li', '#menu li');
// Todos los elementos LI que estén dentro de los elementos con ID 'container' o 'menu'

$$('a:not([rel~=nofollow])');
// Todos los links excluyendo aquellos que tengan la palabra 'nofollow' en el atributo 'rel'

$$('table tbody > tr_nth-child(even)');
// Todas las filas pares de todas las tablas

$$('div:empty');
// Todas los objetos DIV que estén vacíos

Para ver un listado completo de los selectores CSS soportados podéis visitar la documentación oficial

$A() Unificando colecciones

El atajo $A() nos permite convertir cualquier colección de datos array-compatible en un objeto Array.


/**
*
* Ejemplo de uso del atajo $A()
*
*/

// Usando tipos regulares
var p = document.getElementsByTagName('p');
for( var i = 0; i < p; ++i)
 Element.hide(p.item(i));
Element.update(p.item(p.length -1), 'Un poco largo');

// Al estilo Prototype (sin usar los elementos extendidos)
var p = $A(document.getElementsByTagName('p'));
p.each(Element.hide);
Element.update(p.last(), 'Esto está mejor');

Otro ejemplo podría ser el siguiente:


/**
*
* Ejemplo de uso del atajo $A()
*
*/

// Usando tipos regulares
function showArgs(){
 alert(Array.prototype.join.call(arguments, ', ');
}

// Mediante Prototype
function showArgs(){
 alert($A(arguments).join(', '));
}

$F() Trabajando como expertos con los campos

Este atajo nos permite conocer el valor de cualquier campo que se encuentre en un formulario, puede parecer una tontería pero pensad en los campos radio button, en los checkbox o en las listas de selección múltiple y además hay que tener en cuenta las inconsistencias entre navegadores, pues bien Prototype tiene en cuenta todo esto y retorna los siguientes valores:

  • Para listas de selección múltiple devuelve un array de valores, una entrada por cada valor, en otro caso simplemente devuelve un valor simple.
  • Para radio butons o checkboxes sin marcar devuelve null
  • Para cualquier otra cosa devuelve un valor simple

Todos los valores son retornados como Strings, en caso de que en las listas el atributo value= no existe en cada tag option este método devuelve el texto contenido entre las tags option

$H() Crear Hashes de cosas

Es un acceso directo para la creación de Hashes, realmente lo que estamos haciendo es new Hash(…).

$R() Manipulando rangos

Este es uno de los atajos menos utilizados en Prototype, básicamente permite crear rangos de números.


/**
*
* Ejemplos de uso del atajo $R()
*
*/

$R(1,5).each(function(n){
 // Esta función es llamada 5 veces, desde 1 hasta 5
});

$A($R(1,7));
// -> [1,2,3,4,5,6,7]
// Crea un array con los valores desde 1 hasta 7

$R(1,10).findAll(function(n){
 return 0 != n % 2;
});
// -> [1,3,5,7,9]
// Devuelve todos los número impares del rango desde 1 hasta 10

Como podéis ver los atajos de Prototype nos facilitan la vida y sobretodo evitan que tengamos la necesidad de escribir muchas líneas de código.

Probad y ya me contaréis.

Bibliografía:

[1] Christophe Porteneuve. Prototype and script.aculo.us 2007 Ed. The Pragmatic Programmers. ISBN:13 978-1-934356-01-2