JavaScript Best Practices

Undgå globale variabler,new,===,eval()

Undgå globale variabler

Brug så få globale variabler som muligt.

Det inkluderer alle datatyper, objekter og funktioner.

Globale variabler og funktioner kan overskrives af andre scripts.

Brug lokale variabler i stedet og lær at brugelukket.

Deklarer altid lokale variabler

Alle variabler, der bruges i funktionen, bør deklareres somlokalevariabler

lokale variablermågennem var Brug nøgleord til deklaration, ellers vil de blive globale variabler.

Strengt mode tillader ikke udeklarerede variabler.

Deklaration i toppen

En god kodepraksis er at placere alle deklarationer i toppen af hvert script eller funktion.

Fordelene ved dette er:

  • Giver mere pænt kode
  • Giver en god placering til at finde lokale variabler
  • Det er lettere at undgå unødvendige globale variabler
  • Reducerer sandsynligheden for unødvendige gentagne deklarationer
// Deklaration i toppen
var firstName, lastName, price, discount, fullPrice;
// Brug senere
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

Det kan også bruges til løkkevariabler:

// Deklaration i toppen
var i;
// Brug senere
for (i = 0; i < 5; i++)  {

Som standard vil JavaScript flytte alle deklarerede variabler til toppen (JavaScript hoisting).

Initialisering af variabler

Det er en god vane at initialisere variabler, når du deklarerer dem.

Fordelene ved dette er:

  • Kod, der er mere pæn
  • Initialiser variabler på et separat sted
  • Undgå udefinerede værdier
// Udfør deklaration og initialisering i begyndelsen
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

Variabelinitialisering hjælper os med at forstå forventet brug og forventet datatyper.

Deklarer ikke tal, strenge eller boolean objekter

Vær altid opmærksom på, at tal, strenge eller boolean værdier er primitivværdier, ikke objekter.

Hvis du deklarerer disse typer som objekter, kan det bremse udførelsen og forårsage irriterende bivirkninger:

Eksempel

var x = "Bill";             
var y = new String("Bill");
(x === y) // Resultatet er false, fordi x er en streng, og y er et objekt.

Prøv det selv

Eller endnu værre:

Eksempel

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // Resultatet er false, fordi du ikke kan sammenligne objekter.

Prøv det selv

Undgå brug af new Object()

  • Brug {} i stedet for new Object()
  • Brug "" i stedet for new String()
  • Brug 0 i stedet for new Number()
  • Brug false i stedet for new Boolean()
  • Brug [] i stedet for new Array()
  • Brug /()/ i stedet for new RegExp()
  • Brug function (){} i stedet for new Function()

Eksempel

var x1 = {};           // Ny objekt
var x2 = "";           // Ny primitiv strengværdi
var x3 = 0;            // Ny primitiv numerisk værdi
var x4 = false;        // Ny primitiv boolean værdi
var x5 = [];           // Ny array
var x6 = /()/;         // Ny regulær udtryksobjekt
var x7 = function(){}; // Ny funktion

Prøv det selv

Vær opmærksom på automatisk typekonvertering

Vær opmærksom på, at tal kan konverteres til streng uden at man får det med sig. NaN(Not a Number).

JavaScript er en løs type. Variabler kan indeholde forskellige datatyper, og variabler kan ændre deres datatyper:

Eksempel

var x = "Hello";     // typeof x er streng
x = 5;               // ændr typeof x til numerisk

Prøv det selv

Hvis der udføres matematisk operation, kan JavaScript konvertere værdier til streng:

Eksempel

var x = 5 + 7;       // x.valueOf() er 12, typeof x er numerisk
var x = 5 + "7";     // x.valueOf() er 57, typeof x er streng
var x = "5" + 7;     // x.valueOf() er 57, typeof x er streng
var x = 5 - 7;       // x.valueOf() er -2, typeof x er numerisk
var x = 5 - "7";     // x.valueOf() er -2, typeof x er numerisk
var x = "5" - 7;     // x.valueOf() er -2, typeof x er numerisk
var x = 5 - "x";     // x.valueOf() er NaN, typeof x er numerisk

Prøv det selv

Når man trækker tal fra tal, opstår der ingen fejl, men returneres NaN（Ikke et tal）:

Eksempel

"Hello" - "Dolly"    // Returnerer NaN

Prøv det selv

Brug === til sammenligning

== sammenligningsoperatorer udfører altid en typekonvertering før sammenligning (for at matche typer).

=== operatorer tvunget sammenligning af værdier og typer:

Eksempel

0 == "";        // true
1 == "1";       // true
1 == true;      // true
0 === "";       // false
1 === "1";      // false
1 === true;     // false

Prøv det selv

Brug Parameter Defaults

hvis der mangler en parameter, når funktionen kaldes, vil værdien for den manglende parameter blive sat til undefined.

undefined værdier kan ødelægge din kode. At sætte standardværdier til parametre er en god vane.

Eksempel

function myFunction(x, y) {
    hvis (y === undefined) {
        y = 0;
    }
}

Prøv det selv

BrugFunktionparametreLæs mere om funktionparametre i dette kapitel.

Brug default til at afslutte switch

Brug default for at afslutte din switch Sætning. Selvom du mener, at det ikke er nødvendigt.

Eksempel

switch (new Date().getDay()) {
    case 0:
        day = "Søndag";
        break;
    case 1:
        day = "Tirsdag";
         break;
    case 2:
        day = "Mandag";
         break;
    case 3:
        day = "Onsdag";
         break;
    case 4:
        day = "Torsdag";
         break;
    case 5:
        day = "Fredag";
         break;
    case 6:
        day = "Lørdag";
         break;
    default:
        day = "Ukendt";
}

Prøv det selv

Undgå brug af eval()

eval() Funktioner bruges til at tillade tekst som kode. I næsten alle tilfælde er det ikke nødvendigt at bruge det.

Fordi det tillader kørsel af vilkårlig kode, betyder det også, at der er sikkerhedsmæssige problemer.