Bedste praksis i JavaScript-programmering

Denne artikel forklarer bedste praksis i JavaScript-programmering.

Vi vil introducere nøglebedste praksis i JavaScript sammen med konkrete kodeeksempler.

YouTube Video

Bedste praksis i JavaScript-programmering

I programmering er det ikke nok bare at skrive "kode der virker", men at skrive kode, der er vedligeholdelsesvenlig, effektiv og pålidelig. Ved at følge "bedste praksis" bliver din kode lettere for andre udviklere at forstå, enklere at vedligeholde og udvide, og det fører i sidste ende til færre fejl og bedre ydeevne.

Med kodeeksempler ser vi på de vigtigste bedste praksis i JavaScript.

Brug klare og beskrivende variabel- og funktionsnavne

Gør det muligt at forstå, hvad en variabel eller funktion betyder, blot ved at læse koden. Foretræk beskrivende navne frem for korte navne eller forkortelser.

Dårligt eksempel

1/* Bad Example */
2let x = 10;
3function fn() {
4    // ...
5}

• Navne som x eller fn skjuler hensigten med koden.

Godt eksempel

1/* Good Example */
2let totalItems = 10;
3function calculateDiscount(price) {
4    // ...
5}

• At bruge meningsfulde navne som totalItems eller calculateDiscount hjælper læserne med at forstå koden.

Brug const / let og undgå var

Da var er tilbøjelig til problemer med scope og gen-deklaration, anbefales det at altid bruge const eller let.

Dårligt eksempel

1/* Bad Example */
2var count = 5;

• var er funktionsscopet og kan forårsage utilsigtede gen-deklarationer og hoisting.

Godt eksempel

1/* Good Example */
2let count = 5; // Reassignable
3const MAX_COUNT = 10; // Not reassignable

• let og const er block-scopede og sikrere at bruge, hvilket giver mere forudsigelig og stabil kode.

Brug passende kommentarer

{^ i18n_speak 単にコードの動作をそのまま繰り返すコメントではなく、コードの「目的」や「理由」を説明するためにコメントを使います。^}

Dårligt eksempel

1/* Bad Example */
2let a = 100; // assign 100 to a

Godt eksempel

1/* Good Example */
2// Initialize the maximum value to 100
3let maxItems = 100;

• Foretræk kommentarer, der forklarer hvorfor noget gøres, frem for hvad der gøres. Dette er især nyttigt, hvor logikken er kompleks.

Følg DRY-princippet (Don't Repeat Yourself)

I stedet for at gentage den samme logik, indkapsl den i funktioner eller klasser. At reducere duplikering forbedrer vedligeholdeligheden og hjælper med at forhindre fejl.

Dårligt eksempel

1/* Bad Example */
2let totalPrice = price * quantity;
3let discountedPrice = (price * 0.9) * quantity;

Godt eksempel

1/* Good Example */
2function calculatePrice(price, quantity, discount = 0) {
3    return (price * (1 - discount)) * quantity;
4}
5
6let totalPrice = calculatePrice(price, quantity);
7let discountedPrice = calculatePrice(price, quantity, 0.1);

• Ved at samle duplikeret logik i en funktion kan ændringer og rettelser foretages ét sted. Dette er især vigtigt i udvikling i stor skala.

Hold funktioner til ét ansvar og minimer sideeffekter

Hver funktion bør have ét klart formål. Undgå at mutere globale variabler eller ekstern tilstand for at holde sideeffekter på et minimum.

Dårligt eksempel

1/* Bad Example */
2let total = 0;
3function addItem(price) {
4    total += price; // modifies external state
5    console.log('Item added');
6}

Godt eksempel

1/* Good Example */
2function calculateTotal(items) {
3    return items.reduce((sum, item) => sum + item.price, 0);
4}

• At designe funktioner som rene—der returnerer det samme resultat for samme input—gør dem lettere at teste og mere pålidelige. Det forbedrer også genbrugelighed og gør fejlfinding lettere.

Udfør fejlhåndtering

Sørg for, at appen ikke crasher ved uventet input eller undtagelser. Brug try...catch-syntaksen til at håndtere fejl på passende vis.

Dårligt eksempel

1/* Bad Example */
2let data = JSON.parse(inputData);

Godt eksempel

1/* Good Example */
2try {
3    let data = JSON.parse(inputData);
4} catch (error) {
5    console.error('Failed to parse JSON:', error);
6}

• Da JSON.parse() kan kaste en undtagelse, så håndter det sikkert med try-catch. Grundig fejlhåndtering hjælper dig med at bygge robuste applikationer.

Producer strukturerede logs

Udskriv logs i et konsistent format for at gøre systemadfærd lettere at spore. Brug af JSON-formaterede logs gør dem lettere at arbejde med i analyse- og overvågningsværktøjer.

Dårligt eksempel

1/* Bad Example */
2console.log('Error occurred!');

Godt eksempel

1/* Good Example */
2console.log(JSON.stringify({
3    level: 'error',
4    message: 'Database connection failed',
5    timestamp: new Date().toISOString()
6}));

• Enkle tekst-logs kan miste information; strukturerede logs gør loganalyse, visualisering og overvågning lettere. Dette er især effektivt i server-side JavaScript (Node.js).

Forbedr Kodelæsbarhed

Koden læses af andre (eller dit fremtidige jeg). Brug korrekt indrykning, linjeskift og mellemrum for at gøre koden let at læse.

Dårligt eksempel

1/* Bad Example */
2if(a===b){doSomething();}

Godt eksempel

1/* Good Example */
2if (a === b) {
3    doSomething();
4}

• Godt formateret, læsbar kode er hurtigere at forstå og gør det lettere at opdage fejl. Stop ikke alting på én linje; gør strukturen visuelt tydelig.

Tænk altid på sikkerhed

Fordi JavaScript ofte kører i webmiljøer, er sikkerhedsbevidsthed afgørende. Validér altid brugerinput, beskyt mod XSS og CSRF, og hold afhængigheder opdateret.

Dårligt eksempel

1/* Bad Example */
2// Directly inserting user input into HTML (vulnerable to XSS)
3element.innerHTML = userInput;

Godt eksempel

1/* Good Example */
2// Use textContent to prevent XSS attacks
3element.textContent = userInput;

• At håndtere brugerinput som det er kan introducere sårbarheder som scriptinjektion. Brug sikre API'er og gør det til en vane altid at validere og rense data.

Foretagelse af Kodetest

At indføre automatiserede tests gør det lettere at opdage og forebygge fejl. I JavaScript bruges testframeworks som Jest og Mocha ofte.

Eksempel

1// Simple test using Jest
2function sum(a, b) {
3    return a + b;
4}
5
6test('adds 1 + 2 to equal 3', () => {
7    expect(sum(1, 2)).toBe(3);
8});

• At have tests sikrer, at fejl ikke dukker op igen, når der tilføjes funktioner eller laves ændringer. Tests er uundværlige for løbende kvalitetssikring.

Konklusion

At følge bedste praksis kan i høj grad forbedre kodekvalitet, vedligeholdelighed og pålidelighed. Når du lærer JavaScript, er det vigtigt at opbygge vaner omkring ikke kun syntaks, men også "hvordan man skriver god kode.". Ved at lære kontinuerligt kan du gøre din kode mere læsbar, sikker og effektiv.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video