Como usar várias versões do jQuery na mesma página.

Em um projeto em que estou trabalhando faz o uso do jQuery na versão 1.x, e Os novos requisitos requerem algumas funcionalidades que só foram introduzidas recentemente na biblioteca jQuery, portanto, tive que verificar como utilizar mais de uma versão na mesma pagina.

Não posso exigir que eles atualizem para a versão mais recente do jQuery, pois o sistema atual é muito dependente da versão desatualizada e isso causaria um grande impacto na aplicação.

Descobri que existe uma maneira de carregar uma versão mais nova do jQuery para usar somente dentro do contexto do nosso código, que não irá interferir ou afetar qualquer código anterior.

Para isso basta utilizar a função noConflict. Segue o que diz a documentação do jQuery.

jQuery.noConflict(true): calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.

Montando uma pagina com diversos jQqueys

Este é um exemplo completo de como podemos carregar varias instancias diferentes do jQuery ao mesmo tempo em nossa pagina. Embora não recomendado, esta pode ser a saída mais simples para sistemas legado em que o esforço para uma migração é muito grande e o uso de novos métodos é restrito a poucas paginas ou operações.

Se olha no exemplo, note que chamei o método que retorna a versão do jQuery 3 vezes, cada um utilizando uma versão diferente que foi carregada anteriormente.

<!DOCTYPE html>
<html>
    <head>
        <title>Carregando varios jQuerys</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>Retorno de <i>$().jquery</i>: <strong><span id="v1"></span></strong></div>
        <div>Retorno de <i>$j2().jquery</i>: <strong><span id="v2"></span></strong></div>
        <div>Retorno de <i>$j3().jquery</i>: <strong><span id="v3"></span></strong></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script>var $j2 = jQuery.noConflict(true);</script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>var $j3 = jQuery.noConflict(true);</script>
        <script>
            $(document).ready(function () {
                $j3('#v1').html($().jquery);
                $j2('#v2').html($j2().jquery);
                $('#v3').html($j3().jquery);
            });
        </script>
    </body>
</html>

Se ainda ficou alguma duvida ou se precisa realizar algum teste, basta copiar o exemplo acima e realizar as alterações que desejar.

Saída do exemplo

Caso tenha rodado o exemplo acima, esta foi a saída que você foi apresentada em seu navegador.

Retorno de $().jquery: 1.12.4
Retorno de $j2().jquery: 2.2.4
Retorno de $j3().jquery: 3.3.1

Podemos notar que o carregamento de todas as versões aconteceu com sucesso e para usa-los é simples, quando quiser a versão “original” do sistema utilize $., para utilizar a versão 2 e 3 , basta utilizar $j2. e $j3. respectivamente.

Já fiz uso deste recurso em alguns projetos e funcionam perfeitamente.

Qualquer dúvida ou dicas, entre em contato: leandrolt@gmail.com

4 comments for “Como usar várias versões do jQuery na mesma página.

  1. Rodrigo Imparato
    24/10/2019 at 19:55

    Cara, mutio obrigado pelo post! Um tiro certo par aum problema bem comum!

    • lisura
      28/10/2019 at 01:14

      Obrigado pelo comentário. Fico feliz em ter ajudado.

  2. Rodrigo Imparato
    24/10/2019 at 19:56

    Cara, muito obrigado pelo post! Um tiro certo para um problema bem comum e chato de achar uma solução.

    • lisura
      28/10/2019 at 01:17

      Rodrigo. Obrigado pelo comentário.
      Recebi seu e-mail

      Mas surgiu uma versão do problema.
      Como boa prática, um método foi separado em um arquivo js.
      E esse método eu preciso testar na versão mais atual, e deixar os outros arquivos na versão antiga.
      Tem solução para isso?

      Ainda não tive tempo de testar uma possível solução mas assim que tive um tempo eu te respondo com o que eu consegui alcançar.

Leave a Reply

Your email address will not be published. Required fields are marked *