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 jQuery in verschiedenen Projekten 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 Seite.
Die Frage die sich hier stellt: Wie kann eine konflikfreie Zusammenarbeit ermöglicht werden? Hierfür bietet jQuery die Funktion “noConflict()” an.
Ein paar Hintergrundinformationen: Ist die jQuery – Bibliothek importiert auf einer Webseite, sind die Funktionen von jQuery mittels “$” oder “jQuery” verfügbar; z.b. ‘jQuery(“div p”).hide();’ oder ‘$(“div p”).hide();’
Verwenden nun andere Skripte das ‘$’ – Alias um die spezifischen Funktionen verfügbar zu machen, so kann es dazu führen 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 Fallstricke 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 Laden der Webseite 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. in der Version 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: Die Variable “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.