JavaScript stammt aus dem frühen Web. Zunächst wurden einfache Skripte darauf geschrieben, die die Seiten der Websites „belebten“. Jetzt ist JS zu einer vollwertigen Programmiersprache geworden, mit der sogar serverseitige Projekte entwickelt werden können.
Moderne Webanwendungen basieren stark auf JavaScript. Dies gilt insbesondere für einseitige Anwendungen (Single-Page Application, SPA). Mit dem Aufkommen von Bibliotheken und Frameworks wie React, Angular und Vue ist JavaScript zu einem der Hauptbausteine von Webanwendungen geworden.
Das Skalieren solcher Anwendungen, unabhängig davon, ob es sich um Client- oder Serverteile handelt, kann eine sehr schwierige Aufgabe sein. Wenn solche Anwendungen auf einer schlecht durchdachten Architektur basieren, werden ihre Entwickler früher oder später mit bestimmten Einschränkungen konfrontiert sein. Sie ertrinken in einem Meer unangenehmer Überraschungen.
Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, möchte Tipps zum Schreiben von reinem JavaScript-Code geben. Er sagt, der Artikel sei für JS-Programmierer aller Schwierigkeitsgrade gedacht. Es ist jedoch besonders nützlich für diejenigen, die mit JavaScript zumindest auf mittlerer Ebene vertraut sind.
1. Code-Isolation
Um die Codebasis des Projekts sauber zu halten, damit der Code leicht gelesen werden kann, wird empfohlen, Codefragmente je nach Zweck in separate Blöcke zu unterteilen. Diese Blöcke sind normalerweise Funktionen. Ich halte diese Empfehlung für die wichtigste, die ich geben kann. Wenn Sie eine Funktion schreiben, müssen Sie sich sofort darauf konzentrieren, dass diese Funktion darauf abzielt, ein einzelnes Problem zu lösen. Die Funktion sollte nicht zur Lösung mehrerer Probleme ausgelegt sein.
Darüber hinaus sollten Sie sicherstellen, dass Funktionsaufrufe nicht zu Nebenwirkungen führen. In den meisten Fällen bedeutet dies, dass die Funktion nichts ändern sollte, was außerhalb der Funktion deklariert ist. Daten werden über Parameter empfangen. Sie sollte mit nichts anderem arbeiten. Sie müssen eine der Funktionen mit dem Schlüsselwort
return .
2. Aufteilung des Codes in Module
Funktionen, die auf ähnliche Weise verwendet werden oder ähnliche Aktionen ausführen, können in einem Modul (oder, wenn Sie möchten, in einer separaten Klasse) zusammengefasst werden. Angenommen, Sie müssen in Ihrem Projekt verschiedene Berechnungen durchführen. In einer solchen Situation ist es sinnvoll, die verschiedenen Stufen solcher Berechnungen in Form von separaten Funktionen (isolierten Blöcken) auszudrücken, deren Aufrufe zu Ketten zusammengefasst werden können. Alle diese Funktionen können jedoch in einer einzigen Datei (dh in einem Modul) deklariert werden. Hier ist ein Beispiel für das Modul
calculation.js , das ähnliche Funktionen enthält:
function add(a, b) { return a + b } function subtract(a, b) { return a - b } module.exports = { add, subtract }
Und so können Sie dieses Modul in einer anderen Datei verwenden (nennen wir es
index.js ):
const { add, subtract } = require('./calculations') console.log(subtract(5, add(3, 2))
Entwickler von Frontend-Anwendungen können die folgenden Empfehlungen erhalten. Verwenden Sie die Standardexportoptionen, um die wichtigsten im Modul deklarierten Entitäten zu exportieren. Für sekundäre Entitäten können Sie den benannten Export verwenden.
3. Verwenden Sie mehrere Funktionsparameter anstelle eines einzelnen Objekts mit Parametern
Wenn Sie eine Funktion deklarieren, sollten Sie versuchen, mehrere Parameter anstelle eines einzelnen Objekts mit Parametern zu verwenden. Hier einige Beispiele:
Das Vorhandensein einer Funktion mit mehreren Parametern ermöglicht es Ihnen, sofort herauszufinden, was an sie übergeben werden muss, indem Sie sich die erste Zeile ihrer Deklaration ansehen. Genau aus diesem Grund gebe ich diese Empfehlung ab.
Trotz der Tatsache, dass Sie bei der Entwicklung von Funktionen darauf achten müssen, dass jede von ihnen nur ein Problem löst, kann der Funktionscode sehr groß sein. Wenn eine Funktion ein einzelnes Objekt mit Parametern akzeptiert, müssen Sie möglicherweise den gesamten Code überprüfen und viel Zeit damit verbringen, um genau herauszufinden, was sie erwartet. Manchmal scheint es, dass es bei der Arbeit mit Funktionen viel einfacher ist, ein einzelnes Objekt mit Parametern zu verwenden. Wenn Sie jedoch Funktionen schreiben, ist es angesichts der möglichen zukünftigen Skalierung der Anwendung besser, mehrere Parameter zu verwenden.
Es ist zu beachten, dass es eine bestimmte Grenze gibt, nach der die Verwendung einzelner Parameter ihre Bedeutung verliert. In meinem Fall sind dies vier bis fünf Parameter. Wenn eine Funktion so viel Eingabe benötigt, sollte ein Programmierer die Verwendung eines Objekts mit Parametern in Betracht ziehen.
Der Hauptgrund für diese Empfehlung ist, dass die von der Funktion erwarteten Einzelparameter in einer bestimmten Reihenfolge an sie übergeben werden müssen. Wenn einige der Parameter optional sind, müssen Sie stattdessen Funktionen wie
undefined oder
null . Bei Verwendung eines Objekts mit Parametern spielt die Reihenfolge der Parameter im Objekt keine Rolle. Bei diesem Ansatz können Sie darauf verzichten, die optionalen Parameter auf
undefined .
4. Umstrukturierung
Restrukturierung ist ein nützlicher Mechanismus, der in ES6 aufgetaucht ist. Sie können die angegebenen Felder aus Objekten extrahieren und sofort in Variablen schreiben. Es kann bei der Arbeit mit Objekten und Modulen verwendet werden:
Insbesondere bei der Arbeit mit Modulen ist es sinnvoll, nicht das gesamte Modul, sondern nur die erforderlichen Funktionen in eine Datei zu importieren und ihnen verständliche Namen zu geben. Andernfalls müssen Sie über eine Variable, die das Modul symbolisiert, auf Funktionen zugreifen.
Ein ähnlicher Ansatz gilt für Fälle, in denen ein einzelnes Objekt als Funktionsparameter verwendet wird. Auf diese Weise können Sie in der ersten Zeile der Funktion sofort herausfinden, was genau als Objekt mit Parametern erwartet wird:
function logCountry({name, code, language, currency, population, continent}) { let msg = `The official language of ${name} ` if(code) msg += `(${code}) ` msg += `is ${language}. ${population} inhabitants pay in ${currency}.` if(contintent) msg += ` The country is located in ${continent}` } logCountry({ name: 'Germany', code: 'DE', language 'german', currency: 'Euro', population: '82 Million', }) logCountry({ name: 'China', language 'mandarin', currency: 'Renminbi', population: '1.4 Billion', continent: 'Asia', })
Wie Sie sehen können, können Sie trotz der Tatsache, dass die Funktion ein einzelnes Objekt mit Parametern akzeptiert, anhand ihrer Destrukturierung herausfinden, was genau beim Aufruf der Funktion darin platziert werden muss. Der nächste Tipp wird sein, wie Sie dem Benutzer genauer mitteilen können, was die Funktion erwartet.
Restrukturierung kann übrigens auch bei der Arbeit mit Funktionskomponenten von React eingesetzt werden.
5. Legen Sie Standardwerte für Funktionsparameter fest
Die Standardwerte der Parameter von Funktionen, die Standardwerte von Parametern, sind sinnvoll, wenn Objekte mit Parametern zerstört werden und in diesen Fällen, wenn Funktionen Listen von Parametern akzeptieren. Erstens gibt es dem Programmierer ein Beispiel dafür, welche Funktionen übergeben werden können. Zweitens können Sie herausfinden, welche Parameter obligatorisch und welche optional sind. Wir ergänzen die Funktionsdeklaration aus dem vorherigen Beispiel um Standardparameterwerte:
function logCountry({ name = 'United States', code, language = 'English', currency = 'USD', population = '327 Million', continent, }) { let msg = `The official language of ${name} ` if(code) msg += `(${code}) ` msg += `is ${language}. ${population} inhabitants pay in ${currency}.` if(contintent) msg += ` The country is located in ${continent}` } logCountry({ name: 'Germany', code: 'DE', language 'german', currency: 'Euro', population: '82 Million', }) logCountry({ name: 'China', language 'mandarin', currency: 'Renminbi', population: '1.4 Billion', continent: 'Asia', })
Es ist offensichtlich, dass in einigen Fällen, wenn beim Aufrufen einer Funktion kein Funktionsparameter an diesen übergeben wurde, ein Fehler angegeben werden muss, anstatt den Standardwert dieses Parameters zu verwenden. Oft ist die hier beschriebene Technik jedoch sehr hilfreich.
6. Übergeben Sie keine unnötigen Daten an Funktionen
Die vorherige Empfehlung führt uns zu einer interessanten Schlussfolgerung. Es besteht darin, dass Funktionen nicht die Daten übertragen müssen, die sie nicht benötigen. Wenn Sie diese Regel befolgen, kann die Entwicklung von Funktionen zusätzliche Zeit erfordern. Auf lange Sicht wird dieser Ansatz jedoch zur Bildung einer Codebasis führen, die sich durch gute Lesbarkeit auszeichnet. Darüber hinaus ist es unglaublich nützlich zu wissen, welche Art von Daten an den einzelnen Stellen des Programms verwendet werden.
7. Begrenzen der Anzahl der Zeilen in Dateien und der maximalen Verschachtelung des Codes
Ich habe große Dateien mit Programmcode gesehen. Sehr groß. Einige hatten über 3.000 Leitungen. In solchen Dateien ist die Navigation sehr schwierig.
Aus diesem Grund wird empfohlen, die Größe der in Codezeilen gemessenen Dateien zu begrenzen. Normalerweise bemühe ich mich sicherzustellen, dass die Größe meiner Dateien 100 Zeilen nicht überschreitet. Manchmal, wenn es schwierig ist, eine bestimmte Logik in kleine Fragmente zu zerlegen, erreichen die Größen meiner Dateien 200 bis 300 Zeilen. Und sehr selten erreicht ihre Größe 400 Zeilen. Dateien, die diese Grenze überschreiten, sind schwer zu lesen und zu pflegen.
Erstellen Sie während der Arbeit an Ihren Projekten mutig neue Module und Ordner. Die Projektstruktur sollte einer Gesamtstruktur ähneln, die aus Bäumen (Gruppen von Modulen und Moduldateien) und Zweigen (Abschnitten von Modulen) besteht. Stellen Sie sicher, dass Ihre Projekte nicht wie Bergketten aussehen.
Wenn wir über das Erscheinungsbild der Dateien selbst mit dem Code sprechen, sollten sie dem Gelände mit niedrigen Hügeln ähnlich sein. Es geht darum, große Ebenen der Code-Verschachtelung zu vermeiden. Es lohnt sich sicherzustellen, dass die Verschachtelung des Codes vier Ebenen nicht überschreitet.
Vielleicht hilft die Einhaltung dieser Empfehlungen, die entsprechenden ESLint-Linter-Regeln anzuwenden.
8. Verwenden Sie Werkzeuge, um Code automatisch zu formatieren
Wenn Sie in einem Team an JavaScript-Projekten arbeiten, müssen Sie eine klare Anleitung zum Stil und zur Formatierung des Codes entwickeln. Sie können die Codeformatierung mit ESLint automatisieren. Dieser Linter bietet dem Entwickler eine Vielzahl an anpassbaren Regeln. Es gibt einen
eslint --fix , der einige Fehler beheben kann.
Ich empfehle jedoch, Prettier anstelle von ESLint zu verwenden, um die Codeformatierung zu automatisieren. Bei diesem Ansatz muss sich der Entwickler möglicherweise nicht um die Codeformatierung kümmern. Er muss nur Qualitätsprogramme schreiben. Der gesamte Code, der automatisch mit einem einzigen Regelsatz formatiert wird, sieht konsistent aus.
9. Verwenden Sie gut gestaltete Variablennamen
Der Name der Variablen sollte idealerweise ihren Inhalt widerspiegeln. Hier finden Sie einige Richtlinien zur Auswahl informativer Variablennamen.
▍ Funktionen
Normalerweise führen Funktionen eine Aktion aus. Menschen, die über Handlungen sprechen, verwenden Verben. Zum Beispiel - konvertieren (konvertieren) oder anzeigen (anzeigen). Es wird empfohlen, Funktionsnamen so zu bilden, dass sie mit einem Verb beginnen. Beispiel:
convertCurrency oder
displayUser .
▍Arrays
Arrays enthalten normalerweise Sätze einiger Werte. Daher ist es sinnvoll, den Buchstaben
s zum Namen der Variablen hinzuzufügen, in der das Array gespeichert ist. Zum Beispiel:
const students = ['Eddie', 'Julia', 'Nathan', 'Theresa']
▍Logische Werte
Boolesche Variablennamen sind zunächst sinnvoll mit
is oder
has . Dies bringt sie näher an die Konstruktionen, die in gewöhnlicher Sprache verfügbar sind. Hier ist zum Beispiel die Frage: "Ist diese Person ein Lehrer?". Die Antwort darauf kann "Ja" oder "Nein" sein. Sie können dasselbe tun, indem Sie Namen für logische Variablen auswählen:
const isTeacher = true
▍ Parameter von Funktionen, die an Standard-Array-Methoden übergeben werden
Hier sind einige Standardmethoden für JavaScript-Arrays:
forEach ,
map ,
reduce ,
filter . Mit ihnen können Sie bestimmte Aktionen mit Arrays ausführen. Es handelt sich um übergebene Funktionen, die Operationen an Arrays beschreiben. Ich habe gesehen, wie viele Programmierer einfach Parameter mit Namen wie
el oder
element an solche Funktionen übergeben. Obwohl dieser Ansatz den Programmierer von der Überlegung befreit, solche Parameter zu benennen, ist es besser, sie basierend auf den darin enthaltenen Daten aufzurufen. Zum Beispiel:
const cities = ['Berlin', 'San Francisco', 'Tel Aviv', 'Seoul'] cities.forEach(function(city) { ... })
▍ Kennungen
Es kommt häufig vor, dass ein Programmierer mit den Kennungen bestimmter Datensätze oder Objekte arbeiten muss. Wenn solche Bezeichner verschachtelt sind, muss mit ihnen nichts Besonderes getan werden. Wenn ich beispielsweise mit MongoDB arbeite, konvertiere ich normalerweise
_id in
id bevor ich das Objekt an die Front-End-Anwendung
_id . Beim Extrahieren von Bezeichnern aus Objekten wird empfohlen, deren Namen durch Festlegen des Objekttyps vor der
id . Zum Beispiel:
const studentId = student.id
Eine Ausnahme von dieser Regel ist die Arbeit mit MongoDB-Referenzen in Modellen. In solchen Fällen wird empfohlen, die Felder gemäß den darin genannten Modellen zu benennen. Wenn Sie Dokumente ausfüllen, zu denen in den Feldern Links vorhanden sind, kann der Code sauber und einheitlich gehalten werden:
const StudentSchema = new Schema({ teacher: { type: Schema.Types.ObjectId, ref: 'Teacher', required: true, }, name: String, ... })
10. Verwenden Sie nach Möglichkeit das Konstrukt async / await.
Die Verwendung von Rückrufen beeinträchtigt die Lesbarkeit des Codes. Dies gilt insbesondere für verschachtelte Rückrufe. Verspricht, die Dinge ein wenig zu klären, aber ich glaube, dass Code, der das Konstrukt async / await verwendet, am besten gelesen werden kann. Selbst Anfänger und Entwickler, die aus anderen Sprachen auf JavaScript umgestellt haben, können diesen Code leicht verstehen. Das Wichtigste dabei ist, die Konzepte zu beherrschen, die async / await zugrunde liegen. Verwenden Sie dieses Design wegen seiner Neuheit nicht überall.
11. Das Verfahren zum Importieren von Modulen
Die Empfehlungen 1 und 2 haben gezeigt, wie wichtig es ist, den richtigen Ort zum Speichern von Code auszuwählen, um sicherzustellen, dass dieser unterstützt wird. Ähnliche Ideen gelten für die Importreihenfolge von Modulen. Wir sprechen nämlich von der Tatsache, dass die logische Reihenfolge des Importierens von Modulen den Code klarer macht. Beim Importieren von Modulen folge ich dem folgenden einfachen Schema:
Dieses Beispiel basiert auf React. Die gleiche Idee wird nicht schwer auf eine andere Entwicklungsumgebung zu übertragen sein.
12. Vermeiden Sie die Verwendung von console.log
Der Befehl
console.log ist ein einfaches, schnelles und bequemes Tool zum Debuggen von Programmen. Es gibt natürlich fortgeschrittenere Tools dieser Art, aber ich denke, dass fast alle Programmierer immer noch
console.log . Wenn Sie mit
console.log zum Debuggen nicht die Aufrufe dieses Befehls entfernen, die mit der Zeit unnötig werden, wird die Konsole bald vollständig ungeordnet. Es sollte beachtet werden, dass es sinnvoll ist, einige Protokollierungsteams auch im Code von Projekten zu belassen, die vollständig arbeitsbereit sind. Zum Beispiel Befehle, die Fehlermeldungen und Warnungen anzeigen.
Infolgedessen können wir sagen, dass es durchaus möglich ist,
console.log für Debugging-Zwecke zu verwenden. In Fällen, in denen die Verwendung der
console.log für Arbeitsprojekte geplant ist, ist es sinnvoll, auf spezialisierte Bibliotheken zurückzugreifen. Unter ihnen sind
Loglevel und
Winston . Darüber hinaus kann ESLint verwendet werden, um unnötige Protokollierungsbefehle zu bekämpfen. Dies ermöglicht eine globale Suche und Entfernung solcher Befehle.
Zusammenfassung
Der Autor dieses Materials sagt, dass alles, worüber er hier gesprochen hat, ihm sehr dabei hilft, die Sauberkeit und Skalierbarkeit der Codebasis seiner Projekte aufrechtzuerhalten. Wir hoffen, Sie finden diese Tipps hilfreich.
Liebe Leser! Was können Sie zu den 12 Tipps hier hinzufügen, um sauberen und skalierbaren JS-Code zu schreiben?
