suchen

Heim  >  Artikel  >  Web-Frontend  >  Einfache Handhabung von jQuery.noConflict()_jquery

Einfache Handhabung von jQuery.noConflict()_jquery

WBOY
WBOYOriginal
2016-05-16 15:15:451193Durchsuche

jQuery ist eines der am weitesten verbreiteten Front-End-Frameworks und eine große Anzahl von Bibliotheken und Plug-Ins von Drittanbietern wird darauf basierend entwickelt. Um eine globale Namespace-Verschmutzung zu vermeiden, stellt jQuery die Methode jQuery.noConflict() zur Lösung von Variablenkonflikten bereit. Diese Methode ist zweifellos sehr effektiv. Leider wird diese Methode in der offiziellen Dokumentation von jQuery nicht klar genug beschrieben und viele Entwickler wissen nicht, was genau passiert, wenn sie jQuery.noConflict() aufrufen, was zu vielen Problemen bei der Verwendung führt. Dennoch lohnt es sich für Webentwickler immer noch, das Implementierungsprinzip hinter jQuery.noConflict() zu erlernen und zu beherrschen, und es kann zu einem leistungsstarken Werkzeug zur Lösung von Problemen wie der globalen Namensraumverschmutzung werden.

Welche Rolle spielt jQuery.noConflict()?
jQuery.noConflict() existiert nur für einen Zweck: Es ermöglicht Ihnen, mehrere jQuery-Instanzen auf derselben Seite zu laden, insbesondere verschiedene Versionen von jQuery. Sie fragen sich vielleicht, warum Sie mehrere verschiedene Versionen von jQuery-Objekten auf einer Seite laden/verwenden müssen? Im Allgemeinen gibt es zwei Situationen. Im ersten Fall verwendet Ihr Geschäftscode die neueste Version der jQuery-Bibliothek und das von Ihnen ausgewählte Drittanbieter-Plug-in basiert auf einer früheren Version der jQuery-Bibliothek Aus verschiedenen Gründen verweist der Code auf eine ältere Version der jQuery-Bibliothek und Ihr neu entwickeltes Modul verwendet andere Versionen der jQuery-Bibliothek. In beiden Fällen müssen Sie sich dem Problem von jQuery-Objekt-/Methodenkonflikten stellen. Glücklicherweise hilft Ihnen jQuery.noConflict() bei der Lösung dieses Problems.

Was passiert, wenn jQuery geladen wird?
Wenn jQuery von der Seite referenziert/geladen wird, ist es in einer selbstausführenden Funktion (anonyme Funktion) gekapselt. Alle von ihr bereitgestellten Variablen, Funktionen und Objekte befinden sich in der ausführbaren Umgebung innerhalb der anonymen Funktion und können nicht von der externen Umgebung aufgerufen werden . Verhindern Sie die globale Namensraumverschmutzung. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQuery definiert zwei globale Objekte: jQuery und $ innerhalb der anonymen Funktion und stellt sich so der externen Umgebung zur Verfügung. Über diese beiden Objekte wird auf verschiedene öffentliche Methoden zugegriffen, die von Entwicklern verwendet werden, z. B. jQuery.ajax(), jQuery.css() usw. Zunächst verweisen sie auf dasselbe jQuery-Objekt (private Variablen) innerhalb der anonymen Funktion, über das auf private Variablen und Funktionen innerhalb der anonymen Funktion zugegriffen wird. Dadurch können die internen privaten Variablen und Funktionen der anonymen Funktion nach ihrer Ausführung weiterhin im Speicher verbleiben und nicht vom JavaScript-Garbage-Collection-Mechanismus gelöscht werden. 

window.jQuery = window.$ = jQuery;

Wenn jQuery von der Seite geladen wird, verfügt die aktuelle Seite möglicherweise bereits über die beiden globalen Variablen jQuery und $ (z. B. werden andere Bibliotheken von Drittanbietern geladen und diese werden auch intern definiert), was dazu führt, dass die vorhandenen Objekte vorhanden sind überschrieben (globale Namensraumverschmutzung). Um dieses Problem zu lösen, speichert jQuery die vorhandenen globalen Variablen intern zwischen und speichert sie für spätere Aufrufe in den privaten Variablen _jQuery und _$. Wenn also die jQuery- und $-Objekte beim Laden der jQuery-Bibliothek auf der Seite noch nicht vorhanden sind, sind _jQuery und _$ beide undefiniert; andernfalls speichern sie Verweise auf die vorhandenen jQuery- und $-Objekte (möglicherweise vom Drittanbieter). Bibliothek, auf die zuvor verwiesen wurde) Oder eine andere Version der jQuery-Bibliothek). Anschließend überschreibt jQuery diese beiden globalen Variablen und stellt sich wie oben beschrieben der externen Umgebung zur Verfügung. Zu diesem Zeitpunkt verweisen die globalen Variablen jQuery und $ auf der Seite auf die gerade eingeführte jQuery-Bibliothek. 

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

// Otherwise expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery;

Die magische Wirkung von jQuery.noConflict()?
„Angenommen, das von Ihnen verwaltete System verweist bereits auf die jQuery-Bibliothek Version 1.7.0 und Sie verweisen in den neu hinzugefügten Funktionen auf die jQuery-Bibliothek Version 1.10.2. Gibt es also eine Möglichkeit, jQuery 1.7.0 wiederzuverwenden oder beide Versionen der jQuery-Bibliothek gleichzeitig zu verwenden? Die Antwort ist ja, das ist jQuery.noConflict(). Tatsächlich können Sie mit jQuery.noConflict() die globalen Variablen jQuery und $ sofort auf die zuvor referenzierten Objekte umleiten. Erstaunlich, oder? Aus diesem Grund speichert jQuery zuvor referenzierte Objekte intern zwischen, bevor es sich der Außenwelt aussetzt.
− jQuery.noConflict() akzeptiert einen optionalen booleschen Parameter, normalerweise ist der Standardwert false. Welchen Einfluss wird dieser Parameter haben? Eigentlich ist es ganz einfach. Wenn jQuery.noConflict() oder jQuery.noConflict(false) aufgerufen wird, wird nur die globale Variable $ auf ihren vorherigen Referenzwert zurückgesetzt; wenn jQuery.noConflict() oder jQuery.noConflict(true) aufgerufen wird, dann die globale Variable $ wird auf seinen vorherigen Referenzwert zurückgesetzt. Sowohl jQuery als auch $ werden auf ihre vorherigen Referenzwerte zurückgesetzt. Dies ist sehr wichtig und sollte im Hinterkopf behalten werden. Wenn Sie jQuery.noConflict(false/true) aufrufen, wird die aktuelle jQuery-Instanz zurückgegeben. Mit dieser Funktion können wir jQuery umbenennen. 

// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

Schauen wir uns einen weiteren Codeausschnitt an, um zu testen, ob wir das magische noConflict() wirklich verstehen



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>