Microsoft Dynamics CRM 2011 | Multiple jQuery libraries and Plugins

Mein heutiger Artikel befasst sich mit der Verwendung von jQuery, genauer gesagt mit der Verwendung mehrerer unterschiedlicher Versionen von jQuery. Laut SDK ist die Verwendung von jQuery in Webressourcen nicht untersagt. Und im Zusammenspiel mit dem REST Endpunkt und Abfragen von Daten gilt jQuery.ajax ebenfalls als unterstützt. jQuery jedoch zur Manipulation von Microsoft Dynamics CRM Seiten oder Masken zu verwenden wird hingegen nicht unterstützt.

Im Zuge meiner unterschiedlichen Projekte sind mir zahlreiche Verwendungen von jQuery begegnet, unterstützte, wie auch nicht unterstützte Methoden. Da jQuery auch in einigen ISV-Lösungen zum Einsatz kommt, kann es schnell zu Konflikten kommen, die es zu verhindern gilt.

Plant man in seinen Projekten jQuery in Webressourcen  zum Einsatz zu bringen, hat man

a) ein CRM System, in dem keinerlei 3rd Party Anwendungen zum Einsatz kommen,

b) eine gekapselte Umgebung bestehend aus seiner eigenen Webressource, die auch nur eine Version des jQuery-Frameworks verwendet oder

c) man vermeidet Konflikte mit anderen Versionen über den Einsatz geeigneter Methoden

Das jQuery-Framework selbst bietet hierfür einen Ansatz mit jQuery.noConflict(). Leider jedoch stelle ich immer wieder fest, dass die Funktion nicht korrekt benutzt wird. Vorweg daher einmal die Definition:

Wie funktioniert jQuery.noConflict()?

Eigentlich ganz simpel. Beim Laden prüft jQuery, ob $ bereits definiert wurde. Ist dies der Fall, wird jenes $ unter einem anderen Namen “geparkt”. Der $-Bezeichner gehört damit nun jQuery. Die Instruktion jQuery.noConflict() bewirkt, dass jQuerys $ im Anschluss der Verwendung wieder durch die “geparkte” Kopie des ehemaligen $ überschrieben und der ursprüngliche Zustand wieder hergestellt wird. Das Alias jQuery selbst ist hiervon nicht verwendet werden.

Es gibt jedoch auch noch die Variante jQuery.noConflict(true). In diesem Fall wird der Bezeichner $ und der Alias jQuery freigegeben und eine Referenz auf das ursprüngliche jQuery-Objekt erzeugt.

Was jedoch, wenn man unterschiedliche Versionen von jQuery einsetzt?

Beispiel: In einer Maske befinden sich zwei Webressourcen. Diese haben jeweils einen Verweis auf unterschiedliche Versionen. Beide Webressourcen werden onLoad initiiert.

In diesem Fall überschreibt die zuletzt geladene Version die Vorgängerversion und dies kann zu Konflikten führen, sofern man beispielsweise jQueryUI im Zusammenhang mit einer ganz bestimmten Version verwenden möchte.

Ein anderes Beispiel wäre die Verwendung von veralteten Methode, wie z.B. jQuery.Browser. Diese wird in den Versionen 1.9 und höher nicht mehr unterstützt, so dass schnell unerwünschte Fehler auftreten können. Jetzt könnte man

a) die Methode ersetzen und seinen Code komplett neu schreiben,

b) mit Hilfe des jQuery.Migrate Plugins die Funktion wieder gewährleisten oder

c) die unterschiedlichen jQuery-Bibliotheken einfach kapseln und somit Konflikte ausschließen.

 

In vielen Projekten sehe ich die Verwendung von .noConflct() im eigenen Script in der Art

jQuery.noConflict() oder $.noConflict();

Die meisten gehen davon aus, hiermit bereits erfolgreich möglichen Konflikten aus dem Weg gegangen zu sein.

Will man jedoch auf Nummer sicher gehen, so empfiehlt es sich einen neuen Alias zu $() und jQuery() zu erzeugen. Und glücklicherweise kann man hierfür .noConflict() verwenden, da das jQuery-Objekt zurückgegeben wird.

var myjQ = jQuery.noConflict(); // myjQ() kann nunmehr anstelle von $() verwendet werden

Vielen ist jedoch nicht klar, wohin mit dieser Zeile?

In meinen Projekten lade ich das jQuery-Framework immer aus einer Webressource heraus. Und in diese füge ich als letzte Zeile immer meine neue Variable hinzu. Somit bin ich mir sicher, dass meine neue Variable immer im Zusammenhang mit der geladenen Webressource steht und ich kann jeder Webressource (mit unterschiedlicher jQuery Version) eine andere Variable zuweisen.

Was jedoch, wenn man neben dem jQuery-Framework auch Plugins oder das jQueryUI-Framework einsetzen möchte?

Nunmehr müssen wir garantieren, dass unsere Plugins auch die korrekte jQuery Version nutzen,

Ein Plugin für jQuery wird üblicherweise so geschrieben:

(function ( $ ) {
    // plugin code
}( jQuery ));

Eine Änderung / Anpassung des Plugins ist daher keine große Sache. Man ändert in diesem Fall (jQuery) in die neue Variable (myjQ).

Einige Plugins verwenden jedoch noch weitere Parameter, da sieht der Code dann in etwa so aus:

(function ( $, Input, AnotherInput ) {
    // plugin code
}( jQuery, Input, AnotherInput ));

Auch in diesem Fall wird nur der jQuery-Alias ausgetauscht.

Schauen wir uns nunmehr das jQueryUI-Framework genauer an. Laden wir uns die aktuelle Version herunter, so gibt es hier einen Ordner JS. In diesem finden sich drei JavaScript-Dateien. Eine namens jquery-ui-1.10.3.custom.min.js. Öffnen wir diese mit einem geeigneten Editor, so finden wir auch hier den bereits aus Plugins bekannten Pattern (function(e,t)….(jQuery);  [kein Wunder, handelt es sich dabei auch um Plugins].

Ihr ahnt es sicherlich schon. Auch hier tauschen wir den jQuery-Alias gegen unsere Variable aus und sorgen somit dafür, dass unser jQueryUI im gezielten Zusammenspiel mit unserer Version funktioniert.

Fazit: Mit jQuery.noConflict() und der korrekten Anwendung kann man vielen Konflikten aus dem Weg gehen. Neben dem jQuery-Framework sollte man jedoch prüfen, ob man auch entsprechende Plugins im Einsatz hat, die es ebenfalls anzupassen gilt. Nimmt man diese Anpassungen nicht vor, so mag das Plugin möglicherweise funktionieren, basiert aber nicht auf der jQuery-Version unter der man es ursprünglich betreiben wollte.

MIt der Cross-Browser Unterstützung ist auch Microsoft Konsument des jQuery-Frameworks und schnell können sich unangenehme Wechselwirkungen mit den eigenen Programmierungen ergeben. Gleiches gilt auch, wenn ein Add-On eine neuere Version von jQuery mit sich bringt und hier keine Isolation vorgenommen wurde.

Wer seine Installation daher für die Zukunft fit machen will, der sollte im Zuge einer Code-Validierung ein besonderes Augenmerk auf die Verwendung von jQuery.noConflict() werfen.

 

Technorati Tags:

Ein Gedanke zu “Microsoft Dynamics CRM 2011 | Multiple jQuery libraries and Plugins

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s