Avant de commencer, je voudrais préciser que Je ne veux pas modifier la bibliothèque jQuery de quelque manière que ce soit , je veux juste remplacer le valeur du global $ avec une fonction personnalisée qui renvoie une instance jQuery.
En d'autres termes, je veux que le global $ ne soit pas égal à jQuery et renvoie un jQuery instance après avoir fait d'autres choses (non-jQuery).
Comment faire cela sans casser ou modifier la bibliothèque jQuery?
Par exemple, changer le $ pour qu'il enregistre chaque sélecteur dans la console avant de renvoyer une instance jQuery, en utilisant une déclaration de fonction régulière, comme ceci:
function $(selector) {
console.log(selector);
$.noConflict();
return jQuery(selector);
}
Résultats dans une tonne d'erreurs comme x n'est pas défini ou y est utilisé hors de portée étant lancé.
Après avoir fait quelques recherches, j'ai essayé de mettre un $ .noConflict ( true) après l'appel de la fonction console.log , comme ceci:
function $(selector) {
console.log(selector);
return jQuery(selector);
}
J'ai eu moins d'erreurs qu'avant mais ça continue ne fonctionne pas comme prévu.
Que dois-je changer pour que mon code fonctionne?
3 Réponses :
Vous pouvez le faire en créant une référence à la valeur d'origine et en l'utilisant plus tard, comme ceci ...
$ = _$;
Si vous voulez tout restaurer à la normale à un moment donné plus tard , vous pouvez simplement re-référencer la valeur stockée comme ceci ...
var _$ = $;
function $(selector) {
console.log(selector);
return _$(selector);
}
Remarque: Le trait de soulignement est juste ma convention de dénomination. Vous pouvez appeler la variable de référence comme vous le souhaitez.
Vous pouvez utiliser jQuery.noConflict () pour dire à jQuery de renoncer au contrôle de $ .
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
j = jQuery.noConflict(); console.log(j === jQuery);
Cela restaure également la signification originale de $ , au cas où vous auriez plus d'une chose qui essaie de saisir la variable globale.
<span id="ChangeMe">Text to change</span>
//make the function that uses $ first
$ = function() {
console.log(...arguments);
return jQuery(...arguments);
}
//include jQuery
let script = document.createElement('script')
script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
script.addEventListener("load", () => {
console.log("$ === jQuery", $ === jQuery);
jQuery.noConflict();
console.log("$ === jQuery", $ === jQuery);
$("#ChangeMe").text("We still use jQuery")
});
document.body.appendChild(script);
Si vous voulez réaffecter le raccourci jQuery, attribuez simplement le résultat de l'appel de méthode:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span id="ChangeMe">Text to change</span>
console.log("$ === jQuery", $ === jQuery);
jQuery.noConflict();
console.log("$ === jQuery", $ === jQuery);
$ = function() {
console.log(...arguments);
return jQuery(...arguments);
}
$("#ChangeMe").text("We still use jQuery")
J'obtenais ces erreurs parce que je n'ajoutais pas les propriétés et méthodes existantes de jQuery à la nouvelle fonction $ .
J'ai résolu le problème en libérant le $ namespace en utilisant jQuery.noConflict () puis en utilisant jQuery.extend pour ajouter les propriétés et méthodes de jQuery la nouvelle fonction $ avant de l'exposer au global scope en utilisant window. $ = $ .
Voici le code de travail:
(function() {
jQuery.noConflict();
// do stuff...
var $ = function() {
// do some more stuff...
return jQuery.apply(jQuery, arguments);
};
// do even more stuff...
jQuery.extend($, jQuery);
window.$ = $;
})();
Je voudrais également remercier VLAZ et Archer a > pour leur aide.
$ .noConflict ();bien cela ne fonctionne que tant que$est jQuery. Si ce n'est pas le cas, alors vous appelez.noConflict ()sur votre propre fonction qui ne l'a pas. C'est pourquoi vous devez être explicite et fairejQuery.noConflict ()- de cette façon, vous ne dépendez pas de ce qui est actuellement attribué à$.