En este artículo vamos a ver qué es jQuery no-conflict y la importancia del mismo. También aprenderemos cómo podemos utilizar diferentes versiones de jQuery en la misma página de acuerdo a su necesidad. jQuery no-conflict es una opción propuesta por jQuery para solucionar los conflictos entre diferentes frameworks o bibliotecas de javascript que utilizan esta librería. Cuando usamos el modo de no-conflicto de jQuery, estamos reemplazando el $ a una nueva variable para asignarla a jQuery. Aquí, en este artículo vamos a explicar esta característica en profundidad y también te vamos a mostrar una demostración de la utilización de distintas versiones de jQuery en una sola página. ¿Te gusta la idea? Pues entramos en faena.
Puedes descargar el código fuente de jQuery no-conflict en este enlace.
Uso de jQuery no-conflict
Como todos sabéis, algunas bibliotecas JavaScript utilizan también el $ (que es la referencia por defecto de jQuery) como una función o nombre de variable, al igual que hace jQuery. Creo que una de las virtudes de la programación es la de no estar atado a una librería, como jQuery. En nuestros proyectos, lo suyo es utilizar siempre las librerías que se adapten a nuestras necesidades. ¿Verdad? Personalmente, utilizo diferentes bibliotecas en mis proyectos para llevar a cabo diferentes tareas, pero siempre hay problemas y tengo que estar obligado a seleccionar una de ellas ya que entran en conflicto. Volviendo al caso de jQuery, muchas veces os habréis topado con el problema de agregar distintas bibliotecas en un proyecto web y ver que la variable $ es usada por varias de ellas. Estamos en un problema de conflictos, y esto es difícil de solucionar. ¿Qué podemos hacer ante esta disyuntiva?
Es decir, tenemos una pizza a repartir entre varios ganadores. Si nos ponemos en el símil web, la pizza solo la podemos asignar a uno de esos ganadores. Si esto ocurriese en la vida real, podríamos compartir la pizza entre los ganadores para que no hubiese conflicto. ¿Cómo hacer esto con jQuery? Muy sencillo, tenemos la opción de utilizar jQuery no-conflict, la solución a los problemas de conflicto de jQuery. A continuación vamos a explicarte como utilizar esta opción.
Lo primero que quiero hacer es crear una página HTML.
<!DOCTYPE html> <html> <head> <title>JQuery noConflict - Sibeesh Passion</title> </head> <body> JQuery noConflict - Sibeesh Passion </body> </html>
Los siguiente que habrá que hacer es agregar las referencias:
<script src="prototype.js">script> <script src="JQuery%20Versions/jquery-1.11.1.min.js">script>
En este ejemplo estamos usando una versión antigua de prototype y otra de jquery juntas. Si haces esto sin utilizar la opción de no-conflict en tus proyectos, entrarás en un problema de conflicto, a no ser que estés utilizando una versión nueva de prototype, la cual ya han hecho compatible con jQuery para poder evitar estos desagradables problemas.
Entonces, ¿qué hacer si encuentras algún problema de este tipo? Muy sencillo, mantendremos la variable $ para prototype y crearemos una nueva, la cual llamaremos $jq, para jQuery. Aquí podéis verlo en el ejemplo:
<script> // Give $ back to prototype.js; create new alias to jQuery. var $jq = jQuery.noConflict(); script>
Ahora podrás utilizar $jq como referencia de jQuery:
<script> $jq(document).ready(function () { $jq("#btn").on('click', function () { alert('Clicked'); }); }); script>
Este sería el código completo:
<!DOCTYPE html> <html> <head> <title>JQuery noConflict - Sibeesh Passion</title> <script src="prototype.js">script> <script src="JQuery%20Versions/jquery-1.11.1.min.js">script> <script> // Give $ to prototype.js var $jq = jQuery.noConflict(); script> <script> $jq(document).ready(function () { $jq("#btn").on('click', function () { alert('Clicked'); }); }); script> </head> <body> JQuery noConflict - Sibeesh Passion <br /> <br /> <br /> <input type="button" value="" id='btn' /> </body> </html>
Cómo utilizar distintas versiones de jQuery en un proyecto
Ahora, pongámonos en el caso de querer usar distintas versiones de jQuery en un mismo proyecto. A mi personalmente me ha pasado el caso de tener que añadir nuevas funciones de jQuery a una página web antigua la cual hacia uso de antiguas versiones de jQuery. Como sabéis, jQuery se va actualizando y hay funciones que se quedan desfasadas y que en las nuevas versiones no son operativas. En mi viejo proyecto, se hacía uso de esas funciones por lo que la dependencia hacia esas versiones antiguas era brutal. Con jQuery no-conflict es posible usar distintas versiones de jQuery en un mismo proyecto. Por lo que, ya podríamos agregar la nueva versión de jQuery al antiguo proyecto, respetando las versiones desfasadas de jQuery. ¿Cómo llevarlo a cabo?
A continuación, os voy a poner un ejemplo en el que utilizo varias versiones de jQuery. Lo primero de todo que debemos hacer es agregar todas las referencias a la página:
<script src="JQuery%20Versions/jquery-1.9.0.min.js">script> <script src="JQuery%20Versions/jquery-1.10.1.min.js">script> <script src="JQuery%20Versions/jquery-1.11.0.min.js">script> <script src="JQuery%20Versions/jquery-1.11.1.min.js">script> <script src="JQuery%20Versions/jquery-1.11.3.min.js">script>
Ahora, vamos a agregar unos botones con los cuales podremos especificar qué versión de jQuery se utilizará en la página:
<input type="button" value="Use jQuery 1.9.0" id='btn190' /> <input type="button" value="Use jQuery 1.10.1" id='btn1101' /> <input type="button" value="Use jQuery 1.11.0" id='btn1110' /> <input type="button" value="Use jQuery 1.11.1" id='btn1111' /> <input type="button" value="Use jQuery 1.11.3" id='btn1113' />
Ahora crearemos distintas variables para cada versión:
<script src="JQuery%20Versions/jquery-1.9.0.min.js">script> <script> var jQuery190 = jQuery.noConflict(); window.jQuery = jQuery190; script> <script src="JQuery%20Versions/jquery-1.10.1.min.js">script> <script> var jQuery1101 = jQuery.noConflict(); window.jQuery = jQuery1101; script> <script src="JQuery%20Versions/jquery-1.11.0.min.js">script> <script> var jQuery1110 = jQuery.noConflict(); window.jQuery = jQuery1110; script> <script src="JQuery%20Versions/jquery-1.11.1.min.js">script> <script> var jQuery1111 = jQuery.noConflict(); window.jQuery = jQuery1111; script> <script src="JQuery%20Versions/jquery-1.11.3.min.js">script> <script> var jQuery1113 = jQuery.noConflict(); window.jQuery = jQuery1113; script>
Una vez creadas estas variables, lo siguiente sería asignar el uso de las distintas librerías de jQuery al evento click de cada botón:
<script> jQuery190(document).ready(function ($) { //The codes for jQuery 1-9-0 $("#btn190").on('click', function () { alert($.fn.jquery); }) }); jQuery1101(document).ready(function ($) { //The codes for jQuery 1-10-1 $("#btn1101").on('click', function () { alert($.fn.jquery); }) }); jQuery1110(document).ready(function ($) { //The codes for jQuery 1-11-0 $("#btn1110").on('click', function () { alert($.fn.jquery); }) }); jQuery1111(document).ready(function ($) { //The codes for jQuery 1-11-1 $("#btn1111").on('click', function () { alert($.fn.jquery); }) }); jQuery1113(document).ready(function ($) { //The codes for jQuery 1-11-3 $("#btn1113").on('click', function () { alert($.fn.jquery); }) }); script>
Y esto sería todo. Tampoco ha sido muy complicado, ¿verdad? Te animamos desde aquí a que compartas con nosotros tu experiencia con la opción no-conflict de jQuery. ¿Te ha solucionado muchos problemas? ¿Qué hacías antes de encontrarte con esta solución? Dínoslo en los comentarios...