Käytä aina samoja koodauskäytäntöjä kaikissa JavaScriptissäsi hankkeita.
Koodauskäytännöt ovat ohjelmoinnin tyyliohjeita. Ne kattavat yleensä:
Muuttujien ja funktioiden nimeämis- ja ilmoitussäännöt.
Säännöt välilyöntien, sisennysten ja kommenttien käytöstä.
Ohjelmointikäytännöt ja -periaatteet.
Koodauskäytännöt turvaavat laadun:
Paranna koodin luettavuutta
Helpota koodin ylläpitoa
Koodauskäytännöt voivat olla dokumentoituja sääntöjä, joita tiimit voivat noudattaa, tai ne voivat olla vain yksilöllisiä koodauskäytäntöjäsi.
Tällä sivulla kuvataan W3Schoolsin käyttämät yleiset JavaScript-koodikäytännöt.
Sinun tulisi myös lukea seuraava luku "Parhaat käytännöt" ja oppia välttämään koodauksen sudenkuopat.
W3schoolsissa käytämme camelCase-tunnisteiden nimiä (muuttujia ja funktioita).
Kaikki nimet alkavat kirjaimella.
Tämän sivun alalaidasta löydät laajempaa keskustelua nimeämisestä säännöt.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);Laita aina välilyönnit operaattoreiden ympärille (=+ - */) ja pilkkujen jälkeen:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];Käytä aina kahta välilyöntiä koodilohkojen sisennykseen:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}Älä käytä välilehtiä (tabulaattoria) sisennykseen. Eri editorit tulkitsevat välilehtiä eri tavalla.
Yleiset säännöt yksinkertaisille lausumille:
Päätä yksinkertainen lause aina puolipisteeseen.
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};Yleiset säännöt monimutkaisille (yhdistetyille) lausumille:
Aseta avaussulku ensimmäisen rivin loppuun.
Käytä yksi välilyönti ennen avaussulkua.
Aseta sulkusulku uudelle riville ilman välilyöntejä.
Älä lopeta monimutkaista lausetta puolipisteeseen.
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}for (let i = 0; i < 5; i++) {
x += i;
}if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}Yleiset säännöt objektien määrittelyille:
Aseta aloitussulke samalle riville kohteen nimen kanssa.
Käytä kaksoispistettä plus yksi välilyönti kunkin ominaisuuden ja sen arvon välissä.
Käytä lainausmerkkejä merkkijonoarvojen ympärillä, älä numeeristen arvojen ympärillä.
Älä lisää pilkkua viimeisen ominaisuus-arvo-parin jälkeen.
Aseta sulkukannatin uudelle riville, ilman johtavat tilat.
Lopeta objektin määritelmä aina puolipisteeseen.
Lyhyet objektit voidaan kirjoittaa pakattuna, yhdelle riville, käyttämällä vain välilyöntejä ominaisuuksien välillä, kuten tämä:
Vältä luettavuuden vuoksi yli 80 pitkiä rivejä hahmoja.
Jos JavaScript-lause ei mahdu yhdelle riville, paras paikka katkaista se on operaattorin tai pilkun jälkeen.
document.getElementById("demo").innerHTML =
"Hello Dolly.";Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>My Web Page</h2>
<p>The best place to break a code line is after an operator or a comma.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly.";
</script>
</body>
</html>
Käytä aina samaa nimeämiskäytäntöä kaikessa koodissasi. Esimerkiksi:
Muuttujien ja funktioiden nimet kirjoitetaan muodossa camelCase
Yleiset muuttujat, jotka on kirjoitettu SUORIN KIRJAIN (emme kirjoita, mutta se on melko yleistä)
Vakiot (kuten PI), jotka on kirjoitettu SUURIN KIRJAIN
Pitäisikö sinun käyttää hyp-hens-, camelCase- tai alle_pisteet muuttujien nimissä?
Tästä ohjelmoijat keskustelevat usein. Vastaus riippuu siitä, kuka olet kysyä:
Tavuviivat HTML:ssä ja CSS:ssä:
HTML5-attribuutit voivat alkaa sanalla data- (data-quantity, data-price).
CSS käyttää väliviivoja ominaisuuksien nimissä (font-size).
Tavuviivat voidaan luulla vähennysyrityksiksi. Tavuviivat eivät ole sallittuja JavaScript-nimissä.
Alleviivat:
Monet ohjelmoijat käyttävät mieluummin alaviivoja (date_of_birth), erityisesti SQL:ssä tietokannat.
PHP-dokumentaatiossa käytetään usein alaviivoja.
PascalCase:
C-ohjelmoijat suosivat usein PascalCasea.
camelCase:
Itse JavaScript, jQuery ja muut JavaScript käyttävät camelCasea kirjastot.
Älä aloita nimiä $-merkillä. Se asettaa sinut ristiriitaan monien JavaScript-kirjastojen nimien kanssa.
Käytä yksinkertaista syntaksia ulkoisten komentosarjojen lataamiseen (type-attribuutti ei ole tarpeen):
<script src="myscript.js"></script>Seurauksena "epäsiistien" HTML-tyylien käytöstä saattaa aiheuttaa JavaScript-virheitä.
Nämä kaksi JavaScript-lausetta tuottavat erilaisia tuloksia:
const obj = getElementById("Demo")
const obj = getElementById("demo")Jos mahdollista, käytä samaa nimeämiskäytäntöä (kuten JavaScript) HTML:ssä.
Vieraile HTML-tyylioppaassa.
HTML-tiedostoilla tulee olla .html-tunniste (.htm on sallittu). <p>CSS-tiedostoilla tulee olla .css-tunniste.
JavaScript-tiedostoilla tulee olla .js-tunniste.
Useimmat verkkopalvelimet (Apache, Unix) erottelevat tiedostonimien isot ja pienet kirjaimet:
london.jpg-tiedostoa ei voi käyttää nimellä London.jpg.
Muut verkkopalvelimet (Microsoft, IIS) eivät erota isot ja pienet kirjaimet:
london.jpg voidaan käyttää nimellä London.jpg tai london.jpg.
Jos käytät isojen ja pienten kirjainten yhdistelmää, sinun on oltava äärimmäinen johdonmukainen.
Jos siirryt kirjainkoolla välittömästä palvelimesta isot ja pienet kirjaimet huomioivaan palvelimeen virheet voivat rikkoa verkkosivustosi.
Vältä nämä ongelmat käyttämällä aina pieniä kirjaimia tiedostonimiä (jos mahdollista).
Tietokoneet eivät käytä koodauskäytäntöjä. Useimmilla säännöillä on vähän vaikutusta ohjelmien suorittamiseen.
Sisennyksellä ja ylimääräisillä välilyönneillä ei ole merkitystä pienissä skripteissä.
Kehitettävissä olevan koodin luettavuus tulisi suosia. Isompi tuotanto skriptit tulee minimoida.