jQuery kern - noConflict() methode
Voorbeeld
Gebruik de noConflict() methode om een nieuwe naam voor de jQuery-variabele te specificeren:
var jq=$.noConflict();
Definitie en gebruik
De noConflict() methode overdraagt de controle over de variabele $ van jQuery.
Deze methode geeft de controle over het $-variable van jQuery vrij.
Deze methode kan ook gebruikt worden om een nieuwe aangepaste naam voor de jQuery-variabele te specificeren.
Tip:Dit is nuttig wanneer een andere JavaScript-bibliotheek de $ gebruikt voor zijn functies.
Syntax
jQuery.noConflict(removeAll)
| Parameters | Beschrijving |
|---|---|
| removeAll | Booleaanse waarde. Indicatie of de jQuery-variabele volledig kan worden teruggezet. |
Beschrijving
Veel JavaScript-bibliotheken gebruiken $ als functie- of variabelenaam, jQuery ook. In jQuery is $ enkel een alias voor jQuery, dus zelfs zonder $ kan alle functionaliteit gewaarborgd zijn. Als we een andere JavaScript-bibliotheek buiten jQuery willen gebruiken, kunnen we de controle teruggeven aan deze bibliotheek door $.noConflict() aan te roepen:
<script type="text/javascript" src="other_lib.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.noConflict(); // Gebruik van de $ van een andere bibliotheek </script>
Dit kan gecombineerd worden met de .ready() methode om een alias voor jQuery-objecten te maken, een zeer effectieve techniek:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Gebruik van de jQuery $
});
// Gebruik van de $ van een andere bibliotheek
</script>
Daarnaast, door het parameter true door te geven aan deze methode, kunnen we de controle over $ en jQuery teruggeven aan de oorspronkelijke bibliotheek. Overweeg goed voordat je het gebruikt!
Dit is een meer extreme versie van de eenvoudige noConflict-methode, omdat dit jQuery volledig opnieuw definieert. Dit wordt meestal gebruikt in extreme situaties, zoals wanneer je jQuery wilt embedden in een zeer conflicterende omgeving. Let op: het oproepen van deze methode kan zeer waarschijnlijk leiden tot het falen van plugins.
Voorbeeld
Voorbeeld 1
Map het door $ gerefereerde object terug naar het oorspronkelijke object:
jQuery.noConflict();
jQuery("div p").hide(); // Gebruik van jQuery
$("content").style.display = "none"; // Gebruik van $() van andere bibliotheken
Voorbeeld 2
Herstel het gebruik van alias $ en maak een functie aan en voer deze uit, waarin $ nog steeds als alias voor jQuery wordt gebruikt. De oorspronkelijke $-object is ongeldig in deze functie. Deze functie is zeer effectief voor de meeste plugins die niet afhankelijk zijn van andere bibliotheken:
jQuery.noConflict();
(function($) {
$(function() {
// Code die $ als alias voor jQuery gebruikt
});
})(jQuery);
... // Andere bibliotheken die $ als alias gebruiken
Voorbeeld 3
Je kunt jQuery.noConflict() combineren met de afgekorte ready om de code compacter te maken:
jQuery.noConflict()(function() {
// Code die jQuery gebruikt
});
... // Andere bibliotheken gebruiken $ als alias
Voorbeeld 4
Maak een nieuwe alias om jQuery-objecten te gebruiken in de volgende bibliotheek:
var j = jQuery.noConflict();
j("div p").hide(); // Code gebaseerd op jQuery
$("content").style.display = "none"; // Code gebaseerd op andere bibliotheken $()
Voorbeeld 5
Volledig jQuery verplaatsen naar een nieuwe naamruimte:
var dom = {};
dom.query = jQuery.noConflict(true);
Resultaat:
dom.query("div p").hide(); // Nieuwe jQuery-code
$("content").style.display = "none"; // Code van een andere bibliotheek $()
jQuery("div > p").hide(); // Een andere versie van jQuery-code
