A maioria das bibliotecas javascript usam o símbolo $ como apelido das suas funções básicas. O jQuery, disponibiliza naturalmente duas formas de uso, com o $ e com a palavra jQuery.
Não existe conflito de jQuery + jQuery!
Se você tem um plugin que usa a lib jQuery, como um lightbox por exemplo, e precisa adicionar um tooltip que também usa a lib jQuery, importe apenas uma única vez a lib jQuery.
Tão simples quanto isso. Não existe conflito entre jQuery + jQuery. Apenas não importe duas vezes a mesma lib, mesmo que em versões diferentes. Nesse caso, deixe apenas uma tag <script>, com um src para a lib, acima de todos os outros recursos (prefira usar sempre versões mais recentes), e pronto.
O método .noConflict() existe para conflitos entre bibliotecas javascript diferentes, como Prototype + jQuery, jQuery + MooTools…
Como funciona o jQuery.noConflict()
noConflict: function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
},
Note que a única coisa que esse método faz é retornar um objeto jQuery existente (já registrado no documento). Por isso que a forma de usar nos induz a ‘trocar o nome’ do apelido:
var $a = jQuery.noConflict()
E então, em vez de usar $, agora passo a usar $a
$a(document).ready(function(){
$a is null
Esse é o erro que aparecerá, caso você tente primeiro usar jQuery, e depois prototype. Apenas a segunda lib vai funcionar, pois ela vai sobrescrever o uso do $.
Resolvendo com noConflict()
Basta atribuir o novo objeto jQuery a um outro apelido, e então usá-lo:
$a = jQuery.noConflict();
$a(document).ready(function() {
$a(‘#gallery a’).lightBox();
});
Não sou muito fã dessa forma de resolver, pois daria o trabalho de reescrever todo o script que dependesse de jQuery. Fora que não ficou ‘intuitivo’ esse uso.
Resolvendo apenas ao não usar o apelido $
No início deste artigo, eu disse que a lib disponibiliza também a variável jQuery para ser usada.
jQuery(document).ready(function() {
jQuery(‘#gallery a’).lightBox();
});
Portanto, se sempre que eu tiver que fazer algo com jQuery não usar o símbolo $, mas sim a variável jQuery, não preciso me preocupar com conflito, pois apenas a outra lib usaria o alias $.
Resolvendo apenas passando um argumento
ready: function( fn ) {
// Attach the listeners
jQuery.bindReady();
// Add the callback
readyList.done( fn );
return this;
},
Esse é o trecho de código da li, responsável pelo método .ready() que usamos para aguardar o DOM carregar. Note que o parâmetro do método é a nossa function anônima que expliquei no post ‘Aprendi jQuery, e agora?‘. O que posso fazer é forçar um argumento $ e então me aproveitar da clousure limitando o escopo do nosso alias:
jQuery(document).ready(function( $ ) {
$(‘#gallery a’).lightBox();
});
Bacana, né?! Não precisei mexer em nada dentro do método .ready(), apenas iniciei ele com a variável jQuery e forcei a lib a me devolver o argumento $ como um objeto jQuery exclusivo desse escopo.
Usando uma função anônima autoexecutável
Da mesma forma que a solução acima, eu poderia ter feito uma clousure, e:
(function( $ ){
$(document).ready(function( $ ) {
$(‘#gallery a’).lightBox();
});
})(jQuery);
O parâmetro ‘para o mundo externo’ a essa anônima é jQuery, mas, dentro dela, o argumento que recebo é um $. Lindo, não?
Aqui você pode ver uma demonstração online.
É isso. Se você conhece alguma outra forma, não entendeu, ou curtiu o artigo, comente. Até a próxima!
Fonte: William Bruno/IMaster
Comentário SWX
A muito, muito tempo atrás, tive um problemas relacionado a conflito entre bibliotecas JavaScript. Fique tão feliz quando resolvi que acabei criando um blog para postar a solução. meucodex.wordpress.com 🙂
Vinicius Castro
Obrigado por citar a fonte, e divulgar meu artigo.
[]s! e sucesso!