Wie sollen große JavaScript-Anwendungen aufgebaut sein?

Vor kurzem wurden mir einige für OBIEE Mobile App Developer geschriebene JavaScript-Plugins sowie einige benutzerdefinierte Bibliotheken für verschiedene Projekte angezeigt.

Ich habe einen OOP-Hintergrund und bin ein wenig verwirrt über die Struktur dieser Projekte. Ich sehe Dateien, die Tausende von Zeilen lang sind. Ich bin es gewohnt, Dinge in Dateien und Klassen aufzuteilen, aber ich verstehe, dass dies ein anderes Framework ist - zum einen ist die Dateigröße ein Problem -, aber muss es einen besseren Weg geben, dies alles zu tun?

Die Länge der Skripte beeinflusst nicht nur die Lesbarkeit und Wartbarkeit, sondern auch das allgemeine Verständnis einer Person für die Funktionsweise des Programms.

Wie sind große Anwendungen aufgebaut? Gibt es hierfür allgemeine OOP-Entwurfsmuster?

Wenn Sie nicht mit JavaScript-Mustern vertraut sind, kann ich Ihnen sagen, dass viele große Anwendungen und Bibliotheken Revealing Module Pattern verwenden , aber es gibt viele andere Muster, die Sie je nach Ihren Anforderungen verwenden können.

Das Revealing Module Pattern sollte Ihnen jedoch eine gute Möglichkeit bieten, große Dateien aufzuteilen und logisch zu organisieren. Beachten Sie jedoch, dass dies bei der Arbeit mit Entwurfsmustern in JavaScript sehr verwirrend sein kann. Versuchen Sie verwenden diese , neuen , Prototyp , .call()und mit .apply()Bedacht aus .

Während der Arbeit an großen Projekten können diese auch nützlich sein:

• Wechseln Sie nach Möglichkeit zu TypeScript oder ES6.
• Schreiben Sie modularen Code. Es gibt verschiedene Möglichkeiten und Bibliotheken von Drittanbietern, aber jede davon ist besser als nichts.
• Verwenden Sie ein Task Runner / Build System, um Aufgaben zu automatisieren.
• Lesen Sie mehr über Design Patterns . Dies könnte ein guter Anfang sein. Wie bereits erwähnt, ist das Muster des Enthüllungsmoduls sehr nützlich, insbesondere wenn Sie der Meinung sind, dass Sie Zeit benötigen, um alle gängigen Muster zu beherrschen.
• Unit Tests schreiben . Das Arbeiten mit einer dynamischen Sprache kann schwieriger sein. Das Testen der wichtigsten Teile Ihrer Anwendung kann viel Zeit sparen.
• Verwenden Sie ein IDE oder Text - Editor , die tatsächlich Sie sowohl mit dem Schreiben von Code und fangen Bugs helfen können. WebStorm ist eine gute Wahl. Erhabener Text auch.
• Wenn Ihre IDE keinen Debugger anbietet, versuchen Sie, den Debugger Ihres bevorzugten Webbrowsers zu beherrschen.
• Verwenden Sie Bibliotheken. Versuchen Sie je nach Art des Projekts, den besten Code eines Drittanbieters zu verwenden, den Sie finden können. Wenn Sie eine Webanwendung schreiben, schauen Sie sich Angular , React und die guten alten backbone.js an . Wenn Sie eine Node.js-Anwendung schreiben, nehmen Sie sich Zeit für die Suche im NPM- Repository. Sie werden überrascht sein, wie viele Packeges bereits das tun, was Sie gerade tun wollten.
• Auch wenn Sie die einzige Person sind, die an dem Projekt arbeitet, verwenden Sie dennoch ein Versionskontrollsystem wie Git und befolgen Sie einen Kodierungsstandard , der nicht zu streng und eigensinnig ist, aber dennoch eine gute Richtlinie bietet, auf die sich auch Ihre Teamkollegen freuen würden Folgen.
• Selbst wenn Sie sich für TypeScript oder ES6 entscheiden und das OOP ohne Klassen von JavaScript verstehen, kann das Prototyp-OOP hilfreich sein, insbesondere beim Debuggen.

Ich bin ein C ++ - Entwickler und habe in letzter Zeit angefangen, Web-Entwicklung zu betreiben. Ich portiere eine große Desktop-App in die Webumgebung. Ich strukturiere meinen JavaScript-Code genau so, wie ich C ++ - Code strukturiert habe, wobei ich die gleichen Muster verwende. Insgesamt habe ich ungefähr 25-30 Dateien, aber ich werde sie irgendwann auf 3-5 reduzieren, indem ich sie je nach Bedarf in einen Club lege und sie alle minimiere.

Für mich ist es nur die Sprache, die sich zum Guten oder Schlechten verändert hat, aber nicht das Paradigma. Trotz aller Fehler und Frustrationen ist JavaScript eine gelungene Mischung aus funktionalem und OOP-Stil. Bisher hat es gut geklappt.

Als letztes wurde mir früh klar, dass JavaScript das Schreiben von viel prägnanterem Code als in C ++ ermöglicht. Daher kann es manchmal daran liegen, dass eine große Anzahl von LOCs aus Nicht-JS-Sprachen stammt, dass ich mich an alte Methoden hielt. Sobald diese Sache angesprochen ist, sehe ich nichts, was wirklich anders sein sollte. Design und Algorithmen sind schließlich sprachunabhängig.

Es ist natürlich von Projekt zu Projekt sehr unterschiedlich, aber die allgemein anerkannte Praxis ist, dass für Dinge, die als Bibliotheken oder Module fungieren sollen, diese in einer einzigen großen Datei abgelegt und durch Kapselung verhindert werden ("privat"). ) Schnittstelle gegen Leckage nach außen. Es ist auch hilfreich für Entwickler, die die Bibliothek / das Modul verwenden möchten - eine Datei, die der Anwendungskonfiguration oder dem Header-Snippet hinzugefügt werden soll, anstatt einer ganzen Hierarchie von Ordnern und Dateien, die kopiert und eingefügt werden sollen. Dies spiegelt auch die Tatsache wider, dass bei Minimierung und Bündelung in einem Produktionsstandort höchstwahrscheinlich alle in einer Datei zusammengefasst werden, um die Anzahl der HTTP-Anforderungen zu verringern.

Ihr eigener Anwendungscode muss dieser Praxis nicht folgen und sollte es wahrscheinlich auch nicht. Da Ihre App die einzige ist, die sie verwendet, müssen Sie die Dateien nur einmal hinzufügen und können sich wahrscheinlich auf die Plattform verlassen, um die Minimierung und Bündelung für Sie zu erledigen.

Bei der Arbeit am Code werden die verschiedenen Komponenten in der Regel in Module aufgeteilt, von denen jedes in der Regel eine einzelne Klasse implementiert und in einer separaten Datei gespeichert ist. Während der Produktion werden diese Dateien dann zu einer einzigen Datei gebündelt (daher die Tausenden von Codezeilen, die Sie sehen). Verwenden Sie dazu Browserify ( http://browserify.org/ ) oder RequireJS, um die Anzahl der HTTP-Anforderungen zu verringern. sondern auch, um sicherzustellen, dass Abhängigkeiten in der richtigen Reihenfolge geladen werden

Was die Implementierung der Klassen für diese Module anbelangt, unterscheidet sich die zugrunde liegende Mechanik ein wenig von der OOP, aber nicht so stark von der Oberfläche. ES6 hat sogar das classSchlüsselwort eingeführt, es sollte also ziemlich vertraut aussehen. Dieser Artikel in MDN ist nützlich zum Starten von: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

Ich verwende (Petris) Net Elements und Annotations, um Software für meine PDF-Formularanwendungen zu organisieren oder zu strukturieren - JavaScript-Programme, die die Acrobat / JavaScript-API verwenden. Vielleicht kann es in Ihrer Situation nützlich sein.

Ein Diagramm wird verwendet, um die Eingabe-Ausgabe-Beziehungen von Netzelementen und zwei Formularansichten der Anmerkungen festzulegen. Basierend auf den Diagramm- und Formularansichten können systematisch JavaScript-Programme für PDF-Formularanwendungen erstellt werden. Das „Lesen“ des Quellcodes reduziert sich somit auf die Überprüfung, ob er den Spezifikationen entspricht: das Diagramm und zwei Formularansichten.

Die Implementierung meiner Software verwendet Konstruktoren und Prototypen. Wenn Leistung zu einem Problem wird, kann das Ersetzen von Prototypen durch Instanzmitglieder die Leistung auf Kosten einer höheren Speichernutzung verbessern. Arrays werden ebenfalls verwendet. Wenn Leistung ein Problem wird, werden direkte Verweise verwendet.

Einige der Eigenschaften werden mit eval erstellt. Bei Objekten mit sehr vielen Eigenschaften würde dies die Menge an Code in der Quelldatei verringern - und die Menge an Eingaben durch den Programmierer.

Es ist weiterhin möglich und empfehlenswert, JavaScript in der gewohnten OOP-Weise zu schreiben. Hier ist ein gutes Buch, das die wichtigsten Entwurfsmuster in JavaScript behandelt.

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Es gibt auch viele JavaScript-Frameworks, bei denen das Hauptziel darin besteht, den Code in verschiedene Dateien und Module aufzuteilen. Wenn das spezielle Framework, in dem Sie arbeiten, erfordert, dass Sie Ihren gesamten Code in einer Datei haben, sollten Sie auf jeden Fall versuchen, zu wechseln.