Existen muchos beneficios al usar alguna de las librerías de javascript disponibles hoy en día (cómo han proliferado.. increíble). Facilitan escribir código y uno se concentra en mejores funcionalidades que en tratar de reinterpretar código. Y qúe decir de los efectos que cada vez vienen mejores… una delicia de utilizarlos.

Cuando uno comienza un proyecto, se suele elegir el mejor lenguaje para su desarrollo y una de las desiciones es elegir el framework JS con que se trabajará, y casarse con éste. Ahora vengo a conocer que ésta desición no tiene que ser tan drástica, ya que jQuery incluye una funcionalidad que permite que se utilice junto con otras librerías, evitando el conflicto de interpretación entre diferentes formas de escribir javascript que conforma cada framework; en esta ocasión mostraré los diferentes usos de noConflict();

Supongamos que tenemos un simple efecto de mostrar/esconder el contenido al activar un link, lo que se llama SlideToggle. El HTML sería el siguiente:

<a href="#" class="boton">Muestra/Esconde</a><br />
<div class="caja"><br />
     <p>Vivamus auctor leo vel dui...</p><br />
</div>

En Mootools el código para hacerlo funcionar se compone de la siguiente manera:

window.addEvent('domready', function() {<br />
     new Fx.Slide('mooMuestra').hide()<br />
     $('mooEsconde').addEvent('click', function(e){<br />
          e.stop();<br />
          new Fx.Slide('mooMuestra').toggle();<br />
     });<br />
});

[Ver ejemplo con Mootools][1]{.verejemplo}

Ya con jQuery, lo mismo se realiza de la siguiente manera:

$().ready(function(){<br />
     $('#jMuestra').hide();<br />
     $('#jEsconde').click(function(){<br />
          $('#jMuestra').slideToggle();<br />
     });<br />
});

[Ver ejemplo con jQuery][2]{.verejemplo}

Ahora combinaremos ambos métodos en un mismo archivo, el cual estará linkeando las librerías de Mootools 1.2.0 y jQuery 1.3.1, y se realizará SlideToggle cada una con su método. Para eso, se cambiará la manera con el cual jQuery llama a sus selectores (que es una de las principales razones de conflicto; el uso resumido con $). Primero, se linkea el framework de jQuery y luego el de Mootools. Se escriben los eventos con los cuales se realizan los SlideToggle, pero con un leve cambio en jQuery. En vez de utilizar:

$('selector').slideToggle();

se cambiará a:

jQuery.noConflict();<br />
jQuery('selector').slideToggle();

Esto se repetirá con cada selector en que antes utilizábamos $. Finalmente reciclando el mismo código mostrado anteriormente, quedaría:

jQuery.noConflict();<br />
jQuery().ready(function(){<br />
     jQuery('#jMuestra').hide();<br />
     jQuery('#jEsconde').click(function(){<br />
          jQuery('#jMuestra').slideToggle();<br />
     });<br />
});

[Ver ejemplo integrando jQuery+Mootools][3]{.verejemplo}

Otra manera es creando una variable con una nueva manera de escribir $, por ejemplo, $jQ:

var $jQ = jQuery.noConflict();<br />
$jQ().ready(function(){<br />
     $jQ('#jMuestra').hide();<br />
     $jQ('#jEsconde').click(function(){<br />
          $jQ('#jMuestra').slideToggle();<br />
     });<br />
});

[Ver ejemplo 2 integrando jQuery+Mootools][4]{.verejemplo}

[1]: http://www.csslab.cl/ejemplos/noConflict/mootools.html “Enlace en CSSLab a “Ver ejemplo con Mootools”” [2]: http://www.csslab.cl/ejemplos/noConflict/jquery.html “Enlace en CSSLab a “Ver ejemplo con jQuery”” [3]: http://www.csslab.cl/ejemplos/noConflict/ambos.html “Enlace en CSSLab a “Ver ejemplo integrando jQuery+Mootools”” [4]: http://www.csslab.cl/ejemplos/noConflict/ambos2.html “Enlace en CSSLab a “Ver ejemplo 2 integrando jQuery+Mootools””