15 tips para desarrolladores de jQuery

jQuery 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 y Traducción realizada por elWebmaster.com