logo

Styl kódování

Náš kód musí být co nejčistší a snadno čitelný.

To je vlastně umění programování – vzít složitý úkol a nakódovat jej způsobem, který je správný a čitelný pro člověka. K tomu velmi pomáhá dobrý styl kódu.

Syntaxe

Zde je cheat sheet s některými navrhovanými pravidly (další podrobnosti viz níže):

Nyní si podrobně proberme pravidla a jejich důvody.

Neexistují žádná pravidla „musíš“.

Tady není nic vytesáno do kamene. Toto jsou preference stylu, nikoli náboženská dogmata.

Kudrnaté závorky

Ve většině projektů JavaScriptu jsou složené závorky psány „egyptským“ stylem s úvodní složenou závorkou na stejném řádku jako odpovídající klíčové slovo – nikoli na novém řádku. Před otevírací závorkou by také měla být mezera, jako je tato:

if (condition) {
 // do this
 // ...and that
 // ...and that
}

Jednořádková konstrukce, například if (condition) doSomething() , je důležitý okrajový případ. Měli bychom vůbec používat rovnátka?

Zde jsou komentované varianty, abyste mohli sami posoudit jejich čitelnost:

  1. 😠 Začátečníci to někdy dělají. Špatný! Složené závorky nejsou potřeba:
    if (n < 0) {alert(`Power ${n} is not supported`);}
  2. 😠 Rozdělit na samostatný řádek bez složených závorek. Nikdy to nedělejte, snadno uděláte chybu při přidávání nových řádků:
    if (n < 0)
 alert(`Power ${n} is not supported`);
  3. 😏 Jeden řádek bez složených závorek – přijatelný, pokud je krátký:
    if (n < 0) alert(`Power ${n} is not supported`);
  4. 😃 Nejlepší varianta:
    if (n < 0) {
 alert(`Power ${n} is not supported`);
}

Pro velmi stručný kód je povolen jeden řádek, např. if (cond) return null . Ale blok kódu (poslední varianta) je obvykle čitelnější.

Délka řádku

Nikdo nemá rád čtení dlouhého vodorovného řádku kódu. Nejlepší je je rozdělit.

Například:

// backtick quotes ` allow to split the string into multiple lines
let str = `
 ECMA International's TC39 is a group of JavaScript developers,
 implementers, academics, and more, collaborating with the community
 to maintain and evolve the definition of JavaScript.
`;

A pro if prohlášení:

if (
 id === 123 &&
 moonPhase === 'Waning Gibbous' &&
 zodiacSign === 'Libra'
) {
 letTheSorceryBegin();
}

Maximální délka linky by měla být dohodnuta na úrovni týmu. Obvykle má 80 nebo 120 znaků.

Odsazení

Existují dva typy odsazení:

  • Vodorovné odsazení:2 nebo 4 mezery.

    Vodorovné odsazení se provádí pomocí 2 nebo 4 mezer nebo symbolu vodorovného tabulátoru (klávesa Tab ). Který z nich si vybrat, je stará svatá válka. Prostory jsou dnes běžnější.

    Jednou z výhod mezer oproti tabulátorům je, že mezery umožňují flexibilnější konfigurace odsazení než symbol tabulátoru.

    Můžeme například zarovnat parametry s otevírací závorkou takto:

    show(parameters,
 aligned, // 5 spaces padding at the left
 one,
 after,
 another
 ) {
 // ...
}

  • Svislé odsazení:prázdné řádky pro rozdělení kódu do logických bloků.

    I jediná funkce může být často rozdělena do logických bloků. V níže uvedeném příkladu jsou inicializace proměnných, hlavní smyčka a vrácení výsledku rozděleny vertikálně:

    function pow(x, n) {
 let result = 1;
 // <--
 for (let i = 0; i < n; i++) {
 result *= x;
 }
 // <--
 return result;
}

    Vložte nový řádek navíc tam, kde to pomůže, aby byl kód čitelnější. Bez svislého odsazení by nemělo být více než devět řádků kódu.

Středníky

Za každým příkazem by měl být středník, i když by mohl být přeskočen.

Existují jazyky, kde je středník skutečně volitelný a používá se jen zřídka. V JavaScriptu však existují případy, kdy zalomení řádku není interpretováno jako středník, takže kód je náchylný k chybám. Více o tom naleznete v kapitole Struktura kódu.

Pokud jste zkušený programátor JavaScriptu, můžete si vybrat styl kódu bez středníku, jako je StandardJS. V opačném případě je nejlepší používat středníky, abyste se vyhnuli možným nástrahám. Většina vývojářů dává středníky.

Úrovně vnoření

Snažte se vyhnout vnoření kódu příliš mnoho úrovní hluboko.

Například ve smyčce je někdy dobrý nápad použít continue direktiva, aby se zabránilo dodatečnému vnoření.

Například místo přidání vnořeného if podmíněné takto:

for (let i = 0; i < 10; i++) {
 if (cond) {
 ... // <- one more nesting level
 }
}

Můžeme napsat:

for (let i = 0; i < 10; i++) {
 if (!cond) continue;
 ... // <- no extra nesting level
}

Podobnou věc lze provést pomocí if/else a return .

Například dva níže uvedené konstrukty jsou totožné.

Možnost 1:

function pow(x, n) {
 if (n < 0) {
 alert("Negative 'n' not supported");
 } else {
 let result = 1;

 for (let i = 0; i < n; i++) {
 result *= x;
 }

 return result;
 }
}

Možnost 2:

function pow(x, n) {
 if (n < 0) {
 alert("Negative 'n' not supported");
 return;
 }

 let result = 1;

 for (let i = 0; i < n; i++) {
 result *= x;
 }

 return result;
}

Druhý je čitelnější, protože „zvláštní případ“ n < 0 se řeší brzy. Jakmile je kontrola hotová, můžeme přejít k „hlavnímu“ toku kódu bez nutnosti dalšího vnořování.

Umístění funkce

Pokud píšete několik „pomocných“ funkcí a kód, který je používá, existují tři způsoby, jak funkce uspořádat.

  1. Deklarujte funkce výše kód, který je používá:

    // function declarations
function createElement() {
 ...
}

function setHandler(elem) {
 ...
}

function walkAround() {
 ...
}

// the code which uses them
let elem = createElement();
setHandler(elem);
walkAround();

  2. Nejprve kód, potom funkce

    // the code which uses the functions
let elem = createElement();
setHandler(elem);
walkAround();

// --- helper functions ---
function createElement() {
 ...
}

function setHandler(elem) {
 ...
}

function walkAround() {
 ...
}

  3. Smíšené:funkce je deklarována tam, kde byla poprvé použita.

Většinou je preferována druhá varianta.

Při čtení kódu totiž nejprve chceme vědět, co to dělá . Pokud je kód první, je to jasné od začátku. Pak možná nebudeme muset funkce číst vůbec, zvláště pokud jejich názvy popisují, co skutečně dělají.

Průvodci stylem

Stylová příručka obsahuje obecná pravidla o „jak psát“ kód, např. jaké uvozovky použít, kolik mezer odsadit, maximální délka řádku atd. Spousta drobných věcí.

Když všichni členové týmu používají stejného průvodce stylem, kód vypadá jednotně bez ohledu na to, který člen týmu jej napsal.

Samozřejmě, tým může vždy napsat svého vlastního průvodce stylem, ale obvykle to není potřeba. Existuje mnoho existujících průvodců, ze kterých si můžete vybrat.

Některé oblíbené možnosti:

  • Průvodce stylem Google JavaScript
  • Průvodce stylem JavaScriptu Airbnb
  • Idiomatic.JS
  • Standardní JS
  • (a mnoho dalších)

Pokud jste začínající vývojář, začněte s cheatem na začátku této kapitoly. Poté můžete procházet další průvodce styly, abyste získali další nápady a rozhodli se, který se vám líbí nejvíce.

Automatické Linters

Linters jsou nástroje, které mohou automaticky kontrolovat styl vašeho kódu a navrhovat vylepšení.

Skvělé na nich je, že kontrola stylu může také najít nějaké chyby, jako jsou překlepy v názvech proměnných nebo funkcí. Kvůli této funkci se doporučuje používat linter, i když se nechcete držet jednoho konkrétního „stylu kódu“.

Zde jsou některé dobře známé nástroje pro odstraňování vláken:

  • JSLint – jeden z prvních linterů.
  • JSHint – více nastavení než JSLint.
  • ESLint – pravděpodobně nejnovější.

Všichni tu práci zvládnou. Autor používá ESLint.

Většina linterů je integrována s mnoha populárními editory:stačí povolit plugin v editoru a nakonfigurovat styl.

Například pro ESLint byste měli udělat následující:

  1. Nainstalujte Node.js.
  2. Nainstalujte ESLint pomocí příkazu npm install -g eslint (npm je instalátor balíčků JavaScript).
  3. Vytvořte konfigurační soubor s názvem .eslintrc v kořenovém adresáři vašeho projektu JavaScript (ve složce, která obsahuje všechny vaše soubory).
  4. Nainstalujte/povolte plugin pro váš editor, který se integruje s ESLint. Většina redaktorů ho má.

Zde je příklad .eslintrc soubor:

{
 "extends": "eslint:recommended",
 "env": {
 "browser": true,
 "node": true,
 "es6": true
 },
 "rules": {
 "no-console": 0,
 "indent": 2
 }
}

Zde je direktiva "extends" označuje, že konfigurace je založena na sadě nastavení „eslint:recommended“. Poté specifikujeme vlastní.

Je také možné stáhnout sady pravidel stylu z webu a místo toho je rozšířit. Další podrobnosti o instalaci najdete na https://eslint.org/docs/user-guide/getting-started.

Některá IDE mají také vestavěné linting, což je pohodlné, ale ne tak přizpůsobitelné jako ESLint.

Shrnutí

Všechna pravidla syntaxe popsaná v této kapitole (a v odkazovaných průvodcích stylem) mají za cíl zvýšit čitelnost vašeho kódu. Všechny jsou diskutabilní.

Když přemýšlíme o psaní „lepšího“ kódu, měli bychom si položit otázky:„Proč je kód čitelnější a snadněji pochopitelný?“ a "Co nám může pomoci vyhnout se chybám?" Toto jsou hlavní věci, které je třeba mít na paměti při výběru stylů kódu a debatách o nich.

Čtení oblíbených stylových příruček vám umožní udržovat si aktuální informace o nejnovějších nápadech o trendech ve stylu kódu a osvědčených postupech.