JQuery Kochbuch (German Edition)

der Reihenfolge abgearbeitet, in der sie sich im HTML-Code befinden.
    ----
    Sie können JavaScript-Dateien per Hand zusammenfassen, indem Sie sie einfach in eine große Datei kopieren. Das ist zwar bei der Entwicklung unpraktisch, beschleunigt aber das Herunterladen.
    Es gibt eine Reihe von Tools zum Zusammenfassen und/oder Minifizieren von Dateien, die auch fürdiverse Server-Sprachen verfügbar sind.
    Ruby on Rails:
    Bundle-fu
AssetPackager
Der in Rails 2.0 eingebaute Packager
    PHP:
    Minify
    Python:
    JSCompile
    Java:
    YUI Compressor
    Neben dem JavaScript-Code sollten Sie auch Ihr CSS überprüfen. Ein paar der aufgeführten Tools können Ihre
.css
-Dateien wie die
.js
-Dateien zusammenfassen.
    ----
    Warning
    Das »Packen« von JavaScript war einmaltotal in. Dabei werden nicht nur Kommentare und Whitespace entfernt, der JavaScript-Code wird auch noch so umgeschrieben, dass es sich gar nicht mehr um JavaScript-Code handelt. Zum Packen gehört auch immer ein Entpacken zur Laufzeit – jedes Mal, wenn die Seite geladen wird, selbst wenn der JavaScript-Code schon gepuffert ist. Daher ist das Packen nicht mehr State of the Art und stattdessen wird das »Minifizieren« des Codes (Entfernen von Kommentaren und Whitespace) empfohlen – kombiniert mit der gzip-Komprimierung. Beim Packen lag ein großer Vorteil im Entfernen doppelter Strings – dies nimmt gzip sowieso vor.
    ----

Zurückhaltendes JavaScript schreiben
    Problem
    Sie haben eine Seite mit Inline-Eventhandler-Attributen, die für ein Menü einen Hover-Effekt erzeugen.
    Ihr Inhalt (HTML), die Darstellung (CSS) und das Verhalten (JavaScript) sind wüst kombiniert, so dass es schwer ist, jeden Bereich getrennt zu warten. Dies führt zu doppeltem JavaScript-Code und entsprechend zu doppelten Style-Einstellungen:
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    
    
    

    

    
•      onmouseout="this.style.backgroundColor='transparent';">
       Download
      

    
•      onmouseout="this.style.backgroundColor='transparent';">
       Dokumentation
      

    
•      onmouseout="this.style.backgroundColor='transparent';">
       Tutorials
      

    Lösung
    Ersetzen Sie das Inline-JavaScript durch jQuery-Eventhandler und nutzen Sie Klassen, die Sie hinzufügen beziehungsweise entfernen, anstatt die
backgroundColor
direkt zu verändern:
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    
    
    

    

    

    

    
• Download

    
• Dokumentation

    
• Tutorials

    Wir haben die Inline-Eventhandler entfernt und sie durch jQuery-Eventhandler ersetzt, wodurch wir Inhalt und Verhalten trennen konnten. Wollen wir jetzt mehr Menü-Einträge hinzufügen, müssen wir nicht immer die gleichen Eventhandler kopieren, sondern sie