contenido 30 de diciembre de 2013 a las 06.03
   Imprimir artículo
elWebmaster.com

15 tips para desarrolladores de jQuery


jquerywidejQuery es actual referencia en construcci贸n de paginas web cada vez m谩s pr谩cticas. En este art铆culo te mostramos 15 t茅cnicas de jQuery, las cuales ser谩n de gran ayuda para el uso de esta librer铆a, comenzando con unos tips de rendimiento y continuaremos con algunas de las caracter铆sticas menos vistas.

1) Usa la 煤ltima versi贸n de jQuery

Sonar谩 tonto, pero con toda la innovaci贸n en el proyecto de jQuery, una de las maneras m谩s f谩ciles de mejorar el rendimiento de tu sitio web es utilizar simplemente la 煤ltima versi贸n de jQuery. Cada versi贸n de la biblioteca presenta optimizaciones y correcciones de errores, y la mayor parte de la mejora en el tiempo implica solamente cambiar una etiqueta de script.

Puedes incluir directamente la librer铆a de jQuery desde el servidor de Google, el cual provee un hosting libre para una serie de librer铆as Javascript.

<!– Incluye una versi贸n espec铆fica de jQuery, la versi贸n 1.10.2 –>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<!– Incluye la 煤ltima versi贸n. Esta librer铆a depende de la anterior presentada –>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

El 煤ltimo ejemplo incluye la 煤ltima versi贸n 1.10.x de forma autom谩tica a medida que est茅 disponible, esto est谩 almacenado en cach茅 s贸lo durante una hora, as铆 que es mejor no utilizarlo en entornos de producci贸n.

2) Usa los selectores simples

Hasta hace poco, la recuperaci贸n de los elementos DOM con jQuery fue una combinaci贸n finamente coreografiada de analizar cadenas de selectores, bucles de JavaScript y APIs incorporadas como getElementById(), getElementsByTagName() y getElementsByClassName(). Pero ahora, todos los principales navegadores soportan querySelectorAll(), que entiende los selectores CSS de consulta y trae una ganancia significativa de rendimiento.

Sin embargo, debes tratar de optimizar la manera de recuperar los elementos. Por no hablar de que muchos usuarios siguen utilizando navegadores antiguos que obligan a jQuery a recorrer el 谩rbol DOM, lo cual lo hace m谩s lento.

$(‘li[data-selected=”true”] a’)聽聽聽 // Funciona, pero lento
$(‘li.selected a’)聽聽聽 // Bueno
$(‘#elem’)聽聽聽 // Mejor

La selecci贸n por id es el m谩s r谩pido. Si usted necesita seleccionar por nombre de clase, colocas como prefijo la siguiente etiqueta – $(‘li.selected’). Estas optimizaciones afectan principalmente a los navegadores antiguos y dispositivos m贸viles.

Accediendo al DOM siempre ser谩 la parte m谩s lenta de todas las aplicaciones de JavaScript, por lo que minimizar c贸digo es beneficioso. Una de varias maneras de hacer esto es almacenar en cach茅 los resultados que jQuery arroja. La variable que elija va a contener un objeto jQuery, que se puede acceder m谩s tarde en su script.

var buttons = $(‘#a.button navegaci贸n’);

// Algunos prefieren prefijar sus variables con $:
var $buttons = $(‘#navigation a.button’);

Otra cosa a destacar, es que jQuery ofrece un gran n煤mero de selectores adicionales para mayor comodidad, como por ejemplo :visible, :hidden, :animated y m谩s, que no son selectores CSS3 v谩lidos. El resultado es que si las utilizas entonces la librer铆a no puede utilizar querySelectorAll(). Para remediar la situaci贸n, puedes primero seleccionar los elementos que deseas trabajar, y m谩s tarde filtrarlos, as铆:

$(‘a.button:animated’);聽聽聽 // No usa querySelectorAll()
$(‘a.button’).filter(‘:animated’);聽聽聽 // Si lo usa

El resultado anterior es exactamente lo mismo, con la excepci贸n de que el segundo es m谩s r谩pido.

3) Objetos jQuery como Arrays

El resultado de ejecutar un selector es un objeto jQuery. Sin embargo, la biblioteca hace que parezca como si est谩s trabajando con una matriz mediante la definici贸n de los elementos de 铆ndice y una longitud.

// Seleccionando todos los botones de navegaci贸n:
var buttons = $(‘#navigation a.button’);

// Podemos iterar a trav茅s de la colecci贸n:
for(var i=0;i<buttons.length;i++){
console.log(buttons[i]);聽聽聽 // Un elemento DOM, no es un objeto jQuery.
}

// Incluso podemos cortarlo:
var firstFour = buttons.slice(0,4);

Si despu茅s te dedicas al rendimiento, mediante un procedimiento sencillo con un for (o while) en lugar de $.each(), puedes hacer que el c贸digo vaya varias veces m谩s r谩pido.

Comprobando la longitud es tambi茅n la 煤nica manera de determinar si tu colecci贸n contiene elementos.

if(buttons){聽聽聽 // Esto es siempre cierto
// Haz algo
}

if(buttons.length){ // Verdad s贸lo si los botones contienen elementos
// Haz algo
}

4) La propiedad selector

jQuery provee una propiedad la cual contiene selectores que son usados para iniciar una cadena.

$(‘#container li:first-child’).selector 聽聽聽// #container li:first-child
$(‘#container li’).filter(‘:first-child’).selector 聽聽聽// #container li.filter(:first-child)

Aunque los ejemplos anteriores se dirigen a un mismo elemento, los selectores son bastante diferentes. La segunda sentencia no es v谩lido en realidad, no la puedes utilizar como base de un nuevo objeto jQuery. S贸lo demuestra que el m茅todo de filtrado se utiliza para reducir la colecci贸n.

5) Crear un objeto jQuery vac铆o

Crear un nuevo objeto jQuery puede traer un significante gasto. Algunas veces, podr铆as necesitar crear un objeto vac铆o, y llenarlo con el m茅todo add().

var container = $([]);
container.add(another_element);

Esta es tambi茅n la base para el m茅todo quickEach() que se puede utilizar como una alternativa m谩s r谩pida a los valores del each().

6) Seleccionar un elemento al azar

Como he mencionado anteriormente, jQuery a帽ade sus propios filtros de selecci贸n. Al igual que con todo lo dem谩s en la biblioteca, tambi茅n puedes crear el tuyo propio. Para ello s贸lo tienes que a帽adir una nueva funci贸n a los objetos $.expr[‘:’]. Un impresionante caso de uso fue presentado por Waldek Mastykarz en su blog: la creaci贸n de un selector para recuperar un elemento aleatorio. Puedes ver una versi贸n ligeramente modificada de su c贸digo abajo:

(function($){
var random = 0;

$.expr[‘:’].random = function(a, i, m, r) {
if (i == 0) {
random = Math.floor(Math.random() * r.length);
}
return i == random;
};

})(jQuery);

// As铆 es como se usa:
$(‘li:random’).addClass(‘test_class’);

7) Usar los Ganchos (Hooks) de CSS

El API de ganchos (Hooks) en CSS se introdujo para dar a los desarrolladores la capacidad de obtener y establecer valores CSS particulares. Al usarlo, puedes ocultar las implementaciones espec铆ficas del navegador y exponer una interfaz unificada para acceder a las propiedades particulares.

$.cssHooks[‘borderRadius’] = {
get: function(elem, computed, extra){
// Dependiendo del browser, lee el valor de
// -moz-border-radius, -webkit-border-radius o border-radius
},
set: function(elem, value){
// Establece la propiedad CSS3 apropiada
}
};

// Usa el c贸digo sin preocuparte de cuales propiedades realmente entiende navegador:

$(‘#rect’).css(‘borderRadius’,5);

Lo que es a煤n mejor, es que la gente ya ha construido una amplia biblioteca de ganchos CSS que puede utilizar de forma gratuita en tu pr贸ximo proyecto.

8 – Usa la flexibilizaci贸n de las funciones personalizadas

Probablemente has o铆do hablar de la flexibilizaci贸n del plugin de jQuery por ahora, que le permite a帽adir efectos a tus animaciones. El 煤nico inconveniente es que esto presenta otro c贸digo JavaScript que los 聽visitantes tienen que cargar. Por suerte, s贸lo tienen que copiar el efecto que necesitan del archivo plugin, y agregarlo al objeto jQuery.easing:

$.easing.easeInOutQuad = function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((–t)*(t-2) – 1) + b;
};

// Para usarlo:
$(‘#elem’).animate({width:200},’slow’,’easeInOutQuad’);

9) El $.proxy()

Una de las desventajas de utilizar el retorno en funciones de jQuery siempre ha sido que cuando se ejecutan por un m茅todo de la biblioteca, el contexto se establece en un elemento diferente. Por ejemplo, si usted tiene este marcado:

<div id=”panel” style=”display:none”>
<button>Cerrado</button>
</div>

Y tratas de ejecutar este c贸digo:

$(‘#panel’).fadeIn(function(){
// Esto apunta a #panel
$(‘#panel button’).click(function(){
// Esto apunta al bot贸n
$(this).fadeOut();
});
});

Tu te encontrar谩s con un problema, el bot贸n desaparecer谩, m谩s no el panel. Con $.proxy, puedes escribirlo as铆:

$(‘#panel’).fadeIn(function(){
// Usando $.proxy para enlazarlo:

$(‘#panel button’).click($.proxy(function(){
// Esto apunta a #panel
$(this).fadeOut();
},this));
});

La funci贸n de $.proxy toma dos argumentos, su funci贸n original, y un contexto. Se devuelve una nueva funci贸n en la que el valor de este es siempre fija al contexto. Puedes leer m谩s acerca de $.Proxy en la documentaci贸n.

10) Determina el Peso de tu p谩gina

Un hecho simple: cuanto m谩s contenido tu p谩gina tiene, m谩s el tiempo que tarda el navegador para renderizar. Puedes obtener un conteo r谩pido del n煤mero de elementos DOM en tu p谩gina ejecutando esto en la consola:

console.log ($(‘*’).length);

Cuanto menor sea el n煤mero, m谩s r谩pida ser谩 el renderizado de la p谩gina web. Puedes optimizar mediante la eliminaci贸n de marcas redundantes y elementos de envoltura innecesarios.

11) Convierte tu c贸digo en un plugin jQuery

Si inviertes un poco de tiempo en escribir un fragmento de c贸digo jQuery, considera convertirlo en un plugin. Esto promueve la reutilizaci贸n de c贸digo, limita las dependencias y ayuda a organizar la base del c贸digo de su proyecto.

La creaci贸n de un plugin de jQuery no podr铆a ser m谩s f谩cil:

(function($){
$.fn.yourPluginName = function(){
// Tu c贸digo va aqu铆
return this;
};
})(jQuery);

Lee el tutorial detallado en convierte el c贸digo jQuery en un plugin.

12) Ajusta los valores por defecto de AJAX

Cuando se activen las peticiones AJAX en tu aplicaci贸n, a menudo ser谩 necesario que muestres alg煤n tipo de indicaci贸n de que una solicitud est谩 en curso. Esto se puede hacer mediante la visualizaci贸n de una animaci贸n de carga, o mediante una superposici贸n oscura. La gesti贸n de este indicador en la llamada $.get o $.post puede convertirse en algo tedioso.

La mejor soluci贸n es establecer valores predeterminados y globales de AJAX utilizando uno de los m茅todos de jQuery.

/ / AjaxSetup es 煤til para configurar los valores predeterminados generales:


$.ajaxSetup({
url: ‘/ajax/’,
dataType: ‘json’
});

$.ajaxStart(function(){
showIndicator();
disableButtons();
});

$.ajaxComplete(function(){
hideIndicator();
enableButtons();
});

/*
// M茅todos adicionales que puedes usar:
$.ajaxStop();
$.ajaxError();
$.ajaxSuccess();
$.ajaxSend();
*/

Lee la documentaci贸n acerca de funcionalidad de AJAX en jQuery.

13) Usa delay() para las animaciones

Encadenamiento de efectos de animaci贸n es una herramienta poderosa en la caja de herramientas de todos los desarrolladores de jQuery. Una de las caracter铆sticas m谩s pasada por alto es que se puede introducir retrasos entre las animaciones.

// Esto est谩 mal:
$(‘#elem’).animate({width:200},function(){
setTimeout(function(){
$(‘#elem’).animate({marginTop:100});
},2000);
});

// Hazlo as铆:
$(‘#elem’).animate({width:200}).delay(2000).animate({marginTop:100});

Para apreciar la cantidad de tiempo que salvamos de la animaci贸n de jQuery(), imag铆nate si tuvieras que manejar todo tu mismo: lo necesario para establecer tiempos de espera, analizar los valores de propiedad, realizar un seguimiento del progreso de la animaci贸n, cancelaci贸n, cuando proceda y actualizar numerosas variables en cada paso.

Lea la documentaci贸n sobre animaciones jQuery.

14) Usa los atributos de datos de HTML5

Los atributos de datos HTML5 son un simple medio para integrar los datos en una p谩gina web. Es 煤til para el intercambio de datos entre servidor y el front end, algo que sol铆a exigir la salida de bloques <script> o marcas ocultas.

Con los recientes cambios a los datos del m茅todo jQuery(), atributos de datos de HTML5 son atra铆dos autom谩ticamente y est谩n disponibles como entradas, como se puede ver en el siguiente ejemplo:

<div id=”d1″ data-role=”page” data-last-value=”43″ data-hidden=”true”
data-options='{“name”:”Juan”}’>
</div>

Para acceder a los atributos de datos de este div, utilizar铆a c贸digo como el siguiente:

$(“#d1”).data(“role”);聽聽聽 聽聽聽 聽聽聽 // “pagina”
$(“#d1”).data(“lastValue”);聽聽聽 聽聽聽 // 43
$(“#d1”).data(“hidden”);聽聽聽 聽聽聽 // true;
$(“#d1”).data(“options”).name;聽聽聽 // “Juan”;

Lee mas acerca de data() en la documentaci贸n de jQuery.

15) Almacenamiento local y jQuery

El almacenaje local es un simple API para guardar la informaci贸n en el lado del cliente. Simplemente agregando tu data como una propiedad global del objeto localStorage:

localStorage.theData = “Esto va a ser guardado entre las p谩ginas refrescadas y los browsers reiniciados”;

Las malas noticias es que no es soportado por viejos browsers. Esto es donde tu puedes usar uno de los muchos plugins de jQuery que proveen otras soluciones en caso de que localStorage no est茅 disponible, lo cual hace que el almacenaje del lado del cliente funcione casi siempre.

Aqui hay un ejemplo usando $.jStorage jQuery plugin:

// Revisa si la llave existe en el almacenaje
var value = $.jStorage.get(“key”);
if(!value){
// si no – carga la data desde el servidor
value = load_data_from_server();
// y salvalo
$.jStorage.set(“key”,value);
}

Si tienes alguna sugerencia que no has visto en la lista, utiliza la secci贸n de comentarios para compartirla con nosotros.

Fuente original del art铆culo: TutorialZine
Traducci贸n realizada por
elWebmaster.com

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder