Tips Jquery

Páginas: 11 (2713 palabras) Publicado: 24 de septiembre de 2012
Si hay algo bueno con jQuery es que no sólo trata de facilitar el trabajo de los desarrolladores de JavaScript; sino también, introducir a aquellos que no tienen muchos conocimientos sobre JS, a crear sus propios efectos, programar cosas sencillas, etc. muy rápidamente.
Sin embargo, la clave para no terminar escribiendo un código de poca calidad, es tener presente algunas ideas y tips básicos ala hora de desarrollar nuestro código. En este artículo veremos 14 trucos, notas y mejores prácticas para programar con jQuery, que todos debemos conocer...
1. Maneras de retornar el objeto jQuery
Es importante recordar que la mayoría de métodos retornarán el objeto jQuery. Esto es muy útil, ya que nos permite usar el encadenamiento de métodos, muy a menudo.
$someDiv
.attr('class','someClass')
.hide()
.html('new stuff');
Sabiendo que siempre se devuelve el objeto jQuery, podemos usarlo para eliminar código sobrante. Por ejemplo, veamos el siguiente código:
var someDiv = $('#someDiv');
someDiv.hide();
La razón por la que "cacheamos" la ubicación del elementosomeDiv es la de limitar a una, el número de veces que tenemos que recorrer el DOM para encontrar el elemento.
Elcódigo anterior es correcto; sin embargo, podríamos combinar ambas líneas y obtener el mismo resultado:
var someDiv = $('#someDiv').hide();
De esta manera, aunque ocultamos el elemento someDiv, el método también devolverá el objeto jQuery; por lo que, luego podemos hacer referencia al elemento, a través de la variable someDiv.
2. El selector Find
jQuery nos ofrece una variedad de selectores y haceun buen trabajo al optimizarlos; tanto, que por lo general, no hay necesidad de preocuparse por ellos. Sin embargo, hay un puñado de cosas que podemos hacer para mejorar el rendimiento de nuestros scripts.
Una de ellas es utilizar el método find(), tanto como sea posible. La clave esta en no forzar a que jQuery a utilizar su motor Sizzle, si no es necesario. Desde luego, habrá momentos en queesto no sea posible y está bien; pero, si no se requiere de la sobrecarga adicional, no hay porque buscarla.
// Bien en navegadores modernos, aunque Sizzle se inicia "en marcha"
$('#someDiv p.someClass').hide();

// Mejor para todos los navegadores y Sizzle nunca inicia
$('#someDiv').find('p.someClass').hide();
Las últimas versiones de los navegadores modernos (con WebKit ó +Firefox 3.1)implementan el métodoQuerySelectorAll(), que nos permite usar selectores, al igual como lo hacemos con CSS, sin la necesidad de usar jQuery... jQuery también comprueba esta funcionalidad.
Sin embargo, los navegadores más antiguos, como IE6/IE7, no tienen esta característica; por lo que estos selectores hacen uso del motor Sizzle; que, aunque es muy bueno, ocasionan un poco más de sobrecarga.
Sizzlees un genial trozo de código que no es tan fácil de entender; pero que si lo explicamos, en una oración, diríamos que: Coge tu selector y lo convierte en un "array" conformado por cada componente de tu selector.
// Tosca idea de cómo funciona
['#someDiv, 'p'];
Luego, de derecha a izquierda, empezará a descifrar cada elemento con expresiones regulares. Esto quiere decir, que la parte más a laderecha de tu selector deberá ser la más específica posible, por ejemplo, un id o un nombre de etiqueta.
En pocas palabras, cuando sea posible debemos:
• Mantener simples nuestros selectores
• Utilizar el método find(). De esta manera, en lugar de usar Sizzle, podemos continuar usando las funciones nativas de los navegadores.
• Cuando usamos Sizzle, debemos optimizar la parte que esta más a laderecha de nuestro selector, tanto como sea posible.
¿El lugar del contexto?
También es posible añadir un contexto a los selectores, por ejemplo:
$('.someElements', '#someContainer').hide();
Este código le dice a jQuery que englobe a todos los elementos que tengan la clasesomeElements y que sean hijos de someContainer. De esta manera, usar un contexto es una manera útil de limitar el...
Leer documento completo

Regístrate para leer el documento completo.

Estos documentos también te pueden resultar útiles

  • Jquery
  • Jquery
  • Jquery
  • jquery
  • Jquery
  • jquery
  • Jquery
  • jquery 1

Conviértase en miembro formal de Buenas Tareas

INSCRÍBETE - ES GRATIS