7

Quais as boas prácticas para evitar conflictos entre as bibliotecas jQuery e Mootools?

Este exemplo dá o erro Uncaught TypeError: Object [object Object] has no method 'fade'

//codigo Mootools
$('sobreCamada').fade('in');

//codigo jQuery
setTimeout(function () {
    $('#sobreCamada').fadeIn().delay(1000).fadeOut(function () {
        $(this).remove()
    });
}, 2000);
3
  • 2
    Trabalho bastante com Mootools e sei que há pouca documentação sobre esta questão em Português, daí a pergunta-resposta.
    – Sergio
    20/12/2013 às 23:59
  • Dado a perguntar ter pouco conteúdo, o sistema sinaliza a mesma para revisão por esse motivo. Sugeria aplicar um ou outro erro comum resultante do referido conflito. Desta forma a pergunta tem algum código e conteúdo. Por outro lado, é interessante para que no futuro quem se depare com este problema sem saber que é uma questão de conflito, através dos erros na pergunta, vai conseguir associar e ver a resposta :)
    – Zuul
    21/12/2013 às 0:32
  • @Zuul, tens razão. Adicionei um exemplo. Obrigado.
    – Sergio
    21/12/2013 às 8:20

2 Respostas 2

10

Uma vez que ambos Mootools, jQuery (e até Prototype) usam o dollar $, o dollar é o problema que tem de ser resolvido e a fonte de conflito entre as dua bibliotecas.

O mootools usa o $() para selecionar elementos pelo ID. Assim o código Mootools $('meuId') é o semelhante ao método do jQuery $('#meuId'). O Mootools tem uma alternativa para selecionar um elemento pelo ID, usando document.id('meuId');

Opcções diferentes:


  • Ordem de carregamento dos scripts:

O Mootools detecta se o dollar $ já está a ser utilizado e não re-declara a função $(), assim, se o Mootools fôr o ultimo a carregar o problema deve desaparecer. Neste caso deve usar-se document.id() no Mootools em vêz de $();


  • jQuery.noConflict()

O jQuery tem um método para libertar o dollar e entrar em modo de não conflito. Na prática até é possivel usar var jQ = jQuery.noConflict(); e daí em diante chamar o jQuery por jQ() em vez de $() ou jQuery(). O mais habitual é usar jQuery() em vez de $(), como é o caso do Wordpress que carrega o jQuery em modo de não conflito.


  • (function($){/*...*/})(jQuery)

Outra opção é mudar o scope do dollar. Passando o dollar como parâmetro de uma função anónima, esta soluçõa é prática para empacotar código já existente sem ter de mudar todos os $ para jQuery. Esta variante precisa tambem da declaração jQuery.noConflict().

3

Para evitar conflito entre essas bibliotecas você pode criar um closure e limitar para um certo escopo as variáveis criadas e definidas

Para fazer isso em JavaScript utilizamos de funções

function criarClosure(){
    //Aqui está definido um closure
    //E todas as variáveis estão limitadas ao escopo da função
}

Então no caso do jQuery, você pode criar uma função anônima que já é executada

(function($){
    //Utilização padrão do jQuery
    $(document).ready(function(){
        ...
    });
})(jQuery); //Nessa linha executamos a função definida sem conflitos

No site do jQuery existem mais informações sobre isso (em inglês)

Avoiding Conflicts with Other Libraries

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .