JavaScript-tyyliopas

Käytä aina samanlaisia koodiasetuksia kaikissa JavaScript-projekteissasi.

JavaScript-koodiasetukset

Koodiasetukset (Coding conventions) tarkoittavat:Koodauksen tyyliohjeetNämä periaatteet sisältävät pääasiassa:

  • Muuttujien ja toimintojen nimeämisen ja määrittelyn säännöt
  • Vakion, sisennys- ja kommenttien käyttöön liittyvät säännöt
  • Koodauskäytännöt ja periaatteet

KoodiasetuksetVarmista laatu:

  • Paranna koodin luettavuutta
  • Paranna koodin ylläpidettävyyttä

Koodiasetukset voivat olla kirjallisesti määritettyjä sääntöjä, joita tiimi noudattaa, tai henkilökohtaisia koodauskäytäntöjäsi.

Tämä sivu esittelee yleiset JavaScript-koodiasetukset, joita CodeW3C.com käyttää.

Sinun tulisi jatkaa lukemista seuraavassa luvussa “Parhaat käytännöt” ja oppia, miten voit välttää koodaushaasteita.

Muuttujanimet

CodeW3C.com:ssa käytämme tunnisteiden nimiä (muuttujat ja funktiot) kuusikonkurkkumallin kirjoitusasussaKuusikonkurkkumallin kirjoitusasussa.

Kaikki nimet alkavatKirjaimetAlku.

Tämä sivulla alhaalla käsittelemme laajemmin nimeämisohjeita.

etunimi = "Bill";
sukunimi = "Gates";
hintta = 19.90;
vero = 0.20;
fullPrice = hinta + (hinta * vero);

Operaattoreiden ympärillä olevat välilyönnit

Päättä aina operaattoreiden ( = + - * /) ja pilkkujen ympärillä välilyönnillä:

esimerkki

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

Koodin sisennys

Käytä aina 4 välilyöntiä koodin sisennykseen:

Funktio

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

Älä käytä tabulaattoreita sisennykseen. Eri editorit tulkovat tabua eri tavoin.

Lause säännöt

Yleiset yksinkertaisten lauseiden säännöt:

Päättä aina yhdellä lauseella semikolmella:

esimerkki

var arvot = ["Volvo", "Saab", "Fiat"];
var henkilö = {
    etunimi: "Bill",
     sukunimi: "Gates",
    ikä: 50,
    silmäväri: "sininen"
};

Yleiset säännöt monimutkaisille (compound) lauseille:

  • Kirjoita avausl Bracelet ensimmäisen rivin loppuun
  • Käytä välilyöntiä avausl Braceletin edessä
  • Kirjoita sulkeet uudelle riville ilman etuleikkausta
  • Älä päättä monimutkaisista lauseista semikolmella

Funktio:

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

Silmukka:

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

Ehdot:

if (aika < 20) {
    tervehdys = "Hyvää päivää";
} else {
     tervehdys = "Hyvää iltaa";
}

Objekti säännöt

Yleiset säännöt objektimäärittelylle:

  • Aseta avausl Bracelet ja objekti nimessä samalle riville
  • Käytä kolon ja välilyöntiä ominaisuuden ja sen arvon välillä
  • Älä kirjoita pilkkuja viimeisen ominaisuuden arvon jälkeen
  • Kirjoita sulkeet uudelle riville ilman etuleikkausta
  • Aina päättä suhteiden määrittelyssä semikolmella

esimerkki

var henkilö = {
    etunimi: "Bill",
    sukunimi: "Gates",
    ikä: 19,
    silmäväri: "sininen"
};

Voit tiivistää lyhyet objektit yhdessä rivissä, käytä vain välilyöntejä ominaisuuksien välillä, kuten näin:

var henkilö = {etunimi:"Bill", sukunimi:"Gates", ikä:50, silmäväri:"sininen"};

rivin pituus alle 80

Parantaaksesi luettavuutta, vältä, että rivin pituus ylittää 80 merkkiä.

Jos JavaScript-lause on yli yhden rivin pituinen, rivinvaihdon paras paikka on operaattorin tai pilkun jälkeen.

esimerkki

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

Kokeile itse

nimikuvaukset

Käytä aina kaikissa koodissasi samoja nimikuvauksia. Esimerkiksi:

  • muuttujien ja funktioiden nimet kirjoitetaankana-kirjaimet (camelCase)muuttujien ja funktioiden nimet kirjoitetaan
  • globaalit muuttujat kirjoitetaanisokirjaimia(emme tee niin, mutta se on melko yleistä)
  • vakiot (kuten PI) kirjoitetaanisokirjaimia

tulisiko käyttää muuttujien nimissähypenjakana-kirjaimet (camelCase)taialaviivatkö?

Tämä on kysymys, josta ohjelmoijat keskustelevat usein. Vastaus riippuu siitä, kuka kysymykseen vastaa:

HTML ja CSS käyttävät hypeneitä:

HTML5-ominaisuudet voivat alkaa data-avainsanalla (data-quantity, data-price).

CSS käyttää hypeneitä property-nimissä (font-size).

Hypen (hyphen) voidaan väärin tulkita vähennyslaskennan operaattorina. JavaScriptin nimeämisessä ei sallita hypeneitä.

Alaviivat:

Monet ohjelmoijat pitävät alaviivoja (date_of_birth) mukavana, erityisesti SQL-tietokantojen yhteydessä.

Alaviivat käytetään usein PHP-dokumentaation yhteydessä.

Pascal-nimistö (PascalCase):

C-kielen ohjelmoijat käyttävät usein Pascal-nimistöä.

Kana-kirjaimet (camelCase):

JavaScript itse, jQuery ja muut JavaScript-kirjastot käyttävät kana-kirjaimia (camelCase).

JavaScript-nimien ei tule aloittaa dollari-merkkiä ($). Tämä voi aiheuttaa JavaScript-nimien konfliktin.

Lataa JavaScript HTML:ään

Lataa ulkoinen skripti yksinkertaisella syntaksilla (type-ominaisuus ei ole välttämätön):

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

HTML-elementin käsittely

Epäsiistien HTML-tyylien seuraukset, jotka saattavat johtaa JavaScript-virheisiin.

Nämä kaksi JavaScript-lauseet tuottavat erilaisia tuloksia:

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

Jos mahdollista, käytä HTML:ssä samoja nimikuvauksia (kuten JavaScriptissä).

Pääsy HTML-tyyliopas.

tiedostolaajennukset

HTML-tiedostot tulisi käyttää .html Laajennus (ei .htm)

CSS-tiedostot tulisi käyttää .css Laajennus

JavaScript-tiedostot tulisi käyttää .js Laajennus

Käytä pieniä kirjaimia sisältäviä tiedostonimiä

Useimmat verkkopalvelimet (Apache, Unix) ovat iskuvakainnollisia tiedostonimille:

london.jpg ei voida nähdä London.jpg:n avulla.

Muut verkkopalvelimet (Microsoftin IIS) eivät ole iskuvakainnollisia:

london.jpg voidaan avata London.jpg:n tai london.jpg:n avulla.

Jos käyttää sekavaihtoehtoisia iskuvakainnoja, on pidettävä tiukasti jatkuvana ja johdonmukaisena.

Jos siirrät sivuston iskuvakainnollisesta palvelimesta iskuvakainnolliseen palvelimeen, jopa nämä pienet virheet voivat rikkoa sivustosi.

Välttääksesi nämä ongelmat, käytä aina pieniä kirjaimia sisältäviä tiedostonimiä (jos mahdollista).

Suorituskyky

Tietokoneet eivät käytä koodisääntöjä. Suurin osa säännöistä vaikuttaa vähän ohjelman suoritukseen.

Tabulaatiot ja ylimääräiset välilyönnit eivät ole tärkeitä lyhyille skripteille.

Käynnissä olevien skriptien osalta tulisi ensisijaisesti ottaa huomioon luettavuus. Suuremmat tuotantoskriptit tulisi pienenemään.