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

Leave a Reply

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