15 poderosos consejos y trucos de jQuery para desarrolladores

En este artículo, veremos 15 técnicas de jQuery que serán útiles para el uso eficaz de la biblioteca. Comenzaremos con algunos consejos sobre el rendimiento y continuaremos con breves introducciones a algunas de las características más oscuras de la biblioteca.

1) Utilice la última versión de jQuery

Con toda la innovación que tiene lugar en el proyecto jQuery, una de las formas más sencillas de mejorar el rendimiento de su sitio web es simplemente utilizar la última versión de jQuery. Cada versión de la biblioteca presenta optimizaciones y correcciones de errores, y la mayoría de las veces, la actualización implica solo cambiar una etiqueta de secuencia de comandos.

Incluso puede incluir jQuery directamente desde los servidores de Google, que brindan alojamiento CDN gratuito para varias bibliotecas de JavaScript.

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

El último ejemplo incluirá la última versión 1.6.x automáticamente a medida que esté disponible, pero como se indica en css-tricks, se almacena en caché solo durante una hora, por lo que es mejor que no lo use en entornos de producción.

2) Mantenga los selectores simples

Hasta hace poco, recuperar elementos DOM con jQuery era una combinación finamente coreografiada de cadenas selectoras de análisis, bucles de JavaScript y API integradas como getElementById() , getElementsByTagName() y getElementsByClassName() . Pero ahora, todos los principales navegadores admiten querySelectorAll() , que comprende los selectores de consultas CSS y brinda una mejora significativa en el rendimiento.

Sin embargo, aún debe intentar optimizar la forma en que recupera los elementos. Sin mencionar que muchos usuarios todavía usan navegadores antiguos que fuerzan a jQuery a atravesar el árbol DOM, lo cual es lento.

$('li[data-selected="true"] a')   // Fancy, but slow
$('li.selected a')  // Better
$('#elem')  // Best

Seleccionar por id es lo más rápido. Si necesita seleccionar por nombre de clase, prefijelo con una etiqueta - $('li.selected') . Estas optimizaciones afectan principalmente a navegadores y dispositivos móviles más antiguos.

Acceder al DOM siempre será la parte más lenta de cada aplicación de JavaScript, por lo que minimizarlo es beneficioso. Una de las formas de hacer esto es almacenar en caché los resultados que te da jQuery. La variable que elija contendrá un objeto jQuery, al que podrá acceder más adelante en su secuencia de comandos.

var buttons = $('#navigation a.button');

// Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');

Otra cosa que vale la pena señalar es que jQuery le brinda una gran cantidad de selectores adicionales para su conveniencia, como :visible , :hidden , :animated y más, que no son selectores CSS3 válidos. El resultado es que si los usa, la biblioteca no puede utilizar querySelectorAll() . Para remediar la situación, primero puede seleccionar los elementos con los que desea trabajar y luego filtrarlos, así:

$('a.button:animated');   // Does not use querySelectorAll()
$('a.button').filter(':animated');  // Uses it

Los resultados de los anteriores son los mismos, con la excepción de que el segundo ejemplo es más rápido.

3) Objetos jQuery como matrices

El resultado de ejecutar un selector es un objeto jQuery. Sin embargo, la biblioteca hace que parezca que está trabajando con una matriz definiendo elementos de índice y una longitud.

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');

// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
    console.log(buttons[i]);    // A DOM element, not a jQuery object
}

// We can even slice it:
var firstFour = buttons.slice(0,4);

Si lo que busca es rendimiento, use un simple for (o un while ) bucle en lugar de $.each() , puede hacer que su código sea varias veces más rápido.

Verificar la longitud también es la única forma de determinar si su colección contiene algún elemento.

if(buttons){  // This is always true
    // Do something
}

if(buttons.length){ // True only if buttons contains elements
    // Do something
}

4) La propiedad del selector

jQuery proporciona una propiedad que contiene el selector que se utilizó para iniciar la 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 apuntan al mismo elemento, los selectores son bastante diferentes. El segundo en realidad no es válido:no puede usarlo como base de un nuevo objeto jQuery. Solo muestra que el método de filtro se utilizó para reducir la colección.

5) Crear un objeto jQuery vacío

La creación de un nuevo objeto jQuery puede generar una sobrecarga significativa. A veces, es posible que deba crear un objeto vacío y completarlo con el método add() más tarde.

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

Esta es también la base del método quickEach() que puede usar como una alternativa más rápida al each() predeterminado. .

6) Seleccione un elemento aleatorio

Como mencioné anteriormente, jQuery agrega sus propios filtros de selección. Como con todo lo demás en la biblioteca, también puede crear el suyo propio. Para hacer esto, simplemente agregue una nueva función al $.expr[':'] objeto. Waldek Mastykarz presentó un caso de uso increíble en su blog:crear un selector para recuperar un elemento aleatorio. Puedes ver una versión ligeramente modificada de su código a continuación:

(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);

// This is how you use it:
$('li:random').addClass('glow');

7) Usa ganchos CSS

La API de enlaces CSS se introdujo para brindar a los desarrolladores la capacidad de obtener y establecer valores CSS particulares. Usándolo, puede ocultar implementaciones específicas del navegador y exponer una interfaz unificada para acceder a propiedades particulares.

$.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
            // -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};

// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

Lo que es aún mejor, es que la gente ya ha creado una rica biblioteca de enlaces CSS compatibles que puede usar de forma gratuita en su próximo proyecto.

8) Usar funciones de aceleración personalizadas

Probablemente ya haya oído hablar del complemento de aceleración de jQuery:le permite agregar efectos a sus animaciones. El único inconveniente es que este es otro archivo JavaScript que sus visitantes deben cargar. Afortunadamente, puede simplemente copiar el efecto que necesita del archivo del complemento y agregarlo al jQuery.easing objeto:

$.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;
};

// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

9) El $.proxy()

Uno de los inconvenientes de usar funciones de devolución de llamada en jQuery siempre ha sido que cuando se ejecutan mediante un método de la biblioteca, el contexto se establece en un elemento diferente. Por ejemplo, si tiene este marcado:

<div id="panel" style="display:none">
    <button>Close</button>
</div>

Y tratas de ejecutar este código:

$('#panel').fadeIn(function(){
    // this points to #panel
    $('#panel button').click(function(){
        // this points to the button
        $(this).fadeOut();
    });
});

Se encontrará con un problema:el botón desaparecerá, no el panel. Con $.proxy , puedes escribirlo así:

$('#panel').fadeIn(function(){
    // Using $.proxy to bind this:

    $('#panel button').click($.proxy(function(){
        // this points to #panel
        $(this).fadeOut();
    },this));
});

Que hará lo que esperas. El $.proxy La función toma dos argumentos:su función original y un contexto. Devuelve una nueva función en la que el valor de this siempre está fijo al contexto. Puede leer más sobre $.proxy en los documentos.

10) Determina el peso de tu página

Un hecho simple:cuanto más contenido tiene tu página, más tiempo le toma a tu navegador mostrarla. Puede obtener un recuento rápido de la cantidad de elementos DOM en su página ejecutando esto en su consola:

console.log( $('*').length );

Cuanto menor sea el número, más rápido se renderiza el sitio web. Puede optimizarlo eliminando el marcado redundante y los elementos de ajuste innecesarios.

11) Convierta su código en un complemento de jQuery

Si invierte algo de tiempo en escribir un fragmento de código jQuery, considere convertirlo en un complemento. Esto promueve la reutilización del código, limita las dependencias y lo ayuda a organizar la base de código de su proyecto. La mayoría de los tutoriales en Tutorialzine están organizados como complementos, por lo que es fácil para las personas simplemente colocarlos en sus sitios y usarlos.

Crear un complemento jQuery no podría ser más fácil:

(function($){
    $.fn.yourPluginName = function(){
        // Your code goes here
        return this;
    };
})(jQuery);

Lea un tutorial detallado sobre cómo convertir el código jQuery en un complemento.

12) Establecer valores predeterminados globales de AJAX

Al activar solicitudes AJAX en su aplicación, a menudo necesita mostrar algún tipo de indicación de que una solicitud está en curso. Esto se puede hacer mostrando una animación de carga o usando una superposición oscura. Administrar este indicador en cada $.get o $.post la llamada puede volverse tediosa rápidamente.

La mejor solución es establecer los valores predeterminados globales de AJAX utilizando uno de los métodos de jQuery.

// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
    url         : '/ajax/',
    dataType    : 'json'
});

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

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

/*
    // Additional methods you can use:
    $.ajaxStop();
    $.ajaxError();
    $.ajaxSuccess();
    $.ajaxSend();
*/

Lea los documentos sobre la funcionalidad AJAX de jQuery.

13) Usar delay() para animaciones

El 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 que más se pasa por alto es que puede introducir demoras entre animaciones.

// This is wrong:
$('#elem').animate({width:200},function(){
    setTimeout(function(){
        $('#elem').animate({marginTop:100});
    },2000);
});

// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

Para apreciar cuánto tiempo animation() de jQuery sálvanos, imagínate si tuvieras que gestionar todo tú mismo:tendrías que establecer tiempos de espera, analizar los valores de las propiedades, realizar un seguimiento del progreso de la animación, cancelar cuando corresponda y actualizar numerosas variables en cada paso.

Lea los documentos sobre animaciones jQuery.

14) Hacer uso de atributos de datos HTML5

Los atributos de datos HTML5 son un medio simple para incrustar datos en una página web. Es útil para intercambiar datos entre el servidor y el front-end, algo que solía requerir la salida de bloques

• Acelerador de llamadas de eventos en jQuery

• La función jQuery titleCaps

• 4 Complementos/Scripts de precarga de HTML5 y jQuery

• Easy jQuery AJAX PHP Captcha:configuración de 2 minutos

• Javascript (jQuery) deshabilita el desplazamiento de la página al arrastrar elementos

• devolución de llamada ajax de tablas de datos jQuery