jQuery – noConflict() und die Fallstricke
jQuery hat sich in den vergangenen Jahren zu einer weit verbreiten JavaScript – Bibliothek entwickelt. Der Slogan dieser Bibliothek “Write less, do more” ist keine leere Versprechung. Ich habe nun in verschiedenen Projekten jQuery erfolgreich eingesetzt. In einem Projekt bin ich jedoch auf etwas gestossen, was unbekannt war für mich: Die Verwendung von unterschiedlichen Versionen von jQuery auf einer geladenen Seite.
Wie erreicht man das Zusammenspiel? Hierfür bietet jQuery die Funktion “noConflict()” an.
Ein paar Hintergrundinformationen: Hat man die jQuery – Bibliothek importiert auf seine Seite, sind die Funktionen von jQuery mittels “$” oder “jQuery” verfügbar; z.b. ‘jQuery(“div p”).hide();’ oder ‘$(“div p”).hide();’
Verwenden nun andere Skript das ‘$’ – Zeichen um die Funktionen verfügbar zu machen, so kann führt es dazu dass die Funktionen von anderen Bibliotheken nicht verfügbar sind, da jQuery bereits das ‘$’ – Zeichen verwendet.
Was kann also getan werden?
1. jQuery.noConflict();
2. jQuery(“div p”).hide();
3. $(“content”).style.display = ‘none’;
Was wird in diesem Abschnitt getan?
1. Hier sagen wir: Gib dem anderen Skript den Alias ‘$’ zurück; so dass ‘$’ wieder für die andere Bibliothek zur Verfügung steht.
2. Arbeite hier mit “jQuery” um jQuery – spezifische Funktion aufzurufen.
3. Da wir in Zeile 1 “.noConflict()” aufgerufen haben, können wir hier mittels ‘$’ die Funktionen einer anderen Bibliothek aufrufen.
Mittels “.noConflict()” kann auch die Verwendung von 2 unterschiedlichen jQuery – Versionen realisiert werden:
1. <script src=”/domain/lib/js/jQuery1.3.2.js” type=”text/javascript”></script>
2. var jq = jQuery.noConflict();
3. <script src=”/domain/lib/js/jQuery1.5.1.js” type=”text/javascript”></script>
4. var player = jQuery.noConflict();
Was wird hier gemacht?
1. Importieren von einer jQuery – Bibliothek der Version 1.3.2.
2. Setzen eines Aliasses “jq”, so dass alle Funktionalitäten von Version 1.3.2. unter dem Alias “jq” verfügbar sind.
3. Importieren von einer jQuery – Bibliothek der Version 1.5.1.
4. Setzen eines Aliasses “player”, so dass alle Funktionalitäten von Version 1.5.1. unter dem Alias “player” verfügbar sind.
So weit so gut. Doch welche Fallstrickt ergeben sich hieraus?
Es muss im Code darauf geachtet werden, das die beiden Aliasses konsequent verwendet werden!
Folgendes Beispiel demonstiert diesen Fallstrick:
function initEvents(id)
{
var _this = jQuery(this);
var container = _this(id);
var viewSwitch = function(event, state){
…
}
viewContainer.bind(“viewSwitch”, viewSwitch);
}
function init(id)
{
initEvents(id);
}
In HTML – Seite steht folgendes:
jq(“body”).init(“list”));
Auf den ersten Blick sieht dieser Code fehlerfrei aus: Es wird eine Funktion aufgeruf, welche wiederum Events registriert (“bind”). Dies kann beim Starten der Zeit geschehen.
Das Problem liegt allerdings in der Zeile (“var _this = jQuery(this);”). Hier wird die aktive jQuery Bibliothek verwendet (unter dem Alias “jQuery” verfügbar).
Dieses Event ist nun also unter “jQuery” registriert. Wird nun später eine andere jQuery – Version verwendet z.B. 1.5.1, so ist das vorher registrierte Event nicht mehr bekannt, da es unter jQuery 1.3.2. registriert wurde, nicht jedoch unter jQuery 1.5.1. Merke: jQuery zeigt auf die zuletzt importierte jQuery Bibliothek.
Um dies zu verdeutlichen:
1. Import von Version 1.3.2
2. Setzen von Alias “jq” mittels “.noConflict()”.
3. “jQuery” und Alias “jq” zeigen auf Version 1.3.2.
4. Import von Version 1.5.2. <- Hier entsteht das Problem.
5. Setzen von Alias “jPlayer”
6. “jQuery” und Alias “jPlayer” zeigen auf Version 1.5.1.
Die Lösung des Problems: In der Funktion “initEvents” muss statt “jQuery” das Alias “jq” verwendet werden.
Recent Comments