Wie organisieren Sie Ihren Javascript-Code?

Question

Als ich mit Javascript anfing, habe ich normalerweise alles, was ich brauchte, in Funktionen gesetzt und sie aufgerufen, wenn ich sie brauchte. Das war damals.

Jetzt, wie ich mehr und mehr komplexe Web-Anwendungen mit Javascript erstellen; Ich nutze die Vorteile seiner reaktionsschnellen Benutzerinteraktion und stelle fest, dass ich meinen Code lesbarer machen muss - nicht nur von mir, sondern auch von jedem, der mich ersetzt. Außerdem möchte ich die Momente reduzieren, "was zum Teufel, warum habe ich das getan", als ich Monate später meinen eigenen Code las () Ja, ich bin ehrlich hier, ich habe was zum Teufel ich dachte Momente ich selbst, obwohl ich versuche, solche Fälle zu vermeiden)

Vor ein paar Wochen kam ich in Joose, und bis jetzt war es gut, aber ich frage mich, was der Rest tun, um ihren Block ihre Codes sinnvoll zu machen Segmente und lesbar für den nächsten Programmierer.

Abgesehen davon, dass es lesbar ist, was sind Ihre Schritte, um Ihr HTML von Ihrer Codelogik zu trennen? Angenommen, Sie müssen dynamische Tabellenzeilen mit Daten erstellen. Nehmen Sie das in Ihren Javascript-Code auf, hängen Sie das td-Element an die Zeichenfolge an oder tun Sie etwas anderes. Ich suche nach realen Welt Lösungen und Ideen, nicht einige theoretische Ideen von einem Experten gestellt.

Also, falls Sie das oben genannte nicht verstanden haben, verwenden Sie OOP-Praktiken. Wenn du nicht was machst?

Answer 1

Für wirklich JS-schwere Anwendungen, sollten Sie versuchen, Java nachzuahmen.

• so wenig JS in Ihrem HTML wie möglich (vorzugsweise - nur der Aufruf an die Bootstrap-Funktion)
• Brechen Sie den Code in logische Einheiten, halten sie alle in separaten Dateien
• ein Skript zum verketten/die Dateien in einem einzelnen Bündel minify die Sie
• Verwenden JS Namespace als Teil Ihrer App dient der globalen Namensraum zu vermeiden, bis unübersichtlich:

 

var myapp = {}; 
myapp.FirstClass = function() { ... }; 
myapp.FirstClass.prototype.method = function() { ... }; 
myapp.SecondClass = function() { ... }; 

Die Verwendung all dieser Techniken ergibt ein sehr überschaubares Projekt, auch wenn Sie keine Frameworks verwenden.

Answer 2

Ich benutze unaufdringliches Javascript, also halte ich außerhalb der Skript-Tags kein Javascript im HTML.

Die beiden sind vollständig getrennt.

Eine JavaScript-Funktion wird gestartet, wenn der DOM-Baum fertiggestellt ist, der durch den HTML-Code geht und die Javascript-Ereignisse und alles, was noch geändert werden muss, hinzufügt.

Um zu organisieren, neige ich dazu, einige Javascript-Dateien, die ähnlich zu den HTML-Seiten benannt sind, die sie verwenden, und dann für allgemeine Funktionen neigen ich dazu, sie nach dem zu gruppieren, was sie tun, und wählen Sie einen Namen, der das erklärt .

So zum Beispiel, wenn ich UI-Funktionen haben, dann kann ich sie nenne: myapp_ui_functions.js

Ich versuche, den Namen der Anwendung in den Dateinamen zu setzen, es sei denn, einige Javascript ist, die mehrere gemeinsam ist Projekte wie strings.js.

Answer 3

Ich habe viel von meinem wiederverwendbaren Code als jQuery-Plugins umgeschrieben. Ich bin von Prototype zu jQuery gewechselt, als ich mit ASP.NET MVC angefangen habe. Überstunden Ich habe viel meinen wiederverwendbaren Code oder zumindest die Ideen von prototypischen OO zu jQuery-ähnlichen Plugins migriert. Die meisten davon sind in eigenen JS-Dateien gespeichert (hauptsächlich Intranet-Apps, so dass die Seitenladegeschwindigkeit trotz der zusätzlichen Anfragen ziemlich hoch ist). Ich nehme an, ich könnte einen Build-Schritt hinzufügen, der diese zusammenführt, wenn es nötig ist.

Ich habe mich auch für einen MasterPage-Ansatz entschieden, der einen ContentPlaceHolder für Skripte direkt vor dem schließenden Body-Tag verwendet. Die standardmäßige jQuery/jQuery-Benutzerschnittstelle wird geladen, und alle anderen gängigen JS-Elemente werden direkt vor dem Skriptplatzhalter in der MasterPage eingefügt. Ich habe ein kleines bisschen JS am Anfang der MasterPage, die ein Array definiert, das alle Funktionen enthält, die Teilansichten beim Laden der Seite ausführen müssen. Diese Funktionen werden von der Basisfunktion document.ready() in der MasterPage ausgeführt.

Alle meine JS ist komplett getrennt von meiner Markierung.Einige JS können in Teilansichten vorhanden sein - diese sind gekapselt, wenn das Teil möglicherweise mehr als einmal enthalten ist, um es für diese Instanz der Ansicht spezifisch zu machen - aber im Allgemeinen nicht. In der Regel nur in den Platzhaltern enthalten, so dass es am unteren Rand der Seite geladen wird.

Answer 4

Auch wenn Sie OO schwer gehen wollen Besuche MochiKit: http://www.mochikit.com/

Answer 5

Ich habe (in der Regel) eine Datei, die eine Reihe von Funktionen enthält und das ist es. Das ist auf jeder Seite enthalten, die Javascript verwendet. Auf den folgenden Seiten selbst, werde ich die Anrufe auf die Funktionen wie machen:

$(function() { 
    $("#delete").click(delete_user); 
    $("#new").click(new_user); 
}); 

wo delete_user() und new_user() in der externen Datei definiert.

Auch ich benutze unauffälliges Javascript, was für mich bedeutet jQuery (es gibt andere Bibliotheken, die unaufdringlich sind).

Sie möchten keine separate Datei für jede Seite. Das bedeutet nur mehr unnötige externe HTTP-Anfragen. Mit einer Datei — unter der Annahme, Sie haben es effektiv zwischengespeichert — wird es einmal heruntergeladen werden, und das ist es (bis es ändert).

Wenn ich eine große Menge von Javascript habe oder die Website effektiv in mehrere Bereiche aufgeteilt ist, dann kann ich das Javascript teilen, aber das ist nicht oft der Fall.

Auch in Bezug auf meine Quellcode, kann ich mehrere JS-Dateien haben, aber ich werde oft am Ende kombiniert sie in einen Download für den Client (um HTTP-Anfragen zu reduzieren).

Mehr unter Multiple javascript/css files: best practices? und Supercharging Javascript in PHP.

Answer 6

Ich finde, dass die Entwicklung Ihres Javascript mit OO-Methodik der Weg ist, wenn Sie wollen, dass es sauber, lesbar und sogar etwas sicher ist. Ich stellte die folgende Frage

Cleanest format for writing javascript objects

Und bekam einige fantastische Antworten auf, wie mein Javascript-Code, gut zu schreiben. Wenn Sie diesen Grundprinzipien folgen, können Sie mit Leichtigkeit fast jede Bibliothek wie yui, jquery und prototype verwenden.