clean code javascript ar
1.0.0
Software -Engineering -Prinzipien aus dem Buch Robert C Martin Code , Luft -mit JavaScript gestaltet. Dies ist keine Stilmethode. Es ist ein Produktionsleitfaden für ein lesbares Programm, das wiederverwendbar und im Java -Skript wieder hergestellt wird.
Nicht jedes Prinzip hier muss genau befolgt werden, und selbst weniger wird weltweit vereinbart. Dies sind Richtlinien nicht mehr, aber sie sind Richtlinien für viele Jahre kollektiver Erfahrung mit Clean Code _.
Die Lebensdauer des Software -Engineering beträgt mehr als 50 Jahre und wir lernen immer noch viele Dinge. "Wenn Software -Engineering alt ist, ist das Engineering an sich", vielleicht haben wir schwierigere Regeln, die wir befolgen werden. Lassen Sie diese Richtlinien nun als Test zur Bewertung der Qualität des JavaScript -Codes dienen, den Sie und Ihr Team erstellen.
Eine andere Sache: Wenn Sie diese Prinzipien nicht sofort zum besten Programmierer aller Zeiten machen, bedeutet dies nicht, dass Sie keine Fehler machen werden. Jeder Teil des Codes beginnt als erster Entwurf, z. B. an einem feuchten Ton, der die endgültige Form nicht vom ersten Anblick erhält, da wir immer Fehler entfernen. Wir überprüfen es mit unseren Kollegen. Drücken Sie sich also nicht wegen der ersten Entwürfe, die verbessert werden müssen. Überwinden Sie stattdessen den Code!
schlecht:
const yyyymmdstr = moment ( ) . format ( "YYYY/MM/DD" )Gut:
const currentDate = moment ( ) . format ( "YYYY/MM/DD" )⬆ Zurück nach oben
schlecht:
getUserInfo ( )
getClientData ( )
getCustomerRecord ( )Gut:
getUser ( )⬆ Zurück nach oben
Wir werden mehr Code lesen, als wir schreiben werden. Es ist wichtig, dass der von uns geschriebene Code lesbar ist und recherchiert. Nicht um die Variablen zu nennen, die aussagekräftig sind, um unser Programm zu verstehen, und es den Lesern schwer macht. Lassen Sie Ihre Namensuche suchen. Tools wie Buddy.js und Eslint können dazu beitragen, unbenannte Konstanten zu bestimmen.
schlecht:
// What the heck is 86400000 for?
setTimeout ( blastOff , 86400000 )Gut:
// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000 //86400000;
setTimeout ( blastOff , MILLISECONDS_PER_DAY )⬆ Zurück nach oben
schlecht:
const address = "One Infinite Loop, Cupertino 95014"
const cityZipCodeRegex = / ^[^,\]+[,\s]+(.+?)s*(d{5})?$ /
saveCityZipCode (
address . match ( cityZipCodeRegex ) [ 1 ] ,
address . match ( cityZipCodeRegex ) [ 2 ]
)Gut:
const address = "One Infinite Loop, Cupertino 95014"
const cityZipCodeRegex = / ^[^,\]+[,\s]+(.+?)s*(d{5})?$ /
const [ _ , city , zipCode ] = address . match ( cityZipCodeRegex ) || [ ]
saveCityZipCode ( city , zipCode )⬆ Zurück nach oben
Es ist immer besser als implizit.
schlecht:
const locations = [ "Austin" , "New York" , "San Francisco" ]
locations . forEach ( ( l ) => {
doStuff ( )
doSomeOtherStuff ( )
// ...
// ...
// ...
// Wait, what is `l` for again?
dispatch ( l )
} )Gut:
const locations = [ "Austin" , "New York" , "San Francisco" ]
locations . forEach ( ( location ) => {
doStuff ( )
doSomeOtherStuff ( )
// ...
// ...
// ...
dispatch ( location )
} )⬆ Zurück nach oben
Wenn Ihnen die Namensklasse/das Objekt etwas sagt, wiederholen Sie dies nicht in Ihrem variablen Namen.
schlecht:
const Car = {
carMake : "Honda" ,
carModel : "Accord" ,
carColor : "Blue" ,
}
function paintCar ( car , color ) {
car . carColor = color
}Gut:
const Car = {
make : "Honda" ,
model : "Accord" ,
color : "Blue" ,
}
function paintCar ( car , color ) {
car . color = color
}⬆ Zurück nach oben
Standardargumente sind offline. Bey, dass wenn Sie uns die sie sind, Ihre Funktion nur Standardwerte für undefined Argumente liefert. Andere "falsy" Werte Su '' , "" false , null , 0 und NaN , werden nicht durch einen Standardwert zurückliegen.
schlecht:
function createMicrobrewery ( name ) {
const breweryName = name || "Hipster Brew Co."
// ...
}Gut:
function createMicrobrewery ( name = "Hipster Brew Co." ) {
// ...
}⬆ Zurück nach oben
Es ist sehr schwierig, einen Lesekurse zu erhalten, um die Definitionen von ES5 -Klassen zu erstellen und klassische Definitionen zu erstellen. Wenn Sie Vererbung benötigen (und wissen, dass Sie es möglicherweise nicht benötigen), bevorzugen Sie ES2015/ES6 -Klassen. Versuchen Sie jedoch, die kleinen Funktionen im Unterricht zu bleiben, damit Sie größer und komplizierter benötigen.
schlecht:
const Animal = function ( age ) {
if ( ! ( this instanceof Animal ) ) {
throw new Error ( "Instantiate Animal with `new`" )
}
this . age = age
}
Animal . prototype . move = function move ( ) { }
const Mammal = function ( age , furColor ) {
if ( ! ( this instanceof Mammal ) ) {
throw new Error ( "Instantiate Mammal with `new`" )
}
Animal . call ( this , age )
this . furColor = furColor
}
Mammal . prototype = Object . create ( Animal . prototype )
Mammal . prototype . constructor = Mammal
Mammal . prototype . liveBirth = function liveBirth ( ) { }
const Human = function ( age , furColor , languageSpoken ) {
if ( ! ( this instanceof Human ) ) {
throw new Error ( "Instantiate Human with `new`" )
}
Mammal . call ( this , age , furColor )
this . languageSpoken = languageSpoken
}
Human . prototype = Object . create ( Mammal . prototype )
Human . prototype . constructor = Human
Human . prototype . speak = function speak ( ) { }Gut:
class Animal {
constructor ( age ) {
this . age = age
}
move ( ) {
/* ... */
}
}
class Mammal extends Animal {
constructor ( age , furColor ) {
super ( age )
this . furColor = furColor
}
liveBirth ( ) {
/* ... */
}
}
class Human extends Mammal {
constructor ( age , furColor , languageSpoken ) {
super ( age , furColor )
this . languageSpoken = languageSpoken
}
speak ( ) {
/* ... */
}
}⬆ Zurück nach oben
Dieser Stil ist im Java -Skript sehr nützlich und sieht ihn in vielen Bibliotheken wie Jquey und Lodash. Dadurch kann Ihr Code ausgedrückt und der geringste Klatsch ausdrückt. Aus diesem Grund schlage ich vor, verwenden Sie die Sequenzmethode und sehen Sie sich an, wie sauber Ihr Code ist. In Ihren Klassenfunktionen müssen Sie dies nur am Ende jeder Funktion zurückgeben und die zusätzlichen Klassenmethoden verbinden.
schlecht:
class Car {
constructor ( make , model , color ) {
this . make = make
this . model = model
this . color = color
}
setMake ( make ) {
this . make = make
}
setModel ( model ) {
this . model = model
}
setColor ( color ) {
this . color = color
}
save ( ) {
console . log ( this . make , this . model , this . color )
}
}
const car = new Car ( "Ford" , "F-150" , "red" )
car . setColor ( "pink" )
car . save ( )Gut:
class Car {
constructor ( make , model , color ) {
this . make = make
this . model = model
this . color = color
}
setMake ( make ) {
this . make = make
// NOTE: Returning this for chaining
return this
}
setModel ( model ) {
this . model = model
// NOTE: Returning this for chaining
return this
}
setColor ( color ) {
this . color = color
// NOTE: Returning this for chaining
return this
}
save ( ) {
console . log ( this . make , this . model , this . color )
// NOTE: Returning this for chaining
return this
}
}
const car = new Car ( "Ford" , "F-150" , "red" ) . setColor ( "pink" ) . save ( )⬆ Zurück nach oben
Wie in [ Entwurfsmustern ] (https://en.wikipedia.org/wiki/design_patterns) von vier vier Jahren angegeben, sollten Sie die Komposition gegenüber der Erbschaft bevorzugen, wenn Sie können. Es gibt viele Ursachen des Gesichts, um Erbschaft und viele Gesichter der Verwendung von Zusammensetzung zu verwenden. Der Hauptpunkt dieses Prinzips ist, dass, wenn Ihr Verstand zur Vererbung installiert wird, zu denken, ob Komposition Ihr Problem besser lösen kann. In einigen Fällen kann es.
Sie fragen sich vielleicht danach: "Wann sollte ich Erbschaft verwenden?" Dies hängt von Ihrem Problem ab, das Sie lösen möchten. Dies ist jedoch eine anständige Liste, wenn die Vererbung logischer ist als die Komposition:
Ihre Vererbung ist eine Beziehung "und nicht" hat "Beziehung (menschliche-tierende Benutzer-> Benutzerdetails).
Sie können den Code aus den Grundklassen wiederverwenden (Menschen können sich wie alle Tiere bewegen).
Sie möchten allgemeine Änderungen an abgeleiteten Klassen vornehmen, indem Sie die Grundklasse ändern. (Ändern Sie die Kalorien für alle Tiere, wenn sie sich bewegen).
schlecht:
class Employee {
constructor ( name , email ) {
this . name = name
this . email = email
}
// ...
}
// Bad because Employees "have" tax data. EmployeeTaxData is not a type of Employee
class EmployeeTaxData extends Employee {
constructor ( ssn , salary ) {
super ( )
this . ssn = ssn
this . salary = salary
}
// ...
}Gut:
class EmployeeTaxData {
constructor ( ssn , salary ) {
this . ssn = ssn
this . salary = salary
}
// ...
}
class Employee {
constructor ( name , email ) {
this . name = name
this . email = email
}
setTaxData ( ssn , salary ) {
this . taxData = new EmployeeTaxData ( ssn , salary )
}
// ...
}⬆ Zurück nach oben
