Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Analyse des Anti-Konflikt-Mechanismus in jQuery-noConflict

Eine kurze Analyse des Anti-Konflikt-Mechanismus in jQuery-noConflict

巴扎黑
巴扎黑Original
2017-06-20 15:18:191346Durchsuche


Quelle: Taobao UED

Viele JS-FrameworksKlassenbibliotheken verwenden das $-Symbol als Funktion oder Variablennamen , jQuery ist das typischste. In jQuery ist das $-Symbol nur eine Referenz des window.jQuery-Objekts. Selbst wenn $ gelöscht wird, ist window.jQuery immer noch ein starker Rückhalt, um die Integrität der gesamten Klassenbibliothek sicherzustellen. Das API-Design von jQuery berücksichtigt vollständig Referenzkonflikte zwischen mehreren Frameworks. Wir können die Methode jQuery.noConflict verwenden, um die Kontrolle einfach zu übertragen.

Die jQuery.noConflict-Methode enthält einen optionalen booleschen Parameter [1], der bestimmt, ob die $-Referenz übergeben werden soll, während das jQuery-Objekt selbst übergeben wird:

JavaScript


1


jQuery.noConflict([removeAll])

1

jQuery .noConflict([removeAll])

Standardmäßig wird beim Ausführen von noConflict die Kontrolle über die Variable $ an die erste Bibliothek übertragen, die $ generiert. Wenn „removeAll“ auf „true“ gesetzt ist, wird beim Ausführen von noConflict die Kontrolle über $ und das jQuery-Objekt selbst übergeben die erste Bibliothek, die sie generiert hat.

Wenn beispielsweise KISSY und jQuery gemischt werden und $ = KISSY zur Vereinfachung von API-Operationen verwendet wird, kann diese Methode zur Lösung des Namenskonfliktproblems verwendet werden.

Wie wird dieser Mechanismus implementiert? Lesen Sie den jQuery-Quellcode am Anfang [2]. Das erste, was Sie tun müssen, ist Folgendes:














JavaScript




1

2

3

4

5


        // Map over jQuery in case of overwrite

        _jQuery = window.jQuery,

 

        // Map over the $ in case of overwrite

        _$ = window.$,

1

2

3

4

5

  // Map über jQuery im Falle eines Überschreibens

     _jQuery = window.jQuery,

 // Im Falle eines Überschreibens über das $ abbilden

 _$ = window .$,

Es ist leicht zu verstehen, dass jQuery die beiden Objekte jQuery und $ in der Fensterumgebung über zwei private Variablen zuordnet, um zu verhindern, dass die Variablen gewaltsam überschrieben werden. Sobald die noConflict-Methode aufgerufen wird, wird der Unterschied zwischen _jQuery, _$, jQuery, $ verwendet, um die Übertragungsmethode der Steuerung zu bestimmen. Der spezifische Code lautet wie folgt:














JavaScript




1

2

3

4

5

6

7

8

9

10

11


noConflict: Funktion( tief ) {

if ( Fenster.$ === jQuery ) {

 Fenster.$ = _$;

 }

                >&& Fenster.jQuery === jQuery ) {                        window.jQuery =

_jQuery; } return

jQuery

;

        }

Schauen wir uns das oben erwähnte Problem mit der Parametereinstellung an. Wenn „deep“ nicht festgelegt ist, deckt _$ window.$ ab. Zu diesem Zeitpunkt wird der jQuery-Alias ​​​​$ ungültig, aber jQuery selbst ist intakt. Wenn eine andere Bibliothek oder ein anderer Code die $-Variable neu definiert, wird die Kontrolle darüber vollständig übertragen. Wenn andererseits „deep“ auf „true“ gesetzt ist, überschreibt _jQuery window.jQuery und sowohl $ als auch jQuery sind ungültig.

Der Vorteil dieser Operation besteht darin, dass es sich aufgrund des von der noConflict-Methode bereitgestellten Übergabemechanismus und der Tatsache, dass sie eine zurückgibt, unabhängig davon, ob es sich um eine stark widersprüchliche Ausführungsumgebung wie das Mischen von Frameworks oder die Koexistenz mehrerer jQuery-Versionen handelt Bei einem nicht begrenzten jQuery-Objekt ist es durchaus möglich, Konflikte durch Variablenzuordnung zu lösen.

Aber die unvermeidliche Tatsache ist, dass es zu Problemen wie Plug-In-Fehlern kommen kann. Natürlich kann es durch einfaches Ändern der Kontextparameter wiederhergestellt werden














JavaScript



1

2


1

2

3

4

5

6


var query = jQuery.noConflict(true);

(function ($) {

 

     // 插件或其他形式的代码,也可以将参数设为 jQuery

 

})(query);

3

4

5

6

var Abfrage = jQuery.noConflict(true );

( Funktion ($) {

// Plug-Ins oder andere Codeformen können auch Parameter für jQuery festlegen

})(Abfrage);

[1] http://api.jquery.com/jQuery.noConflict/#jQuery-noConflict-removeAll[2] https://github.com/jquery/jquery/blob/master/src/core.js

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Anti-Konflikt-Mechanismus in jQuery-noConflict. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn