VariableVerwenden Sie aussagekräftige und aussprechbare Variablennamen// Falsche Schreibweise const yyyymmdstr = moment().format("YYYY/MM/DD"); // Gute Schreibweise: const currentDate = moment().format("YYYY/MM/DD"); Verwenden Sie dasselbe Vokabular für Variablen desselben Typs// Falsche Art, getUserInfo(); zu schreiben. getClientData(); getKundendatensatz(); // Gute Möglichkeit, getUser(); zu schreiben. Durchsuchbare Namen verwendenWir lesen viel mehr als wir schreiben. Eine zu willkürliche Benennung erschwert daher nicht nur die spätere Wartung, sondern schadet auch den Entwicklern, die unseren Code lesen. Machen Sie Ihre Variablennamen für Menschen lesbar; Tools wie buddy.js und ESLint können dabei helfen, unbenannte Konstanten zu identifizieren. // Schlechtes Schreiben // Was ist der Zweck von 86400000? setTimeout(blastOff, 86400000); // Gutes Schreiben const MILLISECONDS_IN_A_DAY = 86_400_000; setTimeout(blastOff, MILLISEKUNDEN_IN_EINEM_TAG); Verwenden erklärender Variablen// Falsche Schreibweise const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\s]+(.+?)\s*(\d{5})?$/; speichernStadtPostleitzahl( adresse.match(stadtPostleitzahlRegex)[1], Adresse.Match(StadtPostleitzahlRegex)[2] ); // Gutes Schreiben const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\s]+(.+?)\s*(\d{5})?$/; const [_, Stadt, Postleitzahl] = Adresse.match(StadtPostleitzahlRegex) || []; saveCityZipCode(Stadt, Postleitzahl); Schluss mit RätselratenExplizit für implizit // Falsche Syntax const locations = ["Austin", "New York", "San Francisco"]; Standorte.fürJeden(l => { mache Sachen(); mach wasanderes(); // ... // ... // ... // Moment, was ist noch mal "l"? Versand (l); // Gutes Schreiben const locations = ["Austin", "New York", "San Francisco"]; Standorte.fürJeden(Standort => { mache Sachen(); mach wasanderes(); // ... // ... // ... Versand (Standort); }); Kein unnötiger Kontext nötigWenn der Klassenname/Objektname bereits angegeben ist, muss dieser im Variablennamen nicht wiederholt werden. // Falsche Schreibweise const Car = { Automarke: "Honda", Automodell: "Accord", Autofarbe: "Blau" }; Funktion lackierAuto(Auto) { auto.autoFarbe = "Rot"; } // Gut geschrieben const Car = { Marke: "Honda", Modell: "Accord", Farbe: "Blau" }; Funktion lackierAuto(Auto) { Auto.Farbe = "Rot"; } Verwenden Sie Standardparameter anstelle von logischen ODER-Operationen// Fehlerhafte Schreibfunktion createMicrobrewery(name) { const breweryName = Name || "Hipster Brew Co."; // ... } // Bewährte Vorgehensweise Funktion createMicrobrewery(name = "Hipster Brew Co.") { // ... } FunktionFunktionsparameter (idealerweise 2 oder weniger)Die Begrenzung der Anzahl der Funktionsparameter ist sehr wichtig, da dadurch das Testen der Funktion erleichtert wird. Bei mehr als drei Parametern kommt es zu einer kombinatorischen Explosion und es müssen mit jedem einzelnen Parameter sehr viele unterschiedliche Fälle getestet werden. Ein oder zwei Parameter sind ideal, drei Parameter sollten nach Möglichkeit vermieden werden. Darüber hinaus soll es zu einer Zusammenlegung kommen. In den meisten Fällen können mehr als drei Parameter durch Objekte ersetzt werden. // Falsche Schreibweise function createMenu(title, body, buttonText, cancelable) { // ... } Menü erstellen("Foo", "Bar", "Baz", true); // Gute Schreibfunktion createMenu({ title, body, buttonText, cancelable }) { // ... } Menü erstellen({ Titel: "Foo", Körper: "Bar", Schaltflächentext: "Baz", stornierbar: wahr }); Funktionen sollten nur eine Sache tunDies ist die mit Abstand wichtigste Regel in der Softwareentwicklung. Wenn Funktionen mehr als eine Aufgabe erfüllen, sind sie schwieriger zu erstellen, zu testen und zu begründen. Wenn Sie eine Funktion in eine einzelne Operation isolieren können, ist die Umgestaltung einfacher und der Code lässt sich klarer lesen. // Falsche Schreibfunktion emailClients(clients) { client.fürJeden(client => { const clientRecord = Datenbank.lookup(Client); wenn (clientRecord.isActive()) { E-Mail (Client); } }); } // Gute Schreibfunktion emailActiveClients(clients) { Clients.Filter(isActiveClient).forEach(E-Mail); } Funktion istActiveClient(Client) { const clientRecord = Datenbank.lookup(Client); gibt clientRecord.isActive() zurück; } Funktionsnamen sollten beschreiben, was sie tun// Falsche Art, die Funktion addToDate(date, month) { zu schreiben. // ... } const date = neues Datum(); // Aus dem Funktionsnamen lässt sich schwer ableiten, was hinzugefügt werden soll: addToDate(date, 1); // Gute Möglichkeit, die Funktion addMonthToDate(month, date) { zu schreiben. // ... } const date = neues Datum(); addMonthToDate(1, Datum); Funktionen sollten nur eine Abstraktionsebene habenWenn eine Funktion mehr als eine Abstraktionsebene aufweist, bedeutet dies, dass die Funktion zu viel leistet und zur Wiederverwendbarkeit und einfacheren Prüfung aufgeteilt werden muss. // Schlechte Art, die Funktion parseBetterjsAlternative(code) { zu schreiben const REGEXES = [ // ... ]; const-Anweisungen = code.split(" "); Konstanten-Token = []; REGEXES.fürJeden(REGEX => { Anweisungen.fürJedes(Anweisung => { // ... }); }); const ast = []; tokens.fürJedes(token => { // lex… }); ast.forEach(Knoten => { // analysieren … }); } // Gute Möglichkeit, die Funktion parseBetterJSAlternative(code) { zu schreiben const tokens = tokenisieren(Code); const syntaxTree = parse(tokens); syntaxTree.forEach(node => { // analysieren … }); } Funktion tokenisieren(Code) { const REGEXES = [ // ... ]; const-Anweisungen = code.split(" "); Konstanten-Token = []; REGEXES.fürJeden(REGEX => { Anweisungen.fürJedes(Anweisung => { tokens.push(/* ... */); }); }); Token zurückgeben; } Funktion parse(Token) { const syntaxTree = []; tokens.fürJedes(token => { syntaxTree.push(/* ... */); }); Syntaxbaum zurückgeben; } Entfernen Sie doppelten CodeVersuchen Sie, doppelten Code zu vermeiden. Doppelter Code ist schlecht. Das bedeutet, dass wir viele Stellen ändern müssen, wenn wir die Logik ändern müssen. Oft gibt es doppelten Code, weil es zwei oder mehr leicht unterschiedliche Dinge gibt, die zwar vieles gemeinsam haben, deren Unterschiede uns aber zwingen, zwei oder mehr separate Funktionen zu schreiben, um viele der gleichen Dinge zu tun. Das Entfernen doppelten Codes bedeutet das Erstellen einer Abstraktion, die diese unterschiedlichen Dinge mit nur einer Funktion/einem Modul/einer Klasse behandelt. Es ist entscheidend, die Abstraktion richtig hinzubekommen. Deshalb sollten wir den im Abschnitt „Klassen“ aufgeführten SOLID-Prinzipien folgen. Schlechte Abstraktionen können schlimmer sein als doppelter Code, seien Sie also vorsichtig! Abgesehen davon gilt: Wenn Sie eine gute Abstraktion erstellen können, tun Sie es! Wiederholen Sie sich nicht, sonst müssen Sie jedes Mal, wenn Sie eine Sache ändern möchten, mehrere Stellen aktualisieren. Die sechs Prinzipien von Entwurfsmustern sind:
Die Kombination der Anfangsbuchstaben dieser sechs Prinzipien (zwei L zählen als eins) ergibt SOLID (solide), was den Vorteil der gemeinsamen Verwendung dieser sechs Prinzipien darstellt: die Schaffung eines stabilen, flexiblen und robusten Designs. Sehen wir uns diese sechs Designprinzipien nacheinander an. Schlechtes Schreiben Funktion showDeveloperList(Entwickler) { Entwickler.forEach(Entwickler => { const erwartetesSalary = Entwickler.calculateExpectedSalary(); const experience = Entwickler.getExperience(); const githubLink = Entwickler.getGithubLink(); const Daten = { Erwartete Gehalts, Erfahrung, githubLink }; rendern(Daten); }); } Funktion showManagerList(Manager) { manager.fürJeden(manager => { const erwartetesGehalt = manager.BerechnenSieErwartetesGehalt(); const experience = manager.getExperience(); const portfolio = manager.getMBAProjects(); const Daten = { Erwartete Gehalts, Erfahrung, Portfolio }; rendern(Daten); }); } Gutes Schreiben Funktion zeigeMitarbeiterListe(Mitarbeiter) { Mitarbeiter.fürJeden(Mitarbeiter => { const erwartetesGehalt = Mitarbeiter.ErwartetesGehalt berechnen(); const experience = Mitarbeiter.getExperience(); const Daten = { Erwartete Gehalts, Erfahrung }; Schalter (Mitarbeiter.Typ) { Fall "Manager": Daten.Portfolio = Mitarbeiter.getMBAProjects(); brechen; Fall „Entwickler“: data.githubLink = Mitarbeiter.getGithubLink(); brechen; } rendern(Daten); }); } Festlegen eines Standardobjekts mit Object.assignSchlechtes Schreiben const Menükonfiguration = { Titel: null, Körper: "Bar", Schaltflächentext: null, stornierbar: wahr }; Funktion Menü erstellen(Konfiguration) { Konfigurationstitel = Konfigurationstitel || "Foo"; config.body = config.body || "Leiste"; config.buttonText = config.buttonText || "Baz"; config.cancellable = config.cancellable !== undefiniert? config.cancellable: true; } Menü erstellen(Menükonfiguration); Gutes Schreiben const Menükonfiguration = { Titel: "Bestellung", // Der Benutzer hat den Schlüssel „Body“ nicht angegeben. buttonText: "Senden", stornierbar: wahr }; Funktion Menü erstellen(Konfiguration) { config = Objekt.assign( { Titel: "Foo", Körper: "Bar", Schaltflächentext: "Baz", stornierbar: wahr }, Konfiguration ); // Konfiguration ist jetzt gleich: {title: "Bestellung", body: "Bar", buttonText: "Senden", cancelable: true} // ... } Menü erstellen(Menükonfiguration); Verwenden Sie keine Flags als FunktionsargumenteDas Flag teilt dem Benutzer mit, dass diese Funktion mehrere Aufgaben ausführen kann und dass die Funktion eine Sache tun soll. Wenn Funktionen basierend auf Booleschen Werten unterschiedlichen Codepfaden folgen, teilen Sie sie auf. // Fehlerhafte Schreibfunktion createFile(name, temp) { wenn (temp) { fs.create(`./temp/${name}`); } anders { fs.erstellen(Name); } } // Gute Schreibfunktion createFile(name) { fs.erstellen(Name); } Funktion erstelleTempFile(Name) { Datei erstellen(`./temp/${name}`); } Vermeidung von Nebenwirkungen (Teil 1)Eine Funktion hat einen Nebeneffekt, wenn sie nichts anderes tut, als einen Wert zu akzeptieren und einen oder mehrere andere Werte zurückzugeben. Eine Nebenwirkung könnte das Schreiben in eine Datei, das Ändern einer globalen Variable oder das versehentliche Senden Ihres gesamten Guthabens an einen Fremden sein. Schlechtes Schreiben let name = "Ryan McDermott"; Funktion splitInVornameUndNachname() { Name = Name.split(" "); } inVor- und Nachnamen aufteilen(); console.log(Name); // ['Ryan', 'McDermott']; Gutes Schreiben Funktion splitInVor-UndNachname(name) { returniere name.split(" "); } Konstantenname = "Ryan McDermott"; const neuerName = splitIntoVor-UndNachname(name); console.log(Name); // „Ryan McDermott“; console.log(neuerName); // ['Ryan', 'McDermott']; Vermeidung von Nebenwirkungen (Teil 2)In JavaScript werden primitive Werte als Wert übergeben, während Objekte/Arrays als Referenz übergeben werden. Wenn bei Objekten und Arrays eine Funktion eine Änderung an einem Warenkorb-Array vornimmt (beispielsweise durch Hinzufügen eines Artikels zum Kauf), sind alle anderen Funktionen, die dieses Warenkorb-Array verwenden, von dieser Änderung betroffen. Das könnte großartig sein, aber es könnte auch schlecht sein. Stellen wir uns eine schlimme Situation vor: Der Benutzer klickt auf die Schaltfläche „Kaufen“, wodurch eine Kauffunktion aufgerufen wird, die wiederum eine Netzwerkanforderung stellt und das Warenkorb-Array an den Server sendet. Aufgrund einer schlechten Netzwerkverbindung muss die Kauffunktion die Anfrage ständig wiederholen. Was nun, wenn der Benutzer vor Beginn der Netzwerkanforderung versehentlich auf die Schaltfläche „In den Warenkorb“ bei einem Artikel klickt, den er eigentlich nicht haben möchte? Wenn dies geschieht und die Netzwerkanforderung beginnt, sendet die Kauffunktion den versehentlich hinzugefügten Artikel, da dieser einen Verweis auf das Warenkorb-Array enthält, das die Funktion addItemToCart durch das Hinzufügen geändert hat. Eine gute Lösung wäre, wenn addItemToCart immer das Warenkorb-Array klont, es bearbeitet und dann den Klon zurückgibt. Dadurch wird sichergestellt, dass andere vom Warenkorb referenzierte Funktionen von etwaigen Änderungen nicht betroffen sind. Bei diesem Ansatz sind zwei Dinge zu beachten: 1. In einigen Fällen muss das Eingabeobjekt möglicherweise geändert werden. Wenn wir diese Programmierpraxis anwenden, werden wir jedoch feststellen, dass dies sehr selten vorkommt und die meisten Dinge so geändert werden können, dass keine Nebenwirkungen auftreten. 2. Das Klonen großer Objekte kann hinsichtlich der Leistung sehr aufwändig sein. Glücklicherweise stellt dies in der Praxis kein großes Problem dar, da es viele großartige Bibliotheken gibt, die diese Programmiermethode schnell machen und nicht so speicherintensiv sind wie das manuelle Klonen von Objekten und Arrays. // Schlechte Art, const addItemToCart = (cart, item) => { zu schreiben. cart.push({ Artikel, Datum: Date.now() }); }; // Gute Möglichkeit, const addItemToCart = (cart, item) => { zu schreiben. return [...Warenkorb, { Artikel, Datum: Date.now() }]; }; Schreiben Sie keine globalen FunktionenDas Verschmutzen globaler Variablen ist in JS eine schlechte Praxis, da es zu einem Konflikt mit einer anderen Bibliothek kommen kann und die Benutzer Ihrer API nichts haben, bis sie in der Produktion auf eine Ausnahme stoßen. Betrachten wir ein Beispiel: Was wäre, wenn Sie die native Array-Methode von JS um eine Diff-Methode erweitern wollten, die die Unterschiede zwischen zwei Arrays anzeigen kann? Es ist möglich, eine neue Funktion in Array.prototype zu schreiben, aber dies könnte zu Konflikten mit einer anderen Bibliothek führen, die dasselbe versucht. Was wäre, wenn andere Bibliotheken „diff“ nur verwenden würden, um die Differenz zwischen dem ersten und dem letzten Element eines Arrays zu ermitteln? Deshalb wäre es viel besser, einfach ES6-Klassen zu verwenden und das Array einfach global zu erweitern. // Schlechte Schreibweise von Array.prototype.diff = function diff(comparisonArray) { const hash = neues Set(VergleichsArray); gib dies zurück.Filter(elem => !hash.has(elem)); }; // Gute Schreibklasse SuperArray extends Array { diff(VergleichsArray) { const hash = neues Set(VergleichsArray); gib dies zurück.Filter(elem => !hash.has(elem)); } } Verwenden Sie funktionale Programmierung statt imperativer ProgrammierungJavaScript ist keine funktionale Sprache wie Haskell, hat aber einen funktionalen Stil. Funktionale Sprachen können prägnanter und einfacher zu testen sein. Wenn Sie können, versuchen Sie, diesen Programmierstil zu bevorzugen. Schlechtes Schreiben const ProgrammiererAusgabe = [ { Name: "Onkel Bobby", Codezeilen: 500 }, { Name: "Suzie Q", Codezeilen: 1500 }, { Name: "Jimmy Gosling", Codezeilen: 150 }, { Name: "Gracie Hopper", Zeilen des Codes: 1000 } ]; sei totalOutput = 0; für (lass i = 0; i < ProgrammiererAusgabelänge; i++) { Gesamtausgabe += Programmiererausgabe[i].Codezeilen; } Gutes Schreiben const ProgrammiererAusgabe = [ { Name: "Onkel Bobby", Codezeilen: 500 }, { Name: "Suzie Q", Zeilen des Codes: 1500 }, { Name: "Jimmy Gosling", Codezeilen: 150 }, { Name: "Gracie Hopper", Zeilen des Codes: 1000 } ]; const totalOutput = ProgrammiererOutput.reduce( (Gesamtzeilen, Ausgabe) => Gesamtzeilen + Ausgabe.Codezeilen, 0 ); Verpackungsbedingungen// Schlechte Schreibweise von if (fsm.state === "fetching" && isEmpty(listNode)) { // ... } // Gute Schreibfunktion shouldShowSpinner(fsm, listNode) { return fsm.state === "abrufen" und isEmpty(listNode); } wenn (sollteShowSpinner(fsmInstance, listNodeInstance)) { // ... } Vermeiden Sie die Verwendung von unbedingten Bedingungen// Fehlerhafte Schreibfunktion isDOMNodeNotPresent(node) { // ... } wenn (!isDOMNodeNotPresent(Knoten)) { // ... } // Gute Schreibfunktion isDOMNodePresent(node) { // ... } wenn (isDOMNodePresent(Knoten)) { // ... } Vermeiden Sie die Verwendung zu vieler BedingungenEs scheint eine unmögliche Aufgabe zu sein. Die meisten Leute fragen sich, wenn sie das hören: „Wie kann ich etwas ohne if-Anweisungen machen?“ Die Antwort ist, dass Sie Polymorphismus in vielen Situationen verwenden können, um dieselbe Aufgabe zu erreichen. Die zweite Frage lautet normalerweise: „Das ist großartig, aber warum sollte ich das tun?“ Die Antwort ist das Konzept, über das ich oben gesprochen habe: Eine Funktion sollte nur eine Sache tun. Wenn Sie Klassen und Funktionen mit if-Anweisungen haben, teilen Sie Ihren Benutzern mit, dass diese Funktion mehr als eine Aufgabe erfüllt. Schlechtes Schreiben Klasse Flugzeug { // ... getReisehöhe() { Schalter (dieser.Typ) { Fall "777": gibt dies zurück.getMaxAltitude() - dies.getPassengerCount(); Fall „Air Force One“: gib dies zurück.getMaxAltitude(); fall "Cessna": gibt dies zurück.getMaxAltitude() - dies.getFuelExpenditure(); } } } Gutes Schreiben Klasse Flugzeug { // ... } Klasse Boeing777 erweitert Flugzeug { // ... getReisehöhe() { gibt dies zurück.getMaxAltitude() - dies.getPassengerCount(); } } Klasse AirForceOne erweitert Flugzeug { // ... getReisehöhe() { gib dies zurück.getMaxAltitude(); } } Klasse Cessna erweitert Flugzeug { // ... getReisehöhe() { gibt dies zurück.getMaxAltitude() - dies.getFuelExpenditure(); } } Vermeiden Sie die TypprüfungJavaScript ist untypisiert, was bedeutet, dass Funktionen Argumente jeden Typs akzeptieren können. Manchmal stört uns diese Freiheit und wir möchten eine Typprüfung unserer Funktionen durchführen. Es gibt viele Möglichkeiten, dies zu vermeiden. Als erstes muss eine konsistente API berücksichtigt werden. // Falsche Art, die Funktion travelToTexas(vehicle) { zu schreiben. if (Fahrzeuginstanz von Fahrrad) { Fahrzeug.Pedal(dieser.aktuelleStandort, neuer Standort("Texas")); } sonst wenn (Fahrzeuginstanz von Auto) { Fahrzeug.Fahren(dieser.aktuelleStandort, neuer Standort("Texas")); } } // Gute Möglichkeit, die Funktion travelToTexas(vehicle) { zu schreiben. Fahrzeug.Bewegen(dieser.aktuelleStandort, neuer Standort("Texas")); } Überoptimieren Sie nichtModerne Browser führen einen Großteil der Optimierungsarbeit zur Laufzeit durch. Wenn Sie optimieren, verschwenden Sie oft nur Zeit. Es stehen hervorragende Ressourcen zur Verfügung, um zu erkennen, wo es an Optimierung mangelt. Wir müssen uns nur auf die Bereiche konzentrieren, die optimiert werden müssen. // Schlechte Praxis // Bei älteren Browsern ist jede Iteration mit nicht zwischengespeicherter „list.length“ teuer, // da „list.length“ neu berechnet wird. In modernen Browsern ist dies optimiert für (let i = 0, len = list.length; i < len; i++) { // ... } // Gute Schreibweise für for (let i = 0; i < list.length; i++) { // ... } Oben finden Sie Einzelheiten zum Schreiben von elegantem JS-Code. Weitere Informationen zu elegantem JS-Code finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: MySQL fängt die SQL-Anweisung der String-Funktion ab
>>: Vollständiges Installationstutorial zum Ubuntu 16.04-Image unter VMware
In diesem Artikel wird der spezifische Code von j...
In gewöhnlichen Projekten stoße ich häufig auf di...
Proxying mehrerer 302er mit proxy_intercept_error...
1. Umgebung und Vorbereitung 1. Ubuntu 14.04 2.Do...
Inhaltsverzeichnis 1. Wissensbeschreibung der dre...
Inhaltsverzeichnis 1. Routing-Animation 2. Gruppe...
Software für virtuelle Maschinen: VMware Workstat...
Hintergrund Vor einiger Zeit half unser Projektte...
In diesem Artikelbeispiel wird der spezifische Co...
1. Elemente und Tags in HTML <br />Ein Elem...
Vor ein paar Tagen habe ich einen von Yu Bo getei...
Die default_server-Direktive von nginx kann einen...
HTML-Formulare werden häufig verwendet, um Benutz...
Heute habe ich gesehen, wie ein Freund im Q&A...
Hinweis: nginx über brew installiert Stammverzeic...