JavaScript-stilguide

Brug altid de samme kodekonventioner for alle dine JavaScript-projekter.

JavaScript-kodekonventioner

Kodekonventioner (Coding conventions) refererer tilStilvejledninger for programmeringDisse principper omfatter generelt:

  • Regler for variabel- og funktionnavngivning og deklaration
  • Regler for brug af mellemrum, indrykning og kommentarer
  • Programmeringsvaner og principper

KodekonventionerSørg for kvalitet:

  • Forbedre kode læsbarhed
  • Forbedre kode vedligeholdelse

Kodekonventioner kan være skriftlige regler, som et team følger, eller dine personlige kodningsvaner.

Denne side introducerer de almindelige JavaScript-kodekonventioner, der bruges på CodeW3C.com.

Du bør fortsætte med at læse det næste kapitel “Bedste praksis”, og lære, hvordan du kan undgå kodningsfælder.

Variabelnavne

På CodeW3C.com bruger viKapitalisering i stigende skrift.

Alle navne starter medBogstaverBegyndelse.

På denne sides bund vil vi diskutere navngivningsreglerne mere omfattende.

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

Mellemrum omkring operatorer

Brug altid mellemrum omkring operatorer (= + - * /) og efter kommaer:

Eksempel

var x = y + z;
var values = ["Volvo", "Saab",  "Fiat"];

Kodeskift

Brug altid 4 mellemrum til at indrykke kodeblokke:

Funktion

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Brug ikke tabulatorer til indrykning. Forskellige redigeringsværktøjer fortolker tabulatorer forskelligt.

Sætningeregler

Generelle regler for simple sætninger:

Brug altid semicolon for at afslutte enkeltstående sætninger:

Eksempel

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

Generelle regler for komplekse sætninger (compound):

  • Skriv åbningsklamme på slutningen af første linje
  • Brug et mellemrum før åbningsklamme
  • Skriv afsluttende klammesæt på en ny linje, uden forudgående mellemrum
  • Brug ikke semicolon for at afslutte komplekse sætninger

Funktion:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Løkke:

for (i = 0; i < 5; i++) {
    x += i;
}

Betingelse:

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

Objektregler

Generelle regler for objektdefineringer:

  • Placer åbningsklamme og objektnavn på samme linje
  • Brug colon og et mellemrum mellem egenskab og værdi
  • Skriv ikke komma efter sidste egenskabsværdipar
  • Skriv afsluttende klammesæt på en ny linje, uden forudgående mellemrum
  • Brug altid semicolon for at afslutte objektdefineringer

Eksempel

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

Kan man komprimere korte objekter på en linje, kun brug af mellemrum mellem egenskaber, som f.eks.:

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

Linjelængde mindre end 80

For at forbedre læsbarheden, undgå at have linjer længere end 80 tegn.

Hvis JavaScript-statement er længere end én linje, er det bedste sted at bruge linjeskift efter operatorer eller kommaer.

Eksempel

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

Prøv det selv

Navngivningskonvention

Brug altid samme navngivningskonvention i al din kode. For eksempel:

  • Variabler og funktioner navngives medCamelCasefor at skrive
  • Globale variabler brugerstore bogstaver(Vi gør det ikke, men det er meget udbredt)
  • Konstanter (som PI) brugerstore bogstaver

Skal vi bruge i variabelnavneHæmmingerogCamelCaseellerUnderstregningerja?

Dette er et problem, som programmerere ofte diskuterer. Svaret afhænger af, hvem der svarer på dette spørgsmål:

Hæmminger i HTML og CSS:

HTML5-egenskaber kan starte med data- (data-quantity, data-price).

CSS bruger hæmminger i property-namn (font-size).

Hæmminger kan forkert opfattes som minusoperator. JavaScript-navne må ikke indeholde hæmminger.

Understregninger:

Mange udviklere foretrækker at bruge understregninger (date_of_birth), især i SQL-databaser.

Understregninger bruges ofte i PHP-dokumentation.

PascalCase-navngivning:

C-sprogudviklere bruger ofte PascalCase-navngivning.

CamelCase-stil:

JavaScript, jQuery og andre JavaScript-biblioteker bruger camelCase-stil.

JavaScript-navne bør ikke starte med $-tegn. Dette kan forårsage navnekonflikter mellem JavaScript-klasser.

Indlæs JavaScript i HTML

Brug en simpel syntax til at indlæse ekstern script (type-egenskaben er ikke nødvendig):

<script src="myscript.js"></script>

Adgang til HTML-elementer

Konsekvenserne af at bruge 'ufraavelig' HTML-stil kan være at forårsage JavaScript-fejl.

Disse to JavaScript-statement genererer forskellige resultater:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Hvis muligt, brug samme navngivningskonvention i HTML (som JavaScript).

Besøg HTML-stilguiden.

filudvidelser

HTML-filer bør bruge .html Eksnappe (ikke .htm).

CSS-filer bør bruge .css Eksnappe

JavaScript-filer bør bruge .js Eksnappe

Brug små filnavne

De fleste webservere (Apache, Unix) er følsomme over for filnavns store og små bogstaver:

london.jpg kan ikke nås som London.jpg.

Andre webservere (Microsofts IIS) er ikke følsomme over for store og små bogstaver:

london.jpg kan nås som London.jpg eller london.jpg.

Hvis du bruger en blanding af store og små bogstaver, skal du holde sig strengt konsekvent og ensartet.

Hvis du flytter din side fra en server, der er ikke følsom over for store og små bogstaver, til en server, der er følsom over for store og små bogstaver, kan endda små fejl ødelægge din side.

For at undgå disse problemer bør du altid bruge små filnavne (hvis muligt).

Ydeevne

Computere bruger ikke kodekonventioner. De fleste regler har lille indflydelse på programs udførelse.

Indrykning og ekstra mellemrum er ikke vigtige for korte skript.

For skript, der udvikles, bør læsbarthed prioriteres. Store produktions脚本 bør indsnævres.