Como usar jQuery sem conflito com outras bibliotecas JavaScript

Marcus Cavalcanti — Tue, 17 Feb 2009 04:47:30 +0000

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:

```
var $j = jQuery.noConflict();
```
```
$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:

```
   <script src="prototype.js">script>
```
```
   <script src="jquery.js">script>
```
```
   <script>
```
```
     jQuery.noConflict();
```
```
 
```

     // Put all your code in your document ready area

     jQuery(document).ready(function($){

```
       // Do jQuery stuff using $
```
```
       $("div").hide();
```
```
     });
```
```
 
```
```
     // Use Prototype with $(...), etc.
```
```
     $('someid').hide();
```
```
 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.

marcuscavalcanti.net » JavaScript

Como usar jQuery sem conflito com outras bibliotecas JavaScript