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!

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

Redes Sociais

• 

Tags | javascript, jquery, mootools, prototype