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:

?View Code JAVASCRIPT
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.

?View Code JAVASCRIPT
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.

http://www.mysrc.de/wp-content/plugins/sociofluid/images/twitter_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/google_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/delicious_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/digg_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/reddit_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/dzone_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/blinklist_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/blogmarks_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/furl_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/newsvine_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/technorati_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/magnolia_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/myspace_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/facebook_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/sphinn_48.png

Ähnliche Artikel

8 Responses to “jQuery noConflict Mode”

  1. Stefan  on Januar 16th, 2010

    Hallo Stefan, seit langem bin ich auf der Suche nach der Lösung des Problmes Jquery und mootools parallel laufen zu lassen, leider habe ich bis heute noch keinen optimalen weg gefunden, da ich ein verständnissproblem mit der jqueryNoconflict methode habe. Besteht die Möglichkeit, dass ich dir das Problem mal per Email senden kann ???
    Viele Grüße
    Stefan

  2. Micronetic  on Januar 19th, 2010

    Hi,

    erstmal vielen Dank für die Beschreibung aber leider funktioniert das nicht auf einer Seite die ich zur Zeit in MODx mache.

    Ich habe auf der Startseite eine Slideshow eingebaut und MODx benutzt wohl noch die mootools für den QuickManager.

    Ich hoffe du kannst mir helfen.

    Vielen Dank schonmal und viele Grüße

  3. dave  on Juni 10th, 2011

    Ich finde dies relativ unnötig, da meiner ansicht nach, jquery das beste und meistgenutzte js-framework ist…

  4. Stefan Huissel  on Juni 12th, 2011

    Ich gebe dir insofern recht, dass das Einbinden zweier JS-Frameworks vermieden werden sollte. Es gibt aber immer wieder Szenarien in denen der noConflict Mode sehr praktisch ist. Sei es z.B. ein auf jQuery aufgesetzes Projekt und ein nur in Mootools vorhandenes Plugin. Meist fehlt dann die Zeit, dieses Plugin in jQuery zu übersetzen. Man muss einfach immer abwegen ob es die erhöhte Ladezeit am Ende auch wirklich wert ist.

    Übrigens ist jQuery tatsächlich das meistgenutzte Framework, man sollte aber die Stärken von Mootools nicht unterschätzen. Die Syntax ist etwas schwieriger zu erlernen, mit dem Vorteil das tendenziell eine bessere Wiederverwendbarkeit gewährleistet ist.

  5. Silke  on Februar 22nd, 2012

    Hammer, danke, klappt *nach ewigem suchen*
    DANKE!!!!!!!!!!

  6. Ingmar  on August 28th, 2012

    Super, nach langem Suchen mit deiner Lösung verständlich zum Ziel gekommen!

    Vielen Dank


Kommentare