Como usar jQuery sem conflito com outras bibliotecas JavaScript

Publicado em fevereiro 17, 2009

Estava trabalhando em uma página que já fazia o uso da biblioteca jQuery para apresentação de alguns componentes, contudo surgiu a necessidade de usar ajax nessa mesma página. Apesar da jQuery possuir um bom suporte para ajax, eu gosto muito também da prototype, pois além de ter mais prática (com ajax), também já tenho algumas customizações prontas.

Após incluir a prototype e testar a página, percebi que um erro de JavaScript estava ocorrendo, no começo achei que a causa do erro era em razão de uma função – usando a prototype – que eu tinha acabado de fazer, mas depois usando o bem dito firebug e fazendo alguns debugs, percebi que o erro era mesmo em um conflito entre a jQuery e a prototype.

O problema ocorre, pois as duas bibliotecas fazem o uso da função “$()” para acessar as suas funções, o que acaba gerando o conflito.

A biblioteca jQuery fornece algumas maneiras de resolver isso, mas todas giram em torno da função jQuery.noConflict(). A solução que oferece o maior custo x benefício na minha opinião, é a que eu não preciso alterar os meus métodos já existentes, ou seja, não precisaria ter que fazer isso:

  1. var $j = jQuery.noConflict();
  2. $j("div").hide();

No caso acima, se eu já tivesse N funções usando jQuery, eu precisaria fazer uma refatoração do meu código para mudar o método “chamador” das minhas funções de $() para $j(), isso geraria algum tempo perdido com muitas mudanças e muitos testes. A solução que encontrei pede apenas para que as funções fiquem dentro da document ready area da jQuery, então ficaria mais ou menos assim:

  1.    <script src="prototype.js"></script>
  2.    <script src="jquery.js"></script>
  3.    <script>
  4.      jQuery.noConflict();
  5.  
  6.      // Put all your code in your document ready area
  7.      jQuery(document).ready(function($){
  8.        // Do jQuery stuff using $
  9.        $("div").hide();
  10.      });
  11.  
  12.      // Use Prototype with $(...), etc.
  13.      $('someid').hide();
  14.  </script>

Da maneira acima eu não precisaria mudar nenhuma função já existente, bastaria apenas incluí-las dentro do bloco indicado.

Segundo a documentação, essa seria a solução mais adequada na maioria dos casos.

Web

Se você gostou desse tópico, por favor considere deixar um comentário ou se inscreva no feed e tenha no futuro todos os tópicos entregues diretamente no seu agregador.

Comentários

32 Respostas para “Como usar jQuery sem conflito com outras bibliotecas JavaScript”

Deixe seu Comentário

(obrigatório)

(obrigatório)