jQuery noConflict Mode

Des öftern ist man gezwungen mehrere JS-Frameworks auf einer Website zu nutzen. Das geschieht wenn man eine Vielzahl von Plugins einbauen möchte und diese eben nicht für ein einziges Framework vorhanden sind. Natürlich mit dem Nachteil verbunden, dass bei jedem Aufruf einer Seite eine relativ große Menge an Daten mitgesendet werden muss, nämlich mindestens die verschiedenen Framework Core Dateien.

Die beiden Kerne einbinden bringt uns aber noch nicht ganz zum Ziel. jQuery bietet hierfür den noConflict-Mode an. Diese wird nach einbinden der Bibliothek aufgerufen und sorgt dafür, das jQuery unter einem anderen Namespace ansprechbar ist.

Ein Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script>
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = $('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});

Dieses Skript wirft bei installiertem Firebug nun ein Fehler. Javascript kann das $-Zeichen nicht referenzieren und findet in obigem Fall die Methode “attr” nicht. Nun kommt der noConflict-Mode ins Spiel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script> 
<script>
     jQuery.noConflict();
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = jQuery('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});
 </script>

Will man nun über jQuery ein Element ansprechen ersetzt man das “$” durch “jQuery” und behält für MooTools den $-Syntax bei. Ein friedliche Koexistenz.
Auf diese Weise lässt sich jQuery mit sogut wie jedem anderen Framework benutzen. Leider gehört jQuery zu den wenigen Frameworks die einen solchen Modus besitzen. Möchte man bspw. Prototype in Verbindung mit MooTools einsetzen gibt es keine Option dieser Art.

Ähnliche Artikel

• 12. November 2009 -- jQuery Präsentationen für ein besseres Verständnis
• 27. Juli 2009 -- jQuery Tutorial – Closing an Accordion automatically
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style