Vernünftiger Aufbau,

[manuell]

Hallo Forum,

ich habe folgendes Anliegen und finde nicht so recht informationen wie ich vorgehen soll.
Ich habe eine Webanwendung die aus php, html, css und sehr sehr viel javascript (jquery) besteht.
Das Javascript besteht ohne die jQuery scripte und Plugins aus über 2000 javascript Zeilen.
Problem ist, die Anwendung ist nach und nach aufgebaut und dadurch ist das javascript nicht sehr strukturiert und es wiederholen sich teile.
Die Frage ist jetzt, wie strukturiere ich das ganze jetzt.
Mein erster ansatz ist folgender. Ich habe eine core.js die sämtliche Basisfunktionen wie z.B. die ajax Aufrufe usw enthält.
Dann gibt es javascript dateien wie: Nachrichten.js, Profil.js ... die JSON-Objekte mit Funktionen zurückliefern die die entsprechenden Aufrufe auf dem Core machen. Beim laden der Seite wird dann eine "app.js" geladen die ein app = { nachrichten : {}, profil : {}, ... } Objekt hat, danach wird mit jQuery getScript(Nachrichten.js)... alles in das app-Objekt geladen, sodass ich um eine Funktion aufzurufen immer nur: app.profil.showProfil() benutzen muss.
Fraglich ist jetzt, macht ein solches Vorgehen überhaupt sinn, der Vorteil sind natürlich die einfacheren Aufrufe, der Nachteil ist, es muss mehr geladen werden, letztendlich ist getScript() ja auch nur wieder ein ajax aufruf.
Der andere Punkt ist, was übernimmt der core, was übernehmen die nachrichten.js, profil.js.... wo sollen z.B. die ganzen click, mouseover, droppable .. events registriert werden.

Hoffe mein Problem ist klar geworden und jemand hat eine Idee, eine Lösung oder auch nur einen Link wo das Thema diskutiert wird.

Danke!

 

[Wustersoss]

Fraglich ist jetzt, macht ein solches Vorgehen überhaupt sinn

Da wir die Seite nicht kennen, ist es schwer zu beantworten. Alles dynamisch nachzuladen kann sinnvoll sein, aber auch nicht. Kommt ja letztlich darauf an was man erreichen will. Bei einem grösseren Projekt ist es notwendig eine gute Dokumentation zu haben und einen Ablaufplan, sowie ein Strukturgramm. Wenn das nicht vorliegt würde ich damit einfach beginnen es zu erstellen, dann ergeben sich wahrscheinlich schon Verbesserungsansätze, zumindest gewinnt man dann erstmalig einen Überblick.

 

[struppi]

Also ich würde bei der Größe (2000 Zeilen sind nicht wirklich viel) einfach mit <srcipt src=".."></script> arbeiten. Diese Dateien kommen in den Cache, sind also danach schnell verfügbar.

 

[Gilles]

Anscheinend benutzt du dein Javascript auch in Objekt statt in Funktions-Form. Das ist schon mal sehr gut bei großen Projekten damit Funktionen mit gleichen Namen öfters verwendet werden können. (Ich nehme an du benutzt eine ähnliche Schreibweise wie hier: Programming Tutorials » Blog Archive » Writing Classes in Javascript )
Für das zusammenfassen von Scripten würde ich entweder Tools wie Ant benutzen oder die ganze Zusammenfassung serverseitig erledigen lassen. Es empfiehlt sich die Anzahl der zu ladenen JS-Dateien möglichst gering zu halten, da diese sequentiell nachgeladen werden, was bei vielen Dateien zu einem längeren Ladevorgang führt.
Ich habe schon JS-Dateien mit mehr als 5000 Zeilen gesehen. Solch große Dateien machen an sich keine Probleme, es sei denn man will sie mit Firebug debuggen ;) (Firebug kann dann manchmal spinnen)
Aber für den Produktiv-Einsatz würde ich raten die Dateien zusammenzufassen und anschließend zu komprimieren. Eine Möglichkeit dafür bietet der Google Closure Compiler (Closure Compiler - Google Code)

Zu deinem Event-Problem. Die Konfigurationen für deine Applikation könntest du auch im JSON Format zusammenfassen und dann deiner Applikation als Parameter mitgeben.
Solltest du weiteres Interesse an solchen Konstrukten haben, kannst du mich auch gerne privat anschreiben. :)

 

[mermshaus]

Gibt's einen bestimmten Grund, das nicht öffentlich machen zu wollen? Dann hätten alle was davon.

Sofern nicht bereits bekannt: Sinnvoll ist es vor allem immer, Textdaten (HTML, JS, CSS) gepackt an den Client zu übermitteln. Suche etwa nach „htaccess compression“.

Tools wie PageSpeed oder YSlow testen das glaube ich auch.

 

[Gilles]

Gibt's einen bestimmten Grund, das nicht öffentlich machen zu wollen? Dann hätten alle was davon.

Sofern nicht bereits bekannt: Sinnvoll ist es vor allem immer, Textdaten (HTML, JS, CSS) gepackt an den Client zu übermitteln. Suche etwa nach „htaccess compression“.

Tools wie PageSpeed oder YSlow testen das glaube ich auch.

Meinst du wegen dem "privat anschreiben" ?
Das hab ich nur geschrieben, damit man das eventuell dann am Ende per IM oder so bequatschen kann, da dieses Thema wie du ja auch weißt recht komplex ist :)

Ich hatte auch schon probiert solch ein "Klassen"-Konstrukt der Öffentlichkeit zu zeigen (siehe Programming Tutorials » Blog Archive » Writing Classes in Javascript), aber nachdem ich das Ganze auch auf Struppis Website gesehen, blieb es bei dem minimal Tutorial.

Hat denn jemand Anderes noch schöne Konstrukte um besser mit Javascript zu arbeiten? Hatte mir zwar schon einige Patterns angeschaut, jedoch noch keine optimale Variante für mich gefunden.

P.S.:
Ich finde es übrigens Schade, dass es keinen gesponsorten Teamspeak-Server oder so für html.de gibt
Denke man könnte hier mit manchen Personen nette Diskussionen bezüglich Themen halten. Müsste man Carsten vielleicht einmal vorschlagen ;)

 

[struppi]

Ich hatte auch schon probiert solch ein "Klassen"-Konstrukt der Öffentlichkeit zu zeigen (siehe Programming Tutorials » Blog Archive » Writing Classes in Javascript), aber nachdem ich das Ganze auch auf Struppis Website gesehen, blieb es bei dem minimal Tutorial.

Hat denn jemand Anderes noch schöne Konstrukte um besser mit Javascript zu arbeiten? Hatte mir zwar schon einige Patterns angeschaut, jedoch noch keine optimale Variante für mich gefunden.

Molily schreibt darüber wesentlich besser als ich:
Pseudoklassische Vererbung in JavaScript · molily