jQuery / noConflict() con otras bibliotecas y versiones
jQuery.noConflict() restaura el $ global anterior y devuelve la función jQuery actual. Guárdela como jq para convivir con el dollar de otra biblioteca. true también restaura el nombre jQuery anterior, sin solucionar compatibilidad de API o plugins.
Llamada normal y true
jQuery.noConflict() usa referencias guardadas al inicializar. Por defecto restaura $ y conserva jQuery; true restaura ambos. Sin valor anterior no crea una biblioteca antigua.
Devuelve la misma función, no una copia. Puede usar jq("selector") y jq.ajax(). Volver a asignar $ global a jQuery ocuparía otra vez el nombre; prefiera ámbito local.
Ejemplo completo con otro dollar
Guarde todo en UTF-8 como noconflict-demo.html y ábralo. Internet carga el archivo oficial de jQuery 4.0.0. No requiere servidor ni paquetes. La primera función simula otro propietario, no una 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>Salida inicial. $ global se restaura, jQuery y $ local usan jQuery. Se ejecutó por separado en Edge para Windows con 3.7.1 y 4.0.0.
global dollar=other library
original dollar restored=true
global jQuery kept=true
local alias=true
clicks=0- Tres Use local jQuery dan clicks=3 con controlador local.
- global dollar sigue other library; original dollar restored=true compara identidad de la función original.
- Reset counter vuelve a cero sin recargar.
El callback de DOM listo jq(function ($) { ... }) recibe la función que llama. Su $ local difiere de window.$. Mantenga el ámbito al mover código. Las flechas también reciben parámetros; this de eventos necesita revisión aparte.
Ejemplo completo con dos versiones
Guarde aparte two-versions-demo.html. Cargue 3.7.1 como legacy y después 4.0.0, guardando noConflict(true) como modern. Respete el orden y no añada async.
Prefiera una versión por sitio. El diagnóstico explica nombres en páginas mixtas existentes. lessonOnly es un plugin simulado, no una prueba real de compatibilidad.
<!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>Salida inicial verificada con ambas versiones reales juntas en 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- Los nombres globales vuelven a 3.7.1 y modern mantiene 4.0.0.
- Legacy handler una vez y Modern handler dos dan legacy clicks=1; modern clicks=2.
- lessonOnly pertenece solo a legacy.fn; modern plugin=undefined. El mismo nodo devuelve datos owner legacy/modern.
- Reset counters solo reinicia cuentas, sin cambiar nombres u orden.
Límites de separar nombres
Ambas instancias manipulan el mismo documento. Plugins y .data() son separados, pero eliminaciones DOM y atributos se comparten. Registre qué instancia posee eventos y limpieza. Los alias no crean páginas independientes.
Un plugin que usa jQuery global se registra en la instancia presente al cargar. Tras restauración profunda no se añade automáticamente a modern. Revise versiones admitidas y mecanismos de carga.
La guía oficial de conflictos restaura nombres inmediatamente después de cargar. Use referencias guardadas coherentemente. Ante «$ is not a function», revise valores globales, jq.fn.jquery y métodos antes de añadir noConflict. Descargas fallidas y API eliminadas son otras causas.
En WordPress u otro sistema de dependencias no pegue ambos CDN del ejercicio. Revise registros y alias locales existentes. Al revertir, respete la propiedad de plugins sin sobrescribir nombres globales arbitrariamente.
