jQuery / noConflict() avec d’autres bibliothèques et versions
jQuery.noConflict() restaure le $ global antérieur et renvoie la fonction jQuery actuelle. Gardez-la dans jq pour cohabiter avec le dollar d’une autre bibliothèque. true restaure aussi l’ancien nom jQuery, sans résoudre la compatibilité des API ou plugins.
Appel normal et true
jQuery.noConflict() restaure les références enregistrées à l’initialisation. Par défaut $ revient, jQuery reste ; true restaure les deux. Sans valeur antérieure, aucune ancienne bibliothèque n’est créée.
Le retour est la même fonction, pas une copie. jq("selector") et jq.ajax() restent disponibles. Réaffecter le $ global à jQuery reprendrait le nom ; privilégiez la portée locale.
Exemple complet avec un autre dollar
Enregistrez tout en UTF-8 sous noconflict-demo.html et ouvrez-le. Internet charge le fichier officiel jQuery 4.0.0. Aucun serveur ou paquet n’est nécessaire. La première fonction simule un propriétaire, pas une véritable bibliothèque tierce.
<!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>Sortie initiale. $ global est restauré, jQuery et $ local utilisent jQuery. Ce comportement a été exécuté séparément dans Edge sous Windows avec 3.7.1 et 4.0.0.
global dollar=other library
original dollar restored=true
global jQuery kept=true
local alias=true
clicks=0- Trois Use local jQuery donnent clicks=3 avec le gestionnaire local.
- global dollar reste other library ; original dollar restored=true compare l’identité de la fonction d’origine.
- Reset counter remet zéro sans rechargement.
Le rappel DOM prêt jq(function ($) { ... }) reçoit la fonction appelante. Son $ local diffère de window.$. Conservez cette portée en déplaçant le code. Les flèches reçoivent aussi des paramètres ; this des événements demande une vérification distincte.
Exemple complet avec deux versions
Enregistrez séparément two-versions-demo.html. Chargez 3.7.1 dans legacy, puis 4.0.0 et son retour noConflict(true) dans modern. Respectez cet ordre, sans ajouter async.
Préférez une version par site. Ce diagnostic explique la propriété des noms sur une page existante mixte. lessonOnly est un petit plugin simulé, pas un test de compatibilité réel.
<!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>Sortie initiale vérifiée avec les deux véritables versions ensemble dans Edge sous 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- Les noms globaux reviennent à 3.7.1 ; modern conserve 4.0.0.
- Legacy handler une fois puis Modern handler deux fois donnent legacy clicks=1; modern clicks=2.
- lessonOnly appartient seulement à legacy.fn ; modern plugin=undefined. Le même élément DOM donne les données owner legacy/modern.
- Reset counters remet uniquement les comptes à zéro, sans changer noms ou ordre.
Limites de la séparation des noms
Les deux instances modifient le même document. Plugins et .data() sont distincts, mais suppressions DOM et attributs sont partagés. Suivez l’instance qui possède événements et nettoyage. Les alias ne créent pas deux pages.
Un plugin utilisant jQuery global s’attache à l’instance présente au chargement. Après restauration profonde, il ne s’installe pas automatiquement sur modern. Vérifiez versions prises en charge et mécanismes de chargement.
Le guide officiel des conflits restaure les noms juste après chargement. Utilisez les références conservées avec cohérence. Pour « $ is not a function », inspectez valeurs globales, jq.fn.jquery et méthodes avant d’ajouter noConflict. Échec de téléchargement et API supprimée sont d’autres causes.
Dans WordPress ou un environnement gérant les dépendances, n’ajoutez pas les deux CDN de l’exercice. Inspectez enregistrement et alias locaux existants. Lors du retour arrière, préservez la propriété des plugins sans écraser arbitrairement les noms globaux.
