Průvodce stylem JavaScriptu
Vždy používejte stejné konvence kódování pro všechny své projekty JavaScript.
Konvence kódování JavaScriptu
Konvence kódování jsou pokyny pro styl programování . Obvykle pokrývají:
- Pravidla pojmenování a deklarace proměnných a funkcí.
- Pravidla pro použití mezer, odsazení a komentářů.
- Praktiky a principy programování
Konvence kódování zajišťují kvalitu :
- Zlepšuje čitelnost kódu
- Usnadněte si údržbu kódu
Konvence kódování mohou být zdokumentovaná pravidla, kterými se týmy mají řídit, nebo mohou být jen vaší individuální praxí kódování.
Tato stránka popisuje obecné konvence kódu JavaScript používané W3Schools.
Měli byste si také přečíst další kapitolu „Best Practices“ a naučit se, jak se vyhnout nástrahám kódování.
Názvy proměnných
Ve W3schools používáme camelCase pro názvy identifikátorů (proměnných a funkcí).
Všechna jména začínají písmenem .
Ve spodní části této stránky najdete širší diskusi o pravidlech pojmenovávání.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Prostory kolem operátorů
Vždy dávejte mezery kolem operátorů ( = + - * / ) a za čárky:
Příklady:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Odsazení kódu
Pro odsazení bloků kódu vždy používejte 2 mezery:
Funkce:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
K odsazení nepoužívejte tabulátory (tabulátory). Různé editory interpretují karty odlišně.
Pravidla výpisu
Obecná pravidla pro jednoduchá tvrzení:
- Jednoduchý výrok vždy zakončete středníkem.
Příklady:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Obecná pravidla pro složité (složené) příkazy:
- Umístěte otevírací držák na konec prvního řádku.
- Použijte jedno místo před otevírací konzolou.
- Umístěte uzavírací závorku na nový řádek bez úvodních mezer.
- Složité tvrzení neukončujte středníkem.
Funkce:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Smyčky:
for (let i = 0; i < 5; i++) {
x += i;
}
Podmínky:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Pravidla objektu
Obecná pravidla pro definice objektů:
- Umístěte otevírací závorku na stejný řádek jako název objektu.
- Mezi každou vlastností a její hodnotou použijte dvojtečku plus jednu mezeru.
- Používejte uvozovky kolem řetězcových hodnot, nikoli kolem číselných hodnot.
- Nepřidávejte čárku za poslední pár vlastnost-hodnota.
- Umístěte uzavírací závorku na nový řádek bez úvodních mezer.
- Definici objektu vždy ukončete středníkem.
Příklad
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Krátké objekty lze psát komprimované, na jeden řádek, pouze pomocí mezer mezi vlastnostmi, jako je tento:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Délka řádku < 80
Kvůli čitelnosti se vyhněte řádkům delším než 80 znaků.
Pokud se příkaz JavaScript nevejde na jeden řádek, nejlepším místem pro jeho přerušení je operátor nebo čárka.
Příklad
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Konvence pojmenování
Vždy používejte stejnou konvenci pojmenování pro veškerý svůj kód. Například:
- Názvy proměnných a funkcí zapsané jako camelCase
- Globální proměnné psané VELKÝMI PÍSMENY (my ne, ale je to docela běžné)
- Konstanty (jako PI) psané VELKÝMI PÍSMENY
Měli byste v názvech proměnných používat hyp-hens , camelCase nebo under_scores ?
To je otázka, kterou programátoři často diskutují. Odpověď závisí na tom, koho se ptáte:
Spojovníky v HTML a CSS:
Atributy HTML5 mohou začínat daty (data-quantity, data-price).
CSS používá pomlčky v názvech vlastností (velikost písma).
Spojovníky lze zaměnit za pokusy o odčítání. V názvech JavaScriptu nejsou povoleny spojovníky.
podtržítka:
Mnoho programátorů dává přednost použití podtržítek (datum_narození), zejména v SQL databázích.
V dokumentaci PHP se často používají podtržítka.
PascalCase:
PascalCase je často preferován programátory C.
velbloudí pouzdro:
camelCase je používán samotným JavaScriptem, jQuery a dalšími JavaScriptovými knihovnami.
Nezačínejte jména znakem $. Dostanete se do konfliktu s mnoha názvy knihoven JavaScriptu.
Načítání JavaScriptu v HTML
Pro načítání externích skriptů použijte jednoduchou syntaxi (atribut type není nutný):
<script src="myscript.js"></script>
Přístup k prvkům HTML
Důsledek používání "neupravených" stylů HTML může vést k chybám JavaScriptu.
Tyto dva příkazy JavaScriptu poskytnou různé výsledky:
const obj = getElementById("Demo")
const obj = getElementById("demo")
Pokud je to možné, použijte v HTML stejnou konvenci pojmenování (jako JavaScript).
Navštivte Průvodce stylem HTML .
Přípony souborů
Soubory HTML by měly mít příponu .html ( je povoleno .htm ).
Soubory CSS by měly mít příponu .css .
Soubory JavaScript by měly mít příponu .js .
Používejte názvy souborů malými písmeny
Většina webových serverů (Apache, Unix) rozlišuje velká a malá písmena v názvech souborů:
london.jpg není přístupný jako London.jpg.
Jiné webové servery (Microsoft, IIS) nerozlišují malá a velká písmena:
london.jpg je přístupný jako London.jpg nebo london.jpg.
Pokud používáte kombinaci velkých a malých písmen, musíte být extrémně konzistentní.
Pokud přejdete ze serveru, který nerozlišuje malá a velká písmena, na server citlivý na velká a malá písmena, mohou i malé chyby poškodit váš web.
Chcete-li se těmto problémům vyhnout, vždy používejte názvy souborů s malými písmeny (pokud je to možné).
Výkon
Počítače nepoužívají konvence kódování. Většina pravidel má malý vliv na provádění programů.
Odsazení a mezery navíc nejsou v malých skriptech významné.
U kódu ve vývoji by měla být preferována čitelnost. Větší produkční scénáře by měly být minimalizovány.