1. Verwenden Sie Standardparameter anstelle von Kurzschlüssen oder BedingungenStandardargumente sind normalerweise sauberer als Kurzschlüsse. Funktion IrgendeineMethode(ParamDasKannUndefiniertSein) { const localValue = paramThatCanBeUndefined || "Standardwert"; console.log(lokalerWert) // ... } SomeMethod() // Standardwert IrgendeineMethode("IrgendeinWert") // IrgendeinWert Versuchen Sie Folgendes: Funktion SomeMethod( console.log(Parameter, der nicht definiert sein kann) // ... } SomeMethod() // Standardwert IrgendeineMethode("IrgendeinWert") // IrgendeinWert Anweisung: Falsche Werte wie '', "", false, null, 0 und NaN werden nicht durch Standardwerte ersetzt: Funktion SomeMethod(paramThatCanBeUndefined = "Standardwert") { console.log(Parameter, der nicht definiert sein kann) // ... } SomeMethod(null) // wird nicht als Standardwert verwendet, sondern als null IrgendeineMethode("IrgendeinWert") // IrgendeinWert 2. Umgang mit mehreren Bedingungenconst Bedingungen = ["Bedingung 2","Bedingung String2"]; irgendeineFunktion(str){ wenn(str.includes("irgendeinWert1") || str.includes("irgendeinWert2")){ returniere wahr }anders{ return false } } Eine sauberere Möglichkeit hierfür ist: irgendeineFunktion(str){ const Bedingungen = ["irgendeinWert1","irgendeinWert2"]; Rückgabebedingungen.einige(Bedingung=>str.includes(Bedingung)); } 3. Ersetzen Sie Schalter durch dynamische Schlüssel-Wert-Paare (d. h. Objektliterale).Version wechseln (oder den Schalter durch ein if/else ersetzen): const Benutzerrolle = { ADMIN: "Administrator", GENERAL_USER: "AllgemeinerBenutzer", SUPER_ADMIN: "SuperAdmin", }; Funktion getRoute(Benutzerrolle = "Standardrolle"){ Schalter(Benutzerrolle){ Fall UserRole.ADMIN: returniere "/admin" Fall UserRole.GENERAL_USER: returniere "/GENERAL_USER" Fall UserRole.SUPER_ADMIN: gebe "/superadmin" zurück Standard: zurückkehren "/" } } console.log(getRoute(UserRole.ADMIN)) // gibt "/admin" zurück console.log(getRoute("Anything")) // Standardpfad zurückgeben console.log(getRoute()) // Standardpfad zurückgeben console.log(getRoute(null)) // Standardpfad zurückgeben // Mehr Fälle, wenn neue eintreffen // Sie können if else anstelle von switch verwenden. Dynamische Schlüssel-Wert-Paar-Version: const Benutzerrolle = { ADMIN: "Administrator", GENERAL_USER: "AllgemeinerBenutzer", SUPER_ADMIN: "SuperAdmin", }; Funktion getRoute(Benutzerrolle = "Standardrolle"){ const appRoute = { [Benutzerrolle.ADMIN]: "/admin", [UserRole.GENERAL_USER]: "/Benutzer", [Benutzerrolle.SUPER_ADMIN]: "/superadmin" }; return appRoute[Benutzerrolle] || "Standardpfad"; } console.log(getRoute(UserRole.ADMIN)) // gibt "/admin" zurück console.log(getRoute("Anything")) // Standardpfad zurückgeben console.log(getRoute()) // Standardpfad zurückgeben console.log(getRoute(null)) // Standardpfad zurückgeben // Hier kein Switch/If-Else mehr. // Einfach zu erweitern 4. Vermeiden Sie zu viele FunktionsparameterFunktion meineFunktion(Mitarbeitername,Berufsbezeichnung,Jahresexp,Hauptfachexp){ return `${employeeName} arbeitet als ${jobTitle} mit ${yrExp} Jahren Erfahrung in ${majorExp}` } //Ausgabe so, als ob John als Projektmanager mit 12 Jahren Erfahrung im Projektmanagement arbeitet // Der Aufruf erfolgt über console.log(meineFunktion("John","Projektmanager",12,"Projektmanagement")) // ***** PROBLEME SIND ***** // Verstoß gegen das Prinzip „Clean Code“ // Die Reihenfolge der Parameter ist wichtig // Warnung bei nicht verwendeten Parametern, falls diese nicht verwendet werden // Beim Testen müssen viele Sonderfälle berücksichtigt werden. So geht's sauberer: Funktion meineFunktion({Mitarbeitername,Berufsbezeichnung,Jahreserfahrung,Hauptfacherfahrung}){ return `${employeeName} arbeitet als ${jobTitle} mit ${yrExp} Jahren Erfahrung in ${majorExp}` } //Ausgabe so, als ob John als Projektmanager mit 12 Jahren Erfahrung im Projektmanagement arbeitet // Der Aufruf erfolgt über const mockTechPeople = { Mitarbeitername: „John“, jobTitle:"Projektmanager", JahrExp:12, majorExp:"Projektmanagement" } console.log(meineFunktion(mockTechPeople)) // Die Destrukturierungssyntax von ES2015/ES6 ist in Aktion // Ordnen Sie den gewünschten Wert der benötigten Variable zu. 5. Verwenden Sie Object.assign, um das Standardobjekt festzulegenDies erscheint umständlich: const irgendeinObjekt = { Titel: null, subTitle: "Untertitel", Schaltflächenfarbe: null, deaktiviert: true }; Funktion erstelleOption(irgendeinObjekt) { someObject.title = someObject.title || "Standardtitel"; someObject.subTitle = someObject.subTitle || "Standarduntertitel"; irgendeinObjekt.buttonColor = irgendeinObjekt.buttonColor || "blau"; someObject.disabled = someObject.disabled !== undefiniert ? someObject.disabled : wahr; gib ein Objekt zurück } console.log(ErstelleOption(einObjekt)); // Die Ausgabe sieht wie folgt aus: // {title: 'Standardtitel', subTitle: 'Untertitel', buttonColor: 'blau', deaktiviert: true} Dieser Ansatz sieht besser aus: const irgendeinObjekt = { Titel: null, subTitle: "Untertitel", Schaltflächenfarbe: null, deaktiviert: true }; Funktion erstelleOption(irgendeinObjekt) { const neuesObjekt = Objekt.assign({ Titel: "Standardtitel", subTitle: "Standard-Untertitel", Schaltflächenfarbe: "blau", deaktiviert: true },irgendeinObjekt) neues Objekt zurückgeben } console.log(creteOption(irgendeinObjekt)); Damit ist dieser Artikel über 5 Möglichkeiten, Ihre JavaScript-Codebasis sauberer zu machen, abgeschlossen. Weitere Informationen zu 5 Möglichkeiten, Ihre JavaScript-Codebasis sauberer zu machen, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Vielen Dank fürs Lesen Das könnte Sie auch interessieren:
|
<<: Analyse des Prozesses der einfachen Bereitstellung von Nginx im Docker-Container
Überblick Das Rahmendiagramm dieses Artikels ist ...
Inhaltsverzeichnis Überblick Ist die Erweiterung ...
Upgrade-Hintergrund: Um die Sicherheitslücke in d...
Dieser Artikel zeichnet die Installations- und Ko...
Vorwort Vor nicht allzu langer Zeit habe ich Brow...
In der Praxis stoßen wir häufig auf ein Problem: ...
Inhaltsverzeichnis Schnellstart Anwendung Grundpr...
Inhaltsverzeichnis Vererbung und Prototypenkette ...
<br />Im Bereich des Netzwerkdesigns erfreut...
Viele Leute haben mich auch gefragt, welche Büche...
Bei der Implementierung dieser Funktion konnte di...
In diesem Artikel finden Sie das Installations- u...
1|0MySQL (MariaDB) 1|11. Beschreibung Das Datenba...
Methode 1: Absenden über den Absenden-Button <...
1. mpstat-Befehl 1.1 Befehlsformat mpstat [ -A ] ...