jQuery sin conflictos
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>
<div class="caja">
<p>Vivamus auctor leo vel dui...</p>
</div>
En Mootools el código para hacerlo funcionar se compone de la siguiente manera:
window.addEvent('domready', function() {
new Fx.Slide('mooMuestra').hide()
$('mooEsconde').addEvent('click', function(e){
e.stop();
new Fx.Slide('mooMuestra').toggle();
});
});
Ya con jQuery, lo mismo se realiza de la siguiente manera:
$().ready(function(){
$('#jMuestra').hide();
$('#jEsconde').click(function(){
$('#jMuestra').slideToggle();
});
});
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();
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();
jQuery().ready(function(){
jQuery('#jMuestra').hide();
jQuery('#jEsconde').click(function(){
jQuery('#jMuestra').slideToggle();
});
});
Ver ejemplo integrando jQuery+Mootools
Otra manera es creando una variable con una nueva manera de escribir $, por ejemplo, $jQ:
var $jQ = jQuery.noConflict();
$jQ().ready(function(){
$jQ('#jMuestra').hide();
$jQ('#jEsconde').click(function(){
$jQ('#jMuestra').slideToggle();
});
});
Muy bueno, yo nunca he probado Mootools.
Lo que si es que preferiría usar sólo un framework antes de mezclar tanta cosa.
Opino igual que Rodrigo, no mezclaría 2 frameworks. Realmente no le encuentro un sentido.
Entiendo que hay veces que no existen plugins para jquery y para mootools sí; y es aquí cuando combinar los 2 frameworks se vuelve útil pero, prefiero ingeniar algo yo mismo en ves de usar 2 frameworks. Sinceramente.
@ivanfc0o, noConflict(); tambien puede ser utilizado con versiones anteriores del propio jQuery por ejemplo si quieres actualizar tu sitio q usa la version 1.x a 1.3+ pero solo determinada funiconalidad… muchos plugins la estan implementando para mayor retro-compatibilidad.
yo también prefiero utilizar solo una librería, pero cuando estas desarrollando algún proyecto entre varias personas, nunca falta alguien que comience a meterle las librerías que se le antojan, es por esto que jQuery es una de mis favoritas, por la forma en cómo maneja el namespace.
saludos
Nee.. no me gustan los frameworks.. son para crear software Industrial!.. le quitan todo el sabor a la programacion, que wueba, programar sin un reto! que es lo sabraso de la programación.. pero bueno hay que industrializar!.. y prefiero construir mis librerias …
fantastico resolvi mi problema… gracias!!!
hola brother si que eres bueno.. en lo que haces..me ayudo mucho tu explicacion..ya lo habia encontrado esta solucion en otro lado pero aqui lo entendi a la perfeccion eres grande ….
gracias por la explicación muy clara, me sirvio para resolver mi problema, eres grande amigo, saludos desde Argentina