Errores comunes con Prototype

-- Todamo de este blog: http://www.pablasso.com/

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, utilizalo!

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

ver como texto plano

JAVASCRIPT:

1. $('footer').setStyle(
2. {
3. height: '100px',
4. background: '#ffc'
5. }
6. )

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

4.

Modo Incorrecto

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

Modo Correcto

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

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

5.

Modo Incorrecto

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

Modo Correcto

ver como texto plano

JAVASCRIPT:

1. new Ajax.Request('ninja.php',
2. {
3. parameters:
4. {
5. weapon1: 'foo',
6. weapon2: 'bar'
7. }
8. }
9. )

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

6.

Modo Incorrecto

ver como texto plano

JAVASCRIPT:

1. new Ajax.Request('blah.php',
2. {
3. method: 'POST',
4. asynchronous: true,
5. contentType: 'application/x-www-form-urlencoded',
6. encoding: 'UTF-8',
7. }
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

ver como texto plano

JAVASCRIPT:

1. $('div.hidden').each(function(el)
2. {
3. el.show();
4. }
5. )

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

ver como texto plano

JAVASCRIPT:

1. $('div.collapsed').each(function(el)
2. {
3. el.observe('click', expand);
4. }
5. )

Modo Correcto

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

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

10.

Modo Incorrecto

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

Modo Correcto

ver como texto plano

JAVASCRIPT:

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

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

11.

Modo Incorrecto

ver como texto plano

JAVASCRIPT:

1. $('productTable').innerHTML =
2. $('productTable').innerHTML +
3. '' + productId + ' '
4. + productName + ''
5. + productId + ' ' + productPrice +
6. ''

Modo Correcto

ver como texto plano

JAVASCRIPT:

1. var rowTemplate = new Template('#{id} #{name}#{id} #{price}');
2. $('productTable').insert(
3. rowTemplate.evaluate(
4. {
5. id: productId,
6. name: productName,
7. price: productPrice
8. }
9. )
10. )
11. )

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