Introduciendo Prototype // Combinar jQuery con Prototype

Aunque me había planteado llevar mi debate de Twitter con mi colega Jumnper sobre el “Rock the Rebel, Metal the Devil” de Volbeat a este blog (a él le encanta, a mi me recuerda terriblemente al Load de Metallica), creo que mejor seguiré un poco más con entradas centradas en informática, por “comercialidad” porque son las más leídas (curiosamente tengo un montón de visitas desde México en este tipo de entradas)

Más de una vez he hablado de jQuery aquí, un gran facebook que nos da gran productividad en javascript, pero que no es la única opción. Prototype desde un primer momento ha protagonizado una encarnizada batalla con jQuery por la corona de “framework más usado”. Podéis descargarlo en este enlace para trastear con él.

Al igual que en jQuery existe una función $, que en Prototype nos permite seleccionar los elementos por su ID. Dirás “en jQuery es mejor porque permite cualquier selector CSS”, cierto, pero también existe una función para eso, que es $$

Otros métodos intersantes son $F, que accede al valor de un campo de un formulario, $A, que convierte listas de nodos o colecciones HTML en arrays, $H, que permite crear arrays asociativos o $R, que permite crear rangos de valores.

A la hora de trabajar con cadenas tenemos el método escapeHTML(), que permite transformar los caracteres problemáticos en su entidad HTML. También puedes usar toArray(), que convierte la cadena en un array de caracteres, y dispones de camelize(), que convierte una cadena separada por guiones a notación CamelCase.

Los métodos .show() y .hide() son lo que parecen ser, ocultan o muestran el elemento seleccionado (como sus homónimas en jQuery). En cambio .toogle() lo que hace es cambiar el estado entre show y hide dependiendo de en cual esté el elemento.

En cuanto a métodos para campos de formulario lo más interesante me parece .clear(), que vacía el valor de un campo, y .present(), que es cojonudo para validar campos, dado que devuelve false si el campo está vacío. Y si aplicas .disable() a un formulario lograrás desactivar todos sus campos.

Pero es con Ajax con lo que Prototype realmente te facilita la vida. Tienes Ajax.Updater(), que recibe tres parámetros: el ID del elemento a recargar por ajax, la página php que generará el código y varias opciones, y con Ajax.PeriodicalUpdater sólo tendréis que pasarle el parámetro frecuency seguido de un número ({frecuency:30}) para que realice una recarga automática por cada intervalo de ese número de segundos.

Y trabajando con DOM tampoco os dejará tirados este framework. El método .insert(), por ejemplo, os dejará elegir si queréis ponerlo detrás de, delante de, antes o encima de, y después o debajo de un elemento en concreto.

¿Mejor jQuery o Prototype? Bueno, cada uno tiene sus debilidades y sus potenciales. Yo uso más jQuery, por conocerlo mejor, pero incluso los podéis usar a la vez. Pero cuidado, tenéis que hacer un apañito antes para evitar conflictos, dado que ambos tienen un método $. La forma de evitar el conflicto es usando el método .noConflict() como en el ejemplo:

var $jQ = jQuery.noConflict();

A partir de ese momento la abreviatura de jQuery (que por defecto es $) pasar a ser la que tú has definido en la variable (en este caso $jQ), permitiéndote usar ambos frameworks sin conflicto entre ellos.

De todas formas, no suele ser práctico utilizar dos frameworks, aunque evites los conflictos siempre estás metiendo más carga a la web (aunque por otra parte, pesan bastante más muchas imágenes que los archivos .js de estos frameworks).

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s