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 chutan 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

1

document.getElementById('foo')

Modo Correcto

1

$('foo')

El operador $ es lo mas esencial de Prototype, de ahí viene toda su magia, utilizalo!

2.

Modo Incorrecto

1
2

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

Modo Correcto

1

var woot = $F('bar')

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

3.

Modo Incorrecto

1
2

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

Modo Correcto

1
2
3
4
5
6

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

Olvidate de problemas de bugs sobre diferentes navegadores si utilizas el metodo setStyle()

4.

Modo Incorrecto

1

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

Modo Correcto

1

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

Podras decir que es casi la misma, pero no opinaras lo mismo cuando necesites concatenar funciones.

5.

Modo Incorrecto

1

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

Modo Correcto

1
2
3
4
5
6
7
8
9

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

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

6.

Modo Incorrecto

1
2
3
4
5
6
7
8

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

Modo Correcto

1

new Ajax.Request('blah.php')

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

7.

Modo Incorrecto

1

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

Modo Correcto

1

$('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

1
2
3
4
5

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

Modo Correcto

1

$$('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

1
2
3
4
5

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

Modo Correcto

1

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

Y también puede ser usado para manejo de eventos, muy practico!

10.

Modo Incorrecto

1
2

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

Modo Correcto

1
2
3

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

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

11.

Modo Incorrecto

1
2
3
4
5
6

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

Modo Correcto

1
2
3
4
5
6
7
8
9
10
11

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.

Enlace | How well do you know prototype