Dieser Post ist schon mehr als fünf Jahre alt! Eventuell sind Informationen mittlerweile nicht mehr ganz aktuell oder meine Meinung hat sich inzwischen geändert. Bitte genieße alles mit einem Körnchen Salz!
Wohin mit dem Javascript?
Willkommen bei archiv.knuspermagier.de dem Webentwickler-Blog für echte Probleme.
Seit einiger Zeit frage ich mich, immer wenn ich irgendwo, sei es bei QUOTE.fm oder watched.li, Javascript einsetze, was denn wohl der Best Practise ist, was das Einbinden von Javascript auf Seiten angeht.
Beispiel: Seite A benutzt einen abgefahrenen jQuery-Slider-Effekt, der mit $('.images').superSlider({tausend parameter}); initialisiert werden muss. Auf Seite B gibt es ein paar Buttons, denen ich mit $('.buttons').live('click', function(){}); irgendwelche Events zuordne.
Die Möglichkeiten
- Ich habe eine große
scripts.js, die auf jeder Seite eingebunden wird und sowohl den Initialisierungscode für den Slider enthält als auch die ganzen Click-Events für quasi alle Elemente der ganzen Seite, die sowas brauchen. Die Datei hat am Ende 5000 Zeilen und 2000 jQuery-Selectoren. - Ich habe eine
welcomepage.jsmit dem Slider-Kram, einebuttons.jsmit den Click-Events für die Buttons, und je nach Seite binde ich die entsprechende JS-Datei ein. - Ich inline den Kram, den ich jeweils brauche, im HTML mit
<script>-Tags.
(Bestandteil dieser Frage ist nicht, wie ich die scripts.js vielleicht aufteile um besser entwickeln zu können und sie dann am Ende zusammenfasse und minimiere oder dass ich dafür sorge, dass alle Inline-<script>-Tags erst am Ende der Seite ausgegeben werden.)
Meine Bedenken
- Die Datei enthält superviele Selektoren, die auf jeder Seite abgearbeitet werden. Dem könnte man vielleicht entgegenwirken, wenn man den einzelnen Seiten im
<body>eine entsprechende Klasse gibt und in derscripts.jsdann schaut, ob die Klassen gesetzt sind und dann entsprechend die Sachen ausführt. Aber ist das... sauber? Außerdem wird's dann wieder komplizierter, wenn man Overlays/Kram hat der per Ajax-nachgeladen wird. - Viele kleine Javascript-Dateien, die schlecht zusammengefasst werden können, was zu vielen Requests führt
- Viel Javascript-Kram im HTML, was schlecht gecached werden kann. Dafür ist der Code direkt da, wo er hingehört. Sachen, die man öfters braucht kommen natürlich auch in eine extra
scripts.js, sodass man sich die auch nicht einspart.
Was ist nun die beste Lösung? Ich finde eigentlich die Dritte ganz schön, aber irgendwie ist Inline-Javascript ja immer etwas verpönt. Vielleicht gibt es auch noch eine Lösung, auf die ich nur nicht komme. Was sagen die echten Webentwickler dazu?