Utilizando Prototype correctamente

Leyendo Quest's Blog, me encontré un par de artículos de Perfection Kills, que dan unos tips acerca del uso básico de Prototype.

El primero en especial me parece muy útil, a pesar de que son cosas muy simples, son errores que todos cometemos al principio, ¿Seamos sinceros, que tantos se leen toda la documentación antes de empezar a programar?

Me servirá de recordatorio así que me he tomado la libertad de publicarlo:

Errores comunes con Prototype

1.

Modo Incorrecto

document.getElementById('foo')

Modo Correcto

$('foo')

El operador $ es lo mas esencial de Prototype, de ahí viene toda su magia. Al no utilizarlo pierdes la oportunidad de aprovechar los agregados de Prototype en el elemento y hacer chaining.

2.

Modo Incorrecto

var woot = document.getElementById('bar').value
var woot = $('bar').value

Modo Correcto

var woot = $F('bar')

El operador $F es un gran atajo para obtener valores de elementos.

3.

Modo Incorrecto

$('footer').style.height = '100px';
$('footer').style.background = '#ffc';

Modo Correcto

$('footer').setStyle(
  {
      height: '100px',
      background: '#ffc'
  }
)

Olvídate de problemas de estilos en diferentes navegadores si utilizas el metodo setStyle().

4.

Modo Incorrecto

$('tusuperelemento').innerHTML = 'algun contenido'

Modo Correcto

$('tusuperelemento').update('contenido')

Podrás decir que es casi la misma, pero no opinarás lo mismo cuando necesites concatenar funciones.

5.

Modo Incorrecto

new Ajax.Request('ninja.php?weapon1=foo&weapon2;=bar')

Modo Correcto

new Ajax.Request('ninja.php',
  {
    parameters:
      {
        weapon1: 'foo',
        weapon2: 'bar'
      }
  }
)

Escribe código limpio, tu cerebro te lo agradecerá.

6.

Modo Incorrecto

new Ajax.Request('blah.php',
  {
    method: 'POST',
    asynchronous: true,
    contentType: 'application/x-www-form-urlencoded',
    encoding: 'UTF-8',
  }
)

Modo Correcto

new Ajax.Request('blah.php')

Todos esos parámetros ya son defaults, ¿Para que repetirlos?.

7.

Modo Incorrecto

Event.observe('myContainer', 'click', doSomeMagic)

Modo Correcto

$('myContainer').observe('click', doSomeMagic)

Es mas fácil concatenar si escoges el segundo, pero aquí es cuestión de gustos, escoge el sabor que mas te guste.

8.

Modo Incorrecto

$$('div.hidden').each(function(el)
  {
    el.show();
  }
)

Modo Correcto

$$('div.hidden').invoke('show')

Invoke es muy útil, piensa en el como en un atajo cuando necesitas asignar valores iguales a todos tus elementos sin necesidad de iterar sobre ellos.

9.

Modo Incorrecto

$$('div.collapsed').each(function(el)
  {
    el.observe('click', expand);
  }
)

Modo Correcto

$$('div.collapsed').invoke('observe', 'click', expand)

Y también puede ser usado para manejo de eventos, ¡muy práctico!

10.

Modo Incorrecto

$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);

Modo Correcto

$$('input.date')
  .invoke('observe', 'focus', onFocus)
    .invoke('observe', 'blur', onBlur)

¿Para que abusar del operador $$ dos veces si podemos concatenar?

11.

Modo Incorrecto

$('productTable').innerHTML = 
  $('productTable').innerHTML + 
  '<tr><td>' + productId + ' '
  + productName + '</td></tr><tr><td>' 
  + productId + ' ' + productPrice + 
  '</td></tr>'

Modo Correcto

var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
  $('productTable').insert(
    rowTemplate.evaluate(
      {
        id: productId,
        name: productName,
        price: productPrice
      }
    )
  )
)

Este tip en especial es una joya, con Prototype podemos hacer templates, evitando de esta manera enormes plastas de código. Me confieso culpable de no haber utilizado esto antes.

Referencia: How well do you know prototype