Anzeige
Tutorialbeschreibung

jQuery - Verschiedene Frameworks parallel verwenden

jQuery - Verschiedene Frameworks parallel verwenden

jQuery bietet zahlreiche Funktionen, mit denen sich normalerweise die meisten Probleme, mit denen man es als Web-Entwickler zu tun hat, lösen lassen. Allerdings kann es durchaus sein, dass man früher oder später an die Grenzen von jQuery stößt oder sich ein anderes Framework einfach besser eignet, man jQuery aber ebenfalls nutzen möchte. Oder denken Sie beispielsweise an die Fähigkeiten der MooTools. Nicht selten möchte man dieses Framework parallel zu jQuery einsetzen. Dabei gilt es allerdings einige Regeln zu beachten. Welche das genau sind, wird in diesem Tutorial beschrieben. Denn beachtet man diese Syntaxregeln nicht, kann es zwischen den Frameworks zu Konflikten kommen, die sich in Skriptfehlern bemerkbar machen.


jQuery ist zweifellos ein geniales, längst aber nicht das einzige JavaScript-Framework. Denken Sie beispielsweise an die MooTools, Prototype, Ext JS oder an Script.aculo.us. Diese Frameworks bieten möglicherweise eine Funktion, die jQuery nicht bietet, die Sie aber für Ihre Anwendung brauchen. Oftmals kann man auf jQuery allerdings dennoch nicht verzichten, da dieses Framework ebenfalls benötigt wird. In diesem Fall kann man einfach mehrere Frameworks parallel einbinden.

Die Frameworks einbinden

Das Einbinden mehrerer Frameworks ist sehr einfach möglich. Dabei kann man zum Beispiel auf die bereits vorgestellte Google-Variante zurückgreifen.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
 google.load("mootools", "1.2.4"); 
 google.load("jquery", "1.3.2");
/* ]]> */
</script>

Ebenso lassen sich die Frameworks aber auch auf herkömmliche Weise einbinden.
<script type="text/javascript" src="_js/mootools-release-1.3.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script>
Hat man die Frameworks integriert, kann man prinzipiell mit ihnen arbeiten. Das ist allerdings nicht ohne weiteres möglich. Damit das Zusammenspiel zwischen jQuery und anderen Bibliotheken bzw. Frameworks funktioniert, verwenden jQuery und die entsprechenden jQuery-Plug-Ins einen eigenen Namensraum (engl. namespace). Dieser Namensraum soll dafür sorgen, dass es im Zusammenspiel mit anderen Frameworks zu keinerlei Konflikten kommt. Um diesen Aspekt zu verstehen, muss man sich zunächst ansehen, wie ein Namensraum eigentlich arbeitet. Ein Namensraum bezeichnet einen Bereich, in dem ein Bezeichner eindeutig ist. Das Prinzip der Namensräume begegnet Ihnen übrigens längst nicht nur bei jQuery, sondern beispielsweise auch im Zusammenhang mit XML oder dem Dateisystem. So wissen Sie z.B., dass innerhalb eines Verzeichnisses ein Dateiname nur exakt einmal vorkommen darf. Probleme gibt es, sobald in einem Verzeichnis mehrere Dateien angelegt werden sollen, die den gleichen Namen haben.

Solche Konflikte können auch beim Einsatz mehrerer Frameworks auftauchen. Wie ein solcher Konflikt entsteht, zeigt das folgende Beispiel:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
 google.load("mootools", "1.2.4"); 
 google.load("jquery", "1.3.2");
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function() {
 var jq = jQuery('#eineid');
 alert(jq.attr('id')) ;
 var moot = $('eineid');
 alert(moot.getProperty('id')) ;
});
/* ]]> */
</script>
</head>
<body>
 <div id="eineid"></div>
</body>

Dieses Skript löst einen Fehler aus.
[Beispiel anzeigen]

Bilder



 

Namensräume nutzen

In jQuery werden sämtliche Objekte innerhalb des jQuery-Namensraums gespeichert. Auf diesen wird dann entweder über den Token jQuery bzw. dessen Alias $ zugegriffen. Und genau an diesem Punkt kann es zu Problemen kommen. Denn der Bezeichner $ wird eben nicht nur in jQuery, sondern beispielsweise auch in Prototype verwendet.

Um solche Probleme zu vermeiden, gibt es in jQuery die Methode noConflict(), die folgendermaßen eingesetzt werden kann.
jQuery.noConflict();

Angenommen, Sie wollen innerhalb einer Anwendung neben jQuery auch die MooTools einsetzen. In diesem Fall hilft die noConflict()-Methode dabei, die angesprochenen Probleme zu umgehen.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
 google.load("mootools", "1.2.4");
 google.load("jquery", "1.3.2");
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery.noConflict();
window.addEvent('domready', function() {
 var jq = jQuery('#eineid');
 alert('Das ist jQuery-Syntax: ' + jq.attr('id')) ;
 var moot = $('eineid');
 alert('Das ist MooTools-Syntax: ' + moot.getProperty('id')) ;
});
/* ]]> */
</script>
</head>
<body>
 <div id="eineid"></div>
</body>


 
Denn jetzt können Sie ohne Konflikte Elemente ansprechen.
[Beispiel anzeigen]

Bilder



Dazu verwenden Sie anstelle der sonst üblichen jQuery-Syntax

var jq = $('#eineid');

einfach die folgende Anweisung:
var jq = jQuery('#eineid');

Ab sofort lässt sich auf diese Weise jQuery mit jedem anderen Framework parallel nutzen. Es ist also ganz einfach: Durch den Einsatz der Methode noConflict() kann die $-Funktion überschrieben werden.


 

Alternative Möglichkeiten

Das ist übrigens nicht die einzige Möglichkeit. Ebenso können Sie dafür sorgen, dass jQuery nicht mit anderen Frameworks in Konflikt kommt, und dabei dennoch kurze Namen verwenden. Dazu ein Beispiel, in dem jQuery und Prototype parallel eingebunden werden.
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var $j = jQuery.noConflict();
// JQuery kann über die Abkürzung $j(...) verwendet werden
$j(document).ready(function(){
 $j("div").hide();
});
// Für Prototype wird $(...) eingesetzt
$('eineid').hide();
/* ]]> */
</script>

In diesem Beispiel wurde ein eigener kurzer Name definiert. Im vorliegenden Fall handelt es sich dabei um $j.

Es gibt sogar noch eine weitere Variante. Die bietet sich an, wenn Sie keinen alternativen Namen für $ definieren wollen. Eingesetzt wird diese Syntax immer dann, wenn man zwar die kurze jQuery-Syntax verwenden möchte, es aber trotzdem nicht zu Konflikten mit anderen Frameworks kommen darf.
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery.noConflict();
jQuery(document).ready(function($){
// Hier wird für jQuery $(...) genutzt
 $("div").hide();
});
// Und auch für Prototype kann auf $(...) zurückgegriffen werden
$('eineid').hide();
/* ]]> */
 </script>

Dieser Code ist ideal, da er den Einsatz der verkürzten jQuery-Syntax ermöglicht, man aber dennoch so wenig Code wie möglich ändern muss, um eine vollständige Kompatibilität zu erreichen.

In den bisherigen Beispielen wurde jQuery immer hinter dem anderen Framework – also entweder Prototype oder den MooTools – eingebunden. Es geht aber auch andersherum. Man kann jQuery ebenso zuerst aufrufen.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
 jQuery("div").hide();
});
$('eineid').hide();
/* ]]> */ 
</script>

In diesem Fall können Sie für das jQuery-Framework jQuery verwenden. Die Abkürzung $ wird hingegen ganz normal für das andere Framework definiert. In einem solchen Fall muss die $-Funktion also nicht explizit durch den Aufruf von jQuery.noConflict () gekennzeichnet werden.

Fazit

jQuery bietet mit seinem Namensraumprinzip einen erstklassigen Mechanismus, um Konflikte zu lösen, die immer dann auftreten, wenn jQuery parallel zu anderen Frameworks eingesetzt wird. In diesem Zusammenhang darf allerdings nicht der Hinweis fehlen, dass jQuery eines der wenigen Frameworks ist, die mit einem Namensraum arbeiten. Wenn Sie also beispielsweise die MooTools zusammen mit Prototype einsetzen, fehlt eine solche Option. Folglich kann es dort dann zu Problemen kommen. Ein Framework, das Namensräume ebenfalls unterstützt, ist übrigens qooxdoo. Dort heißt dann eine Schaltfläche eben nicht einfach nur QxButton, sondern wird mit qx.ui.form.Button beschrieben. Auf diese Weise lässt sich qooxdoo parallel mit anderen Frameworks nutzen.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von snapone
  • 16.01.2010 - 15:45

sehr gut! dankeschön!

Portrait von brain68
  • 15.01.2010 - 18:20

super erklärt! Genau vor diesem Problem stand ich vor kuezem.
Danke

Portrait von websmurf
  • 15.01.2010 - 08:41

Sehr interessant. Ich war bisher noch nicht in der Verlegenheit, neben jquery und dessen Plugins ein anderes Framework zu verwenden. Aber man weiss ja nie, ob man weiss ja nie...

Portrait von petergo
  • 13.01.2010 - 12:40

schön erklärt, auch mit den Namensräumen

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 13.01.2010 - 09:36

Super Workshop, danke.

Portrait von Ditin
  • 13.01.2010 - 01:10

vielen Dank für das Tutorial, schön das dies so übersichtlich dargestellt wurde

der 2. Screenshot enthält mit der Altertbox "someid" einen kleinen Fehler, hier sollte statt dessen "eineid" angezeigt werden - wie im verlinkten Beispiel ;)

Portrait von Daniel Koch
  • 13.01.2010 - 12:29

Das Stimmt. Herzlichen Dank für die Nachricht. Ich habe den Screenshot gleich mal ausgetauscht.

Viele Grüße
Daniel

Portrait von helgeschneider
x
×
×