Best Practices für die Verwaltung und Bereitstellung großer JavaScript-Apps

Question

Was sind einige Standardpraktiken für die Verwaltung einer mittelgroßen JavaScript-Anwendung?Meine Bedenken gelten sowohl der Geschwindigkeit des Browser-Downloads als auch der Einfachheit und Wartbarkeit der Entwicklung.

Unser JavaScript-Code hat ungefähr den folgenden „Namespace“:

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

Im Moment verfügen wir über eine (entpackte, entstripte, gut lesbare) JavaScript-Datei, die die gesamte Geschäftslogik in der Webanwendung verwaltet.Darüber hinaus gibt es jQuery und mehrere jQuery-Erweiterungen.Das Problem, mit dem wir konfrontiert sind, ist, dass es dauert für immer nichts im JavaScript-Code zu finden, und der Browser muss immer noch ein Dutzend Dateien herunterladen.

Ist es üblich, eine Handvoll „Quell“-JavaScript-Dateien zu haben, die zu einer endgültigen, komprimierten JavaScript-Datei „kompiliert“ werden?Gibt es weitere nützliche Tipps oder Best Practices?

Answer 1

Der Ansatz, den ich gefunden habe, funktioniert für mich darin, für jede Klasse separate JS-Dateien zu haben (genau wie in Java, C# und anderen).Alternativ können Sie Ihr JS in Anwendungsfunktionsbereiche gruppieren, wenn dies für Sie einfacher zu navigieren ist.

Wenn Sie alle Ihre JS-Dateien in einem Verzeichnis ablegen, kann Ihre serverseitige Umgebung (z. B. PHP) jede Datei in diesem Verzeichnis durchlaufen und eine ausgeben <script src='/path/to/js/$file.js' type='text/javascript'> in einer Header-Datei, die in allen Ihren UI-Seiten enthalten ist.Dieses automatische Laden ist besonders praktisch, wenn Sie regelmäßig JS-Dateien erstellen und entfernen.

Bei der Bereitstellung in der Produktion sollten Sie über ein Skript verfügen, das sie alle in einer JS-Datei zusammenfasst und diese „minimiert“, um die Größe gering zu halten.

Answer 2

Außerdem empfehle ich Ihnen, Google zu verwenden AJAX-Bibliotheks-API um externe Bibliotheken zu laden.

Dabei handelt es sich um ein Google-Entwicklertool, das die wichtigsten JavaScript-Bibliotheken bündelt und deren Bereitstellung, Aktualisierung und Gewichtsreduzierung erleichtert, indem stets komprimierte Versionen verwendet werden.

Außerdem wird Ihr Projekt dadurch einfacher und leichter, da Sie diese Bibliotheksdateien nicht herunterladen, kopieren und in Ihrem Projekt verwalten müssen.

Benutzen Sie es so:

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

Answer 3

Es gibt einen hervorragenden Artikel über Vitamin von Cal Henderson von Flickr darüber, wie sie die Bereitstellung ihres CSS und JavaScript optimieren: http://www.iamcal.com/serving-javascript-fast/

Answer 4

Nur ein Nebenknoten – Steve hat bereits darauf hingewiesen, dass Sie Ihre JS-Dateien wirklich „minimieren“ sollten.In JS sind Leerzeichen tatsächlich wichtig.Wenn Sie tausend Zeilen JS haben und nur die nicht benötigten Zeilenumbrüche entfernen, haben Sie bereits etwa 1 KB gespart.Ich denke, Sie verstehen, worum es geht.

Für diesen Job gibt es Werkzeuge.Und Sie sollten das „minimierte“/entfernte/verschleierte JS niemals von Hand ändern!Niemals!

Answer 5

In unseren großen Javascript-Anwendungen schreiben wir unseren gesamten Code in kleine separate Dateien – eine Datei pro „Klasse“ oder Funktionsgruppe, und verwenden dabei eine Art Java-ähnliche Namensraum-/Verzeichnisstruktur.Wir haben dann:

• Ein Schritt zur Kompilierungszeit, der unseren gesamten Code übernimmt und ihn minimiert (mithilfe einer Variante von JSMin), um die Downloadgröße zu reduzieren
• Ein Schritt zur Kompilierungszeit, der die Klassen, die immer oder fast immer benötigt werden, zu einem großen Paket zusammenfasst, um Roundtrips zum Server zu reduzieren
• Ein „Klassenlader“, der die verbleibenden Klassen bei Bedarf zur Laufzeit lädt.

Answer 6

Aus Gründen der Servereffizienz ist es am besten, Ihr gesamtes Javascript in einer minimierten Datei zusammenzufassen.

Bestimmen Sie die Reihenfolge, in der der Code erforderlich ist, und platzieren Sie dann den minimierten Code in der erforderlichen Reihenfolge in einer einzelnen Datei.

Der Schlüssel besteht darin, die Anzahl der zum Laden Ihrer Seite erforderlichen Anforderungen zu reduzieren. Aus diesem Grund sollten Sie für die Produktion das gesamte Javascript in einer einzigen Datei haben.

Ich würde empfehlen, die Dateien für die Entwicklung aufzuteilen und dann ein Build-Skript zu erstellen, um alles zu kombinieren/kompilieren.

Als Faustregel gilt außerdem, dass Sie Ihr JavaScript am Ende Ihrer Seite einfügen.Wenn JavaScript im Header (oder an einer frühen Stelle auf der Seite) enthalten ist, werden alle anderen Anfragen bis zum Laden gestoppt, selbst wenn das Pipelining aktiviert ist.Wenn es sich am Ende der Seite befindet, tritt dieses Problem nicht auf.

Answer 7

Lesen Sie den Code anderer (guter) Javascript-Apps und sehen Sie, wie sie damit umgehen.Aber ich beginne mit einer Datei pro Klasse.Aber sobald es für die Produktion bereit ist, würde ich die Dateien zu einer großen Datei zusammenfassen und verkleinern.

Der einzige Grund, warum ich die Dateien nicht zusammenfassen würde, wäre, wenn ich nicht alle Dateien auf allen Seiten bräuchte.

Answer 8

Meine Strategie besteht aus zwei Haupttechniken:AMD-Module (um Dutzende von Skript-Tags zu vermeiden) und das Modulmuster (um eine enge Kopplung der Teile Ihrer Anwendung zu vermeiden)

AMD-Module:sehr einfach, siehe hier: http://requirejs.org/docs/api.html Außerdem ist es in der Lage, alle Teile Ihrer App in einer minimierten JS-Datei zu packen: http://requirejs.org/docs/optimization.html

Modulmuster:Ich habe diese Bibliothek verwendet: https://github.com/flosse/scaleApp Du fragst dich jetzt, was ist das?weitere Infos hier: http://www.youtube.com/watch?v=7BGvy-S-Iag