noConflict jQuery – Usando 2 bibliotecas javascript [ alias $ ]
A maioria das bibliotecas javascript usam o símbolo $ como apelido das suas funções básicas.
O jQuery, disponibiliza naturalmente 2 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, sei lá, um lightbox por exemplo. E depois 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 2 vezes a mesma lib, mesmo que em versões diferentes. Nesse caso, deixe apenas uma tag
O método .noConflict(), existe para conflitos entre bibliotecas javascript diferentes, como Prototype + jQuery, jQuery + MooTools..
Como funciona o jQuery.noConflict() ? {##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(){
$(“bla bla bla”) is null
Esse é o erro que aparecerá, caso vc 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 usar ele então:
$a = jQuery.noConflict();
$a(document).ready(function() {
$a('#gallery a').lightBox();
});
não sou muito fãn 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 post, 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 variavel 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 lib, 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?‘.
Oque 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 ne?! não precisei mecher em nada dentro do método .ready(), apenas iniciei ele com a variavel jQuery, e forcei a lib a me devolver o argumento $, como um objeto jQuery exclusivo desse escopo.
Usando uma função anônima auto executá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?
Demonstração Online
É isso. Se vc conhece alguma outra forma, não entendeu, ou curtiu, comente. =)