Usando duas bibliotecas Javascript sem conflito

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!