jQuery / noConflict() com outras bibliotecas e versões
jQuery.noConflict() restaura o $ global anterior e retorna a função jQuery atual. Guarde como jq para conviver com o dollar de outra biblioteca. true também restaura o nome jQuery anterior, sem resolver compatibilidade de APIs ou plugins.
Chamada normal e true
jQuery.noConflict() usa referências guardadas na inicialização. Por padrão restaura $ e mantém jQuery; true restaura ambos. Sem valor anterior não cria uma biblioteca antiga.
Retorna a mesma função, não uma cópia. jq("selector") e jq.ajax() continuam disponíveis. Atribuir $ global novamente a jQuery ocuparia o nome outra vez; prefira escopo local.
Exemplo completo com outro dollar
Salve tudo em UTF-8 como noconflict-demo.html e abra. A Internet carrega o arquivo oficial do jQuery 4.0.0. Não exige servidor nem pacotes. A primeira função simula outro proprietário, não uma biblioteca real.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Return the global dollar alias</title>
<script>
// A mock owner, not a real third-party library.
window.$ = function () { return "other library"; };
window.previousDollar = window.$;
</script>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
const jq = jQuery.noConflict();
jq(function ($) {
let clicks = 0;
function report() {
$("#result").text(`global dollar=${window.$()}\noriginal dollar restored=${window.$ === window.previousDollar}\nglobal jQuery kept=${window.jQuery === jq}\nlocal alias=${$ === jq}\nclicks=${clicks}`);
}
$("#add").on("click", function () { clicks++; report(); });
$("#reset").on("click", function () { clicks = 0; report(); });
report();
});
</script>
<style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
<button type="button" id="add">Use local jQuery</button>
<button type="button" id="reset">Reset counter</button>
<pre id="result" aria-live="polite"></pre>
</body>
</html>Saída inicial. $ global é restaurado, jQuery e $ local usam jQuery. Foi executado separadamente no Edge para Windows com 3.7.1 e 4.0.0.
global dollar=other library
original dollar restored=true
global jQuery kept=true
local alias=true
clicks=0- Três Use local jQuery resultam em clicks=3 com manipulador local.
- global dollar continua other library; original dollar restored=true compara a identidade original.
- Reset counter volta a zero sem recarregar.
O callback de DOM pronto jq(function ($) { ... }) recebe a função chamadora. Seu $ local difere de window.$. Preserve o escopo ao mover código. Setas também recebem parâmetros; this de eventos exige revisão separada.
Exemplo completo com duas versões
Salve separadamente two-versions-demo.html. Carregue 3.7.1 como legacy, depois 4.0.0 e guarde noConflict(true) como modern. Preserve a ordem e não acrescente async.
Prefira uma versão por site. O diagnóstico explica nomes em páginas mistas existentes. lessonOnly é um plugin simulado, não teste real de compatibilidade.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Two jQuery instances with explicit owners</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
const legacy = jQuery;
legacy.fn.lessonOnly = function () { return "legacy plugin"; };
</script>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
const modern = jQuery.noConflict(true);
modern(function ($) {
let oldClicks = 0, newClicks = 0;
const element = document.getElementById("shared");
legacy(element).data("owner", "legacy");
modern(element).data("owner", "modern");
function report() {
$("#result").text([
"global jQuery=" + window.jQuery.fn.jquery,
"global dollar=" + window.$.fn.jquery,
"modern alias=" + modern.fn.jquery,
"same function=" + (legacy === modern),
"legacy plugin=" + legacy("#shared").lessonOnly(),
"modern plugin=" + typeof modern.fn.lessonOnly,
"shared data=" + legacy(element).data("owner") + "/" + modern(element).data("owner"),
"legacy clicks=" + oldClicks + "; modern clicks=" + newClicks
].join("\n"));
}
legacy("#old").on("click", function () { oldClicks++; report(); });
modern("#new").on("click", function () { newClicks++; report(); });
modern("#reset").on("click", function () { oldClicks = newClicks = 0; report(); });
report();
});
</script>
<style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
<p id="shared">One DOM element, two instance-specific data stores.</p>
<button type="button" id="old">Legacy handler</button>
<button type="button" id="new">Modern handler</button>
<button type="button" id="reset">Reset counters</button>
<pre id="result" aria-live="polite"></pre>
</body>
</html>Saída inicial verificada com ambas as versões reais juntas no Edge para Windows.
global jQuery=3.7.1
global dollar=3.7.1
modern alias=4.0.0
same function=false
legacy plugin=legacy plugin
modern plugin=undefined
shared data=legacy/modern
legacy clicks=0; modern clicks=0- Nomes globais voltam a 3.7.1; modern mantém 4.0.0.
- Legacy handler uma vez e Modern handler duas resultam em legacy clicks=1; modern clicks=2.
- lessonOnly pertence só a legacy.fn; modern plugin=undefined. O mesmo nó retorna dados owner legacy/modern.
- Reset counters reinicia apenas contadores, sem mudar nomes ou ordem.
Limites da separação de nomes
As duas instâncias manipulam o mesmo documento. Plugins e .data() são separados, mas remoções DOM e atributos são compartilhados. Registre qual instância possui eventos e limpeza. Aliases não criam páginas independentes.
Um plugin que usa jQuery global se registra na instância presente ao carregar. Após restauração profunda não se instala automaticamente em modern. Confira versões aceitas e mecanismo de carregamento.
O guia oficial de conflitos restaura nomes logo após carregar. Use referências salvas consistentemente. Em «$ is not a function», confira valores globais, jq.fn.jquery e métodos antes de acrescentar noConflict. Download falho e API removida são outras causas.
Em WordPress ou outro sistema de dependências não cole os dois CDNs do exercício. Confira registros e aliases locais existentes. Ao reverter, preserve a propriedade de plugins sem sobrescrever nomes globais arbitrariamente.
