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