Skip to content

Template für jQuery basierte Web-Apps

jQuery ist eine sehr mächtige JavaScript-Library, aber es gibt immer wiederkehrende Sachen, die sind in jQuery entweder nicht direkt enthalten, schlecht umgesetzt oder aber nur per Plugin verfügbar (mehrere verschiedene Plugins sind meist nicht aufeinander abgestimmt -> schlechte Lösung). Daher nutze ich für einige private Projekte seit einiger Zeit eine Basis an Funktionen und Ansätzen, die ich jetzt in ein Template gepackt habe, mit dem man noch schneller loslegen kann.

Die jeweils aktuelle Version ist  auf GitHub, ich freue mich über jeden Fork und jede Anregung :)

Wie benutzt man nun dieses Template? Zum einen hab ich an allen Stellen, an denen man etwas anpassen muss oder sollte einen Kommentar beginnend mit //--> geschrieben. Außerdem noch ein paar Erklärungen, was die einzelnen Teile bedeuten:

  • Am Anfang sind einige kleine Funktionen, die ich gerne & oft verwende, z.B. String.prototype.format(), das aus einem String wie “foo {0}”.format(42) ein “foo 42″ macht.
  • Anschließend die beiden Event Handler enterpress und escpress, die bei Formularen hilfreich sind. Die Namen sind so bescheuert gewählt, dass wie vermutlich niemals in Konflikt mit dem jQuery Core kommen werden
  • Danach kommt ein kleiner i18n part, sie ist so kurz, dass der Quelltext selbsterklärend ist. Das Wörterbuch wird beim initialisieren geladen, dazu später mehr
  • Danach kommt eine minimalistische Template-Engine. Die templates sind einfach Funktionen, die als ein Argument Daten übergeben bekommen und ein jQuery Objekt zurückgeben (Tipp: Als Konvention Variablen für jQuery-Objekte immer mit $ anfangen lassen!). Die Templates benutzt man z.B. per $foo.render(‘template_name’, data), wobei das gerenderte Objekt als ein child von $foo hinzugefügt wird.
  • Die API ist am Anfang etwas irritierend, denn sie ist nur ein wrapper um die Ajax-Funktionen von jQuery. Sie zwingt einen jedoch dazu, API-Aufrufe zu definieren, diese in Module einzuteilen und dann auch nur diese API-Aufrufe zu nutzen. Serverseitig ist so eine starke Modularisierung möglich. Eine API-Funktion sollte immer den Namen api.modulname.funktionsname haben, um auch hier Konsistenz zu wahren.
  • Als letztes kommt die Initialisierungsfunktion, sie lädt die Sprachdatei und zeigt währenddessen eine waiting animation an. Hier sollte man an der Stelle des Kommentars auf jeden Fall eigenen Code platzieren, der die Webanwendung initialisiert/startet.

Post a Comment

Your email is never published nor shared.