jQuery / noConflict() mit anderen Bibliotheken und Versionen
jQuery.noConflict() stellt das frühere globale $ wieder her und liefert die aktuelle jQuery-Funktion. Als jq gespeichert kann sie neben dem Dollar einer anderen Bibliothek arbeiten. true stellt auch den früheren Namen jQuery her, löst aber keine API- oder Plugin-Inkompatibilität.
Standard und true unterscheiden
jQuery.noConflict() nutzt bei Initialisierung gespeicherte Referenzen. Standard gibt $ frei und behält jQuery; true stellt beide zurück. Ohne früheren Wert entsteht keine alte Bibliothek.
Der Rückgabewert ist dieselbe Funktion, keine Kopie. jq("selector") und jq.ajax() bleiben nutzbar. Globales Zurücksetzen von $ auf jQuery würde den Namen erneut übernehmen; verwenden Sie lokale Bereiche.
Vollständiges Beispiel für einen anderen Dollar
Speichern Sie alles als UTF-8 noconflict-demo.html und öffnen Sie es. Internet lädt die offizielle jQuery-Datei 4.0.0. Server oder Installation sind unnötig. Die erste Funktion ist ein simulierter Besitzer, keine echte Drittbibliothek.
<!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>Anfangsausgabe. Globales $ ist wiederhergestellt; jQuery und lokales $ verwenden jQuery. Dies wurde in Windows Edge getrennt mit 3.7.1 und 4.0.0 ausgeführt.
global dollar=other library
original dollar restored=true
global jQuery kept=true
local alias=true
clicks=0- Dreimal Use local jQuery ergibt clicks=3 mit lokal gebundenem Handler.
- global dollar bleibt other library; original dollar restored=true prüft ursprüngliche Funktionsidentität.
- Reset counter setzt null ohne Neuladen.
Der DOM-bereit-Rückruf jq(function ($) { ... }) erhält die aufrufende Funktion. Lokales $ ist nicht window.$. Erhalten Sie den Bereich beim Verschieben des Codes. Pfeile können Parameter empfangen; Ereignis-this benötigt eigene Prüfung.
Vollständiges Beispiel mit zwei Versionen
Speichern Sie separat als two-versions-demo.html. Erst 3.7.1 als legacy behalten, dann 4.0.0 laden und dessen noConflict(true) als modern sichern. Die Reihenfolge ist nötig; kein async ergänzen.
Bevorzugen Sie eine Version pro Seite. Dies diagnostiziert Namensbesitz bestehender Mischseiten. lessonOnly ist ein kleines simuliertes Plugin, kein Kompatibilitätstest eines realen Produkts.
<!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>Anfangsausgabe mit beiden tatsächlichen Versionen gemeinsam in Windows Edge.
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- Globale Namen gehen auf 3.7.1 zurück; modern behält 4.0.0.
- Legacy handler einmal und Modern handler zweimal ergibt legacy clicks=1; modern clicks=2.
- lessonOnly liegt nur auf legacy.fn, modern plugin=undefined. Dasselbe DOM-Element liefert owner-Daten legacy/modern.
- Reset counters setzt nur Zähler zurück, nicht Namen oder Reihenfolge.
Grenzen der Namensaufteilung
Beide Instanzen bearbeiten ein Dokument. Daten und Plugins sind getrennt, DOM-Löschungen und Attribute aber gemeinsam sichtbar. Verwalten Sie Ereignisse und Bereinigung mit der zuständigen Instanz. Aliase schaffen keine getrennten Seiten.
Plugins mit globalem jQuery binden sich an die beim Laden vorhandene Instanz. Nach tiefer Wiederherstellung erscheinen sie nicht automatisch auf modern. Prüfen Sie Versionen und Lademechanismen einzeln.
Der offizielle Konfliktleitfaden ordnet die Namen direkt nach dem Laden. Nutzen Sie gespeicherte Referenzen einheitlich. Bei „$ is not a function“ prüfen Sie globale Werte, jq.fn.jquery und Methoden, statt blind noConflict hinzuzufügen. Fehlgeschlagene Downloads und entfernte APIs sind andere Ursachen.
Fügen Sie in WordPress oder anderen Abhängigkeitsumgebungen nicht beide Demo-CDNs ein. Prüfen Sie vorhandene Registrierung und lokale Aliase. Überschreiben Sie bei Wiederherstellung keine globalen Namen ohne Prüfung der Plugin-Zuständigkeit.
