JQuery Kochbuch Jquery Community Experts

Prev Next

Konfigurieren von jQuery, so dass es nicht mit anderen Bibliotheken kollidiert

Problem

Wenn jQuery auf einer Seite zusammen mit anderen JavaScript-Bibliotheken geladen wird, kann es passieren, dass beide Bibliotheken eventuell die Variable $ implementieren. Daher wird nur eine dieser Methoden richtig funktionieren.

Lösung

Stellen Sie sich vor, dass Sie eine Webseite übernehmen, die aktualisiert werden muss. Ihr Vorgänger hat eine andere JavaScript-Bibliothek wie Prototype genutzt, aber Sie wollen trotzdem mit jQuery arbeiten. Das führt zu einem Konflikt und eine der beiden Bibliotheken wird nicht funktionieren – abhängig davon, welche Sie im Seiten-Kopf zuerst eingebunden haben.

Deklarieren wir einfach jQuery und Prototype auf der gleichen Seite:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Dies führt zu einem JavaScript-Fehler: element.dispatchEvent is not a function in prototype.js. Glücklicherweise stellt jQuery mit der Methode jQuery.noConflict() einen Workaround bereit:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Kapitel 3 - Rezept 7 - Konfigurieren von jQuery, so dass es nicht mit
           einer anderen Bibliothek kollidiert</title>

    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
        jQuery.noConflict();

        // jQuery über jQuery(...) nutzen
        jQuery(document).ready(function(){
          jQuery("div#jQuery").css("font-weight","bold");
        });

        // Prototype über $(...) usw. nutzen
        document.observe("dom:loaded", function() {
            $('prototype').setStyle({
               fontSize: '10px'
            });
        });
    //-->
   </script>

</head>
<body>
    <div id="jQuery">Hallo, ich bin ein jQuery-div</div>
    <div id="prototype">Hallo, ich bin ein Prototype-div</div>
</body>
</html>

Figure 3-8 zeigt die Ausgabe.

Figure 3-8. Code-Ausgabe

Wenn Sie jQuery.noConflict() aufrufen, gibt es die Kontrolle über die Variable $ an denjenigen zurück, der sie zuerst implementiert. Haben Sie dies getan, dann können Sie auf jQuery nur über die Variable jQuery zugreifen. Statt $("div p")nutzen Sie jetzt also zum Beispiel jQuery("div p").

Diskussion

Die jQuery-Bibliothek und so gut wie alle Plugins stecken im jQuery-Namenspace. Sie sollten mit den jQuery-Variablen und anderen Bibliotheken (also Prototype, YUI und so weiter) keinerlei Konflikte bekommen. Aber jQuery nutzt auch $ als Abkürzung für das jQuery-Objekt. Diese Definition sorgt für Konflikte mit anderen Bibliotheken, die ebenfalls die Variable $ nutzen. Wie wir in der Lösung gesehen haben, können wir dafür sorgen, dass jQuery die Abkürzung $ freigibt. Stattdessen nutzen wir dann das jQuery-Objekt.

Es gibt noch eine andere Option. Wenn Sie sicherstellen möchten, dass jQuery nicht in Konflikt mit einer anderen Bibliothek gerät, aber trotzdem eine Abkürzung nutzen wollen, können Sie jQuery.noConflict() aufrufen und das Ergebnis einer Variablen zuweisen:

     var j = jQuery.noConflict();

     j(document).ready(function(){
       j("div#jQuery").css("font-weight","bold");
     });

Sie können Ihre eigene Kurzform definieren, indem Sie einen entsprechenden Namen für die Variable nutzen, der Sie jQuery.noConflict() zuweisen.

Schließlich gibt es noch eine dritte Option – das Kapseln Ihres jQuery-Codes in einem Closure:

    jQuery.noConflict();

    (function($){
        $("div#jQuery").css("font-weight","bold");
    })(jQuery);

Mit einem Closure sorgen Sie dafür, dass die Variable $ temporär wieder für das jQuery-Objekt zur Verfügung steht, während es in der Funktion genutzt wird. Endet die Funktion, dann wird die Variable $ wieder an die Bibliothek zurückgegeben, die die ursprüngliche Kontrolle darüber hatte.

Warning

Wenn Sie diese Technik nutzen, werden Sie in der gekapselten Funktion nicht auf die Methoden der anderen Bibliothek zugreifen können, die das $ erwarten.

Prev Next