jQuery: cómo usar el alias "$" sin conflictos

Seguro que alguna vez estabais desarrollando en jQuery y, por algún motivo, el código no funcionaba. Miramos la consola JavaScript del navegador y nos encontramos con un error bien rojo que dice «$ is not a function». Es bastante probable que esto ocurra porque, además de jQuery, estáis utilizando otra librería que también emplea el alias $ y nos provoca un conflicto.

El símbolo peso/dólar ($) no es otra cosa que un alias (bastante abreviado) para la palabra «jQuery».

$(document).ready(function() {
    $(".item").fadeIn();
});

Esto quiere decir que escribir «jQuery» en nuestros scripts jQuery en lugar de «$» nos solucionaría este problema, puesto que «$» quedaría libre para el resto de librerías. Caso aparte es que haya más de una que utilizan el $, por lo que esas seguirían teniendo un conflicto entre ellas, pero jQuery no entraría en esa batalla.

jQuery(document).ready(function() {
    jQuery(".item").fadeIn();
});

También cabe la opción de crear un alias personalizado (por ejemplo «jq» y nos ahorramos de paso unas letras). Esto nos asegura un buen funcionamiento, pero hace el código demasiado personal y puede que hasta confuso si el alias no es lo suficientemente intuitivo:

jq = $.noConflict(); /* En vez de 'jq' se podría poner el nombre de tu perro y ahí la liamos */
jq(document).ready(function() {
    jq(".item").fadeIn();
});

Pero surge otra opción que creo que es la mejor de todas: definir el alias $ como parámetro en una función autoinvocable. Esta función se ejecuta automáticamente al inicio del script, por lo que podría ser buena idea englobar todo nuestro código dentro de esta función. Así nos da igual que fuera también se utilice, porque le estamos diciendo que corresponde a jQuery y lo tenemos controlado:

(function($) {
    $(".item").fadeIn();
    /* Dentro de la función: "$()" = "jQuery()" */
})(jQuery);
/* Fuera de la función: "$()" NO es "jQuery()" */

Esto significa «todo selector ‘$’ que encuentres dentro de este bloque de código significa ‘jQuery'». De esta manera tenemos una serie de ventajas añadidas como son:

1) Solo escribimos un caracter ($) frente a los 6 de «jQuery». A la larga se nota mucho.

2) Seguimos la convención más extendida, lo que hará nuestro código más legible para otros desarrolladores.

3) Relacionado con el punto anterior, tendremos una mayor compatibilidad con plugins y códigos que encontremos en Internet, pues la inmensa mayoría usa la notación «$».

Existe otra opción que no es tan completa como la anterior pero está bien mencionar. En vez de pasarle el «$» como parámetro a la función exterior autoinvocable podemos pasárselo solo al ready o al bloque de código que nos interese, si por algún motivo nos conviene hacerlo por separado:

jQuery(document).ready(function($) {
    $(".item").fadeIn();
});

Y tú, ¿has tenido alguna vez ese error? ¿Qué solución prefieres?

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 3,00 sobre 5)
Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes


Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada.

1 Comentarios

TimothyDen

I’m impressed, I have to say. Really hardly ever do I encounter a weblog that’s both educative and entertaining, and let me tell you, you've got hit the nail on the head. Your thought is excellent; the difficulty is something that not enough individuals are speaking intelligently about. I am very comfortable that I stumbled throughout this in my seek for one thing regarding this.