Beim Erstellen von Webapps mit MVC-Webframworks wie Django, Kohana, Rails und dergleichen, habe ich die Anwendung zunächst ohne JS-gesteuerte Komponenten zusammengestellt und diese anschließend als "Verbesserungen" der Benutzeroberfläche hinzugefügt.
Dieser Ansatz führt zu nicht-intrusiven JS, aber ich habe keine gute "Standard" -Methode, wie man die JS-Arbeit organisiert. Die meisten JS, die ich in Apps wie diesen schreibe, sind 10-30-Zeilen-JQuery-Snippets, die in einen sehr spezifischen Teil der Benutzeroberfläche eingebunden sind.
Bis jetzt schließe ich oft diese Dinge zusammen mit dem Teil der Benutzeroberfläche, den sie verwalten. Das macht mich schmutzig, ich möchte den JS-Code so organisiert wie den python / php / ruby-Code behalten, ich möchte, dass er testbar ist und ich möchte, dass er wiederverwendbar ist.
Was ist der beste Weg, JS-Code in einem Setup wie diesem zu organisieren, in dem wir keine vollständige JS-Client-App erstellen und das Hauptproblem immer noch die Server-Seite ist?
Ich bin auch sehr daran interessiert, was andere dazu sagen. Der Ansatz, den ich gewählt habe, ist die Objektliteralnotation, um den Großteil der Funktion zu speichern und diese in einer Datei auf allen Seiten (der Bibliothek) zu speichern.
%Vor%Dann schließe ich eine .js-Datei auf jeder Seite ein, die die Bibliothek verwenden muss, die die Elemente auf dieser Seite mit der Funktion in der Bibliothek verknüpft. Ich habe versucht, jede Funktion so wiederverwendbar wie möglich zu machen, und manchmal ruft die Ereignisbindungsfunktion auf der Seite mehrere meiner Bibliotheksfunktionen auf.
%Vor%edit: mit jsDoc Ссылка Schreibweise für die Kommentierung für diese Funktionen kann Dokumentation für die "Bibliothek" erstellen und hilft Ihnen, Ihren Code einfach zu halten lesen (Funktionen nach Kommentaren aufgeteilt).
Die folgende Frage ähnelt Ihren eigenen - Sie sollten es überprüfen ...
allgemein akzeptierte Best Practices für die Code-Organisation in JavaScript
Wenn Sie mit JS-Code arbeiten, sollten Sie zuerst analysieren, ob es sofort beim Laden der Seite verwendet wird. Wenn es nicht sofort verwendet wird (dh der Benutzer muss etwas tun, um es aufzurufen), sollten Sie es in eine JS-Datei packen und es später einfügen, damit die Ladezeit für den Benutzer schneller wahrgenommen wird. Dies bedeutet, dass alles, was der Benutzer sehen wird, zuerst gehen sollte, und JS, das sich auf die Funktionalität bezieht, sollte nahe dem Ende der Datei importiert werden. Laden Sie dieses Tool herunter, um Ihre Website zu analysieren: Ссылка Wenn der JS-Code klein genug ist, sollte er nur inline mit dem HTML-Code sein. Hoffe das hilft ein bisschen.
Für schnelle, kleine Benutzeroberflächen-Dinge wie diese lege ich alles in eine einzige Javascript-Datei, die ich auf jeder Seite einfüge. Dann überprüfe ich in der Javascript-Datei, was auf der Seite existiert und führe Code entsprechend aus. Ich könnte dies zum Beispiel in UIMagic.js haben. Ich habe jQuery, also entschuldige diese jQuery-Ismen, wenn sie dir nicht bekannt sind.
Ich habe festgestellt, dass dies ein vernünftiger Ansatz ist.
Meine bevorzugte Methode ist es, Javascript in seiner eigenen Datei zu speichern (so dass ich es leicht mit Syntax-Highlighting usw. bearbeiten kann) und es dann auf die Seite zu legen, indem ich den Inhalt direkt lade:
%Vor%Dies funktioniert möglicherweise nicht gut, es sei denn, Ihre Templating-Bibliothek kann solche Dinge zwischenspeichern.
Mit Django können Sie die js-Datei einschließen:
%Vor%Nicht sicher, ob das die Ausgabe zwischenspeichert.
Wenn Sie immer noch besorgt sind, "schmutzig" zu sein, dann könnten Sie die folgenden Projekte ausprobieren, die versuchen, die Server / Client-Seitensprachenübereinstimmung zu überbrücken:
Ссылка (Python erzeugt JavaScript)
Ссылка (Java, das JavaScript generiert)
Ссылка (JavaScript auf dem ganzen Weg!)
Tags und Links javascript architecture