jQuery: Gleichzeitiger Einsatz mit anderen Frameworks

jQuery ist zwar inzwischen (November 2012) das mit Abstand beliebteste JavaScript-Framework im Web, aber natürlich nicht das einzige. Magento setzt z. B. nach wie vor konsequent auf Prototype und scriptaculo.us, Joomla wiederum verwendet MooTools. Da die GUI- und Datenübertragungsfunktionen einer Shop- oder auch CMS-Lösung sehr grundlegend mit der vom Hersteller vorgegebenen Auswahl der JavaScript-Bibliotheken verknüpft sind, bleibt man auch an diese Auswahl gebunden, wenn man auf derselben Website Applikationen verwenden will, die ein anderes Framework benötigen. Beim parallelen Laden zweier oder mehrerer Frameworks allerdings kommt es dann zu Kollisionen - die $-Funktionen von jQuery und Prototype etwa vertragen sich schon auf ganz simpler syntaktischer Ebene nicht und bezeichnen auch jeweils etwas anderes.

Schon aufgrund des schieren Zeitaufwandes steht ein vollständiger Wechsel des Frameworks fast immer außer Frage. Das ist aber zumindest im Fall, jQuery zusätzlich einsetzen zu wollen, auch gar nicht nötig. jQuery stellt mit seiner noConflict-Methode eine Möglichkeit zur Verfügung, den $-Shortcut für seine eigenen Begriffe abzuschalten; in der Folge können wir dann der jQuery(document).ready()-Methode, die den Eventhandler für das vollständige Laden des DOM implementiert (siehe auch den entsprechenden Wissensartikel), als Parameter eine anonyme Funktion mit $-Argument mitgeben. Dieses Argument enthält dann das jQuery-Objekt, so dass wir innerhalb der anonymen Funktion einfach den jQuery-$-Shortcut verwenden können, ohne in Konflikte zu geraten. Wie das z. B. im Zusammenspiel mit Prototype aussieht, zeigt das folgende Listing. Hier wird dasselbe <div>-Element mit dem id-Tag "testdiv" einmal in div1 durch jQuerys $ und einmal in div2 durch Prototypes $ referenziert.

01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
<!DOCTYPE html>
    <head>
		<script src="jquery.min.js"></script>
		<script src="prototype.js"></script>
		<script>
 
			var div1, div2;
 
			 jQuery.noConflict();
			 jQuery(document).ready(function($){
 
				// (Hier jQuery-Code)
 
				div1 = $('#testdiv');
 
			 });
 
			// (Hier Prototype-Code)
 
			window.onload = function(){			 
 
				div2 = $('testdiv');
 
			};
 
		</script>
 
    </head>
    <body>
 
		<div id="testdiv" />
 
    </body>
</html>

Autorin: Maren Arnhold