Ett av de mest avgörande stegen i utvecklingen av ett projekt är att skriva ren kod. Den ska inte bara vara lättläst, utan också ha en bra struktur som gör att koden blir begriplig för alla som tittar på den. Hur gör vi det? Det finns olika riktlinjer och syntaxer som hjälper dig att skriva mindre kod, till exempel D.R.Y.-regeln, som innebär att utveckla återanvändbar kod och inte duplicera kodblock som inte är väsentliga. Det här är den viktigaste principen eftersom den hjälper dig att tänka om när du skriver din kod och spara några extra rader och KB när du distribuerar din kod till produktion. Prestanda är avgörande, och du vill spara varje bit av tillgängligt minne. En annan rekommendation är att använda ES6-syntax för att minska mängden kod du skriver genom att förenkla vissa syntaxer. De mest använda är just de som vi kommer att prata om i den här artikeln. Pilfunktioner som gör att du kan skriva JavaScript-funktioner på ett mer kompakt sätt samtidigt som du löser svårigheten att komma åt den här egenskapen från callbacks. En enkel pilfunktion ser ut så här: const myFunction = (param1, param2) => {} När du returnerar något är nyckelordet ”return” valfritt, och de snirkliga hakparenteserna kan bli parenteser om du returnerar många rader, eller så kan de försvinna om du bara returnerar ett värde, beroende på vad du returnerar: const myFunction = (param1, param2) => param1 + param2 Parenteserna som omger variablerna kan också vara valfria om du bara har en parameter: const myFunction = param1 => param1 Sedan finns det objektdestrukturering som gör att du snabbt kan tilldela vissa fält från ett objekt till en variabel vilket minskar mängden kod som används för deklarationer: const user = {firstName: “John”, lastName: “Doe”}; Destrukturering: const {firstName, lastName} = user; Inte destrukturering:
const firstName = user.firstName;
const lastName = user.lastName; Ett annat knep är att använda backticks (’) för att separera malliteraler när man skapar flerradiga strängar och utför stränginterpolering: const x = “Var”;const example = `Something ${x} something`; Istället för const example = “Something” + x + “something”; Det finns en annan viktig ES6-syntax, shorthand method, som tar bort if else-syntaxen och gör det möjligt för oss att skriva mindre och göra mer läsbar kod: condition ? doThisIfTrue : doThisIfFalse Istället för If (condition) { Försök att undvika callbacks och nested callbacks där det är möjligt och använd istället promises och async / await för att hantera asynkrona funktioner. Naturligtvis finns det många ES6-metoder som kan användas, men dessa är de mest använda. Du kan lära dig mer här, om du vill. En annan viktig punkt att komma ihåg är dataknapphet, vilket innebär att du inte ska överföra data som du inte behöver. Istället för att skicka ett helt objekt när du bara behöver en variabel, ordna om dina data och skicka bara det som krävs för funktionaliteten. När du har flera API-anrop att göra är det här ett bra sätt att begränsa mängden data du måste skicka runt. Om din kod växer i storlek är det en bra idé att dela upp den i många filer för att förhindra stora bitar av data som är svåra att förstå och hantera. Att dela upp koden i filer och moduler är en bra idé eftersom det hjälper till att organisera ditt projekt och förbättrar läsbarheten.
doThisIfTrue
} else {
doThisIfFalse
}