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

to je vlastně umění programování-přijmout složitý úkol a kódovat jej způsobem, který je správný i čitelný pro člověka. Dobrý styl kódu v tom velmi pomáhá.

Syntax

Tady je tahák s některými navrhl pravidla (viz níže pro více informací):

Nyní pojďme diskutovat pravidla a důvody pro ně v detailu.

Složené Závorky

Ve většině JavaScript projekty, složené závorky jsou psány v „Egyptském“ stylu s otevírací závorku na stejný řádek jako odpovídající klíčové slovo – ne na nový řádek. Tam by měl být také prostor před otevřením konzoly, jako je tento:

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

single-line konstrukt, jako je if (condition) doSomething(), je důležitý okrajový případ. Měli bychom vůbec používat rovnátka?

zde jsou anotované varianty, takže můžete posoudit jejich čitelnost sami:

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

délka řádku

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

například:

// backtick quotes ` allow to split the string into multiple lineslet 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 if prohlášení:

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

maximální délka řádku by měla být dohodnuta v týmu-úrovni. Obvykle je to 80 nebo 120 znaků.

odsazení

existují dva typy odsazení:

• horizontální odsazení: 2 nebo 4 mezery.

  vodorovné odsazení se provádí pomocí 2 nebo 4 mezer nebo symbolu vodorovné karty (Karta klíče). Který z nich si vybrat, je stará Svatá válka. Prostory jsou dnes běžnější.

  jednou z výhod mezer nad kartami je, že mezery umožňují flexibilnější konfigurace odsazení než symbol karty.

  například, můžeme sladit parametry s otevřením konzoly, jako je tento:

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

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

  i jedna funkce může být často rozdělena do logických bloků. V níže uvedeném příkladu, inicializace proměnné, hlavní smyčky a vrací výsledek jsou rozděleny vertikálně:

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

  Vložit další řádek, kde to pomáhá, aby se kód lépe čitelný. Nemělo by existovat více než devět řádků kódu bez svislého odsazení.

středníky

středník by měl být přítomen po každém příkazu, 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 přerušení řádku není interpretováno jako středník, takže kód je zranitelný vůči chybám. Více o tom v kapitole struktura kódu.

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

úrovně hnízdění

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

například ve smyčce je někdy vhodné použít direktivu continue, aby se zabránilo dalšímu hnízdění.

například, místo toho, přidání vnořené if podmíněné, jako je tento:

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

můžeme psát:

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

podobná věc může být provedeno s if/elsereturn.

například dva konstrukty níže jsou identické.

1. Možnost:

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; }}

2. Možnost:

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 je „zvláštní případ“ n < 0 je řešen brzy. Po dokončení kontroly můžeme přejít na“ hlavní “ tok kódu bez nutnosti dalšího vnoření.

Funkce Umístění

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

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

je to proto, že při čtení kódu nejprve chceme vědět, co dělá. Pokud kód jde jako první, pak je od začátku jasný. Pak možná nebudeme muset číst funkce vůbec, zvláště pokud jejich jména popisují to, co skutečně dělají.

průvodce stylem

průvodce stylem obsahuje obecná pravidla pro“ Jak psát “ kód, např. které 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ý 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ůj vlastní průvodce stylem, ale obvykle to není třeba. Existuje mnoho stávajících průvodců z čeho vybírat.

některé populární volby:

• Google JavaScript Style Guide
• Airbnb JavaScript Style Guide
• Idiomatic.JS
• StandardJS
• (plus mnoho dalších)

Pokud jste začínající vývojář, začít s cheat sheet na začátku této kapitoly. Pak můžete procházet další průvodce stylem, abyste získali více nápadů a rozhodli se, který z nich se vám nejvíce líbí.

Automatické Lintr

Lintr jsou nástroje, které mohou automaticky kontrolovat styl vašeho kódu a učinit návrhy zlepšení.

skvělá věc na nich je, že kontrola stylu může také najít některé chyby, jako 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é známé nástroje pro linkování:

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

všichni mohou dělat svou práci. 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. Install Node.js.
2. nainstalujte ESLint příkazem npm install -g eslint (npm je instalátor balíčku JavaScript).
3. Vytvořte konfigurační soubor s názvem .eslintrc v kořenovém adresáři 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 editorů ji má.

zde je příklad souboru .eslintrc :

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

Tady je směrnice "extends" označuje, že konfigurace je založena na „eslint:doporučujeme“ sadu nastavení. Poté specifikujeme vlastní.

je také možné stáhnout sady pravidel stylu z webu a místo toho je rozšířit. Viz http://eslint.org/docs/user-guide/getting-started pro více informací o instalaci.

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

Shrnutí

Všechny pravidla syntaxe popsané v této kapitole (a ve stylu průvodce odkazuje) cílem zvýšit čitelnost vašeho kódu. Všechny jsou diskutabilní.

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

čtení populárních stylů vám umožní držet krok s nejnovějšími představami o trendech ve stylu kódu a osvědčených postupech.