12 de julho de 2011  //  8 Comentários  //  Categorias: jQuery, Tutoriais

jQuery e Mootools juntos e sem conflito



Quem já não se deparou com este problema? Querer usar um plugin bacana em jQuery e outro em Mootools. Bom isto é possível e muito fácil de fazer.

Basicamente o conflito entre o jQuery e Mootools acontece porque ambos são instanciados pela mesma variável $.

Exemplo código em jQuery:

Exemplo código em Mootools:

Sendo assim, se você carregar primeiro jQuery e depois o Mootools, o jQuery não funciona e vice-versa. Isto acontece porque a variável $ assume a instancia do último objeto carregado.

Solução mais utilizada

A solução mais comum é instanciar o jQuery em outra variável através da função noConflict(), liberando assim a variável $ exclusivamente para o Mootools.

Utilizando os códigos de exemplo acima, teríamos o seguinte resultado:

O problema desta solução é que nem todas as extensões do jQuery são plugins, isto é, não estendem as funcionalidades do jQuery, mas sim, executam um script jQuery para determinado fim. Por exemplo, se carregarmos a extensão jQuery UI logo após carregarmos o jQuery, ela ira fucnionar funcionar perfeitamente pois ela estende as funcionalidades do jQuery sendo executado no momento do seu carregamento, onde a instancia do jQuery ainda está sobre a variável $.

A grande maioria dos scripts em jQuery iniciam com a instrução $(function(){ ou $(document).ready(function(){, por este motivo são executados após o carregamento completo da página, porém neste momento – após a página ser carregada ^^’ – a variável $ refere-se ao Mootools e não mais ao jQuery…

Neste caso, podemos fazer um replace nesses arquivos substituindo o carácter $ por $j. Funciona? Sim funciona! Mas está solução não é muito elegante…

Uma alternativa

Uma outra forma de lidar com este conflito – que na minha opinião é a melhor – é NÃO definindo uma variável para instanciar o jQuery e utiliza-lo dentro de seu namespace pela variável $.

Utilizando o mesmo exemplo acima, esta solução ficaria assim:

Em suas extensões jQuery basta você adicionar na primeira linha (function($) { e na ultima })(jQuery);.

A vantagem desta solução é que suas extensões funcionam em qualquer ambiente e o código fica mais amigável.

Qual você deve utilizar? Bom, isso você decide.

Quer copiar esse post no seu site? Você pode!

Segundo a licença da Creative Commons 3.0 (CC BY SA 3.0) você pode copiar e distribuir esse conteúdo desde que faça menção ao autor original, para isso é só copiar esse código no final do artigo quando for publicá-lo em seu site:

<p>Artigo originalmente publicado em <em>12 de julho de 2011</em> por <strong><a href="http://pedroelsner.com/" title="Pedro Elsner, Profissional de TI - São Paulo">Pedro Elsner</a></strong>: <a href="http://pedroelsner.com/2011/07/jquery-e-mootools-juntos-e-sem-conflito/" title="jQuery e Mootools juntos e sem conflito">jQuery e Mootools juntos e sem conflito</a></p>
A não menção ao autor original da obra implicará em cópia e/ou distribuição ilegal de propriedade intelectual, o que é crime segundo a Lei n.º 9.610.
  • Rafael Oliveira Andrade

    Funcionou como mágica! muito obrigado Pedro.

  • Valeu, Pedro. Um zilhão de resultados no Google, e só o seu está realmente bem explicado, e a ‘última alternativa’ funcionou perfeitamente.

    Muito obrigado pelo esclarecimento prestado. Abraço!

  • Valeu Thiago =)

  • Heverton Castro

    Perfeito! Muito boa a explicação!

  • Emerson

    Nossa! Você salvou minha vida… a primeira alternativa deu certo.

  • Pablo A. Sesterheim

    Olha raramente eu comento algo, mas esse merece, funcionou perfeitamente, parabéns pelo trabalho e muito obrigado !

  • You are welcome! =)

  • BSilvaBlog

    Muito bom!
    Parabéns!

    O que eu estava precisando, depois de 3 horas de erro!

    Acabei utilizando a primeira opção!

    Vlw!!