2012-08-07 9 views
13

Ich mache eine Javascript-Anwendung. Normalerweise mache ich verschiedene Module und erhalte Benutzereingaben oder Klickereignisse in $(document).ready(); Funktion. Dies funktioniert gut für kleine Anwendungen. Aber wenn ich dem gleichen Muster folge, dann bekomme ich Klickereignisse in $(document).ready();, dann wird es unordentlich.Organisieren Javascript-Code

Also, wie kann ich diese Datei für eine große Anwendung organisieren?

Vielen Dank im Voraus

+3

Ich stimme respektvoll mit dem Downvote; Du musst irgendwo anfangen. Es könnte jedoch auch erwogen werden, die Frage so zu erweitern, dass sie über Code angezeigt wird, wo der "unordentliche Schwellenwert" auftritt. – cantera

+1

@ cantera25 Es macht Sinn. Mit chaotisch meine ich, dass Code mehr als tausend Zeilen in einer Datei erreichen konnte. Ich möchte das nicht. – 2619

Antwort

12

Die Einzel beste Ressource, die ich zu diesem Thema gefunden habe, ist creative commons Buch Addy Osmani, Patterns for Large-Scale JavaScript Application Architecture. Es basiert teilweise auf Nicholas Zakas 'Scalable JavaScript Application Architecture, die es an klassische Designmuster und einen modernen Arbeitsablauf anpasst.

Sobald Sie selbst eine bescheidene Komplexität erreicht haben, profitieren Sie von der Arbeit mit einem Framework, das mit einer Variation des MVC-Architekturmusters erstellt wurde. Backbone.js ist der Spitzenreiter und ist ein Mikro-Framework, was bedeutet, dass es weniger Hand hält als andere. Andere populäre Wahlen sind Ember.js, KnockoutJS.

Erweiterungen und Textbausteine ​​werden ebenfalls auf diesen Frameworks erstellt, um sich wiederholende Aufgaben wie Daten-/Modellbindung und Scaffolding zu bewältigen. Für Backbone, check out Backbone.Marionette von Derick Bailey und Backbone Aura, eine nicht ganz bereit für die Produktion Anpassung der Osmani/Zakas Architektur-Modell mit Backbone als seine ... nun, Backbone gebaut.

6

Da es sich bei JavaScript um eine Skriptsprache handelt, ist Struktur eines der wichtigsten Probleme in umfangreichen Javascript-Projekten. Es ist wichtig, dass die Teile Ihrer Anwendung gut entkoppelt und eigenständig sind. In einem Beispiel können Sie eigene UI-Komponenten mit eigener Vorlage, Logik, Stil, Lokalisierung usw. in einem einzigen Ordner erstellen. Durch diese Selbsthaltung können Sie Ihren komplexen Front-End-Code übersichtlich verwalten.

Sobald Sie Ihren Code organisiert und in sich abgeschlossen haben, gibt es andere Bedenken, die Sie ebenfalls ansprechen müssen.

  • Wie sollten diese lose gekoppelten Komponenten interagieren mit heraus enge Kopplung
  • Wie soll ich diese einzelnen Teile optimieren laden schnell in meine Produktion env

Ich bin der Autor von BoilerplateJS Referenzarchitektur für groß angelegte Anwendungen.

http://boilerplatejs.org

Es meisten der besten Praktiken beinhaltet in Nicholas Zakas'presentation diskutiert. Im Code finden Sie auch eine Beispielimplementierung einer modularen Produktsuite. Werfen Sie einen Blick darauf, Sie werden die Bedenken verstehen, die Sie bei einer groß angelegten Anwendung mit JavaScript beachten müssen.