kódunknak a lehető legtisztábbnak és könnyen olvashatónak kell lennie.

Ez valójában a programozás művészete – összetett feladat elvégzése és kódolása olyan módon, amely mind helyes, mind ember számára olvasható. Egy jó kód stílus nagyban segíti, hogy.

szintaxis

itt van egy csaló lap néhány javasolt szabályokkal (lásd alább a részleteket):

most beszéljünk részletesen a szabályokról és azok okairól.

Curly Braces

a legtöbb JavaScript projektben a göndör zárójelek “egyiptomi” stílusban vannak írva, a nyitó zárójel ugyanazon a vonalon, mint a megfelelő kulcsszó – nem egy új vonalon. A nyitókonzol előtt is helyet kell biztosítani, mint például:

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

egysoros konstrukció, mint például a if (condition) doSomething(), fontos él tok. Használjunk egyáltalán fogszabályzót?

itt vannak a jegyzetekkel ellátott változatok, így Ön is megítélheti olvashatóságát:

egy nagyon rövid kódhoz egy sor megengedett,például if (cond) return null. De egy kódblokk (az utolsó változat) általában olvashatóbb.

sorhossz

senki sem szeret olvasni egy hosszú vízszintes kódsort. Ez a legjobb gyakorlat, hogy szét őket.

például:

// 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.`;

és a if nyilatkozatok:

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

a maximális vonalhosszról csapatszinten kell megállapodni. Ez általában 80 vagy 120 karakter.

behúzások

kétféle behúzás létezik:

• vízszintes behúzások: 2 vagy 4 szóköz.

  a vízszintes bemélyedés 2 vagy 4 szóköz vagy a vízszintes lap szimbólum (kulcslap) segítségével történik. Melyik közül választhat egy régi szent háború. A terek manapság gyakoribbak.

  a szóközök egyik előnye a lapokkal szemben, hogy a szóközök rugalmasabb behúzási konfigurációkat tesznek lehetővé, mint a lap szimbólum.

  például, tudjuk igazítani a paraméterek a nyitó zárójel, mint ez:

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

• Függőleges francia: üres sorok felosztása kódot logikai blokkok.

  még Egyetlen függvény is gyakran logikai blokkokra osztható. A példában az inicializálás változók, a fő hurok, majd visszatér az eredmény szét, függőlegesen:

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

  Beszúrás egy extra újsor, ahol ez segít abban, hogy a kód még olvasható. Nem lehet több, mint kilenc sornyi kód függőleges behúzás nélkül.

pontosvessző

minden utasítás után pontosvesszőnek kell lennie, még akkor is, ha kihagyható.

vannak olyan nyelvek, ahol a pontosvessző valóban választható, és ritkán használják. A JavaScriptben azonban vannak olyan esetek, amikor a sortörést nem pontosvesszőként értelmezik, így a kód sérülékeny a hibákra. Erről bővebben a fejezet Kódstruktúrájában olvashat.

ha tapasztalt JavaScript programozó vagy, választhat egy nem pontosvessző kódstílust, mint például a StandardJS. Ellenkező esetben a legjobb a pontosvessző használata a lehetséges buktatók elkerülése érdekében. A fejlesztők többsége pontosvesszőt tesz.

fészkelési szintek

próbálja meg elkerülni a fészkelő kódot túl sok szint mély.

például a hurokban néha jó ötlet a continue irányelv használata az extra fészkelés elkerülése érdekében.

például, ahelyett, hogy egy beágyazott if feltételes, mint ez:

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

írhatunk:

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

hasonló dolgot lehet tenni a if/elseés return.

például az alábbi két konstrukció azonos.

1. Opció:

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. Lehetőség:

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

A második olvashatóbb, mert a “speciális esete” a n < 0 kezeli az elején. Miután az ellenőrzés megtörtént, továbbléphetünk a” fő ” kódfolyamra további fészkelés nélkül.

Function Placement

Ha több “helper” függvényt és az azokat használó kódot írsz, a funkciók szervezésének három módja van.

legtöbbször a második változat előnyös.

Ez azért van, mert a kód olvasásakor először azt akarjuk tudni, hogy mit csinál. Ha a kód először megy, akkor a kezdetektől világossá válik. Akkor talán egyáltalán nem kell elolvasnunk a funkciókat, különösen, ha a nevük leíró jellegű, amit valójában csinálnak.

stílus útmutatók

a stílus útmutató általános szabályokat tartalmaz a” hogyan kell írni ” kódról, például a használni kívánt idézeteket, hány szóközt kell beilleszteni, a maximális vonalhosszt stb. Sok apróság.

amikor a csapat minden tagja ugyanazt a stílus útmutatót használja, a kód egységesnek tűnik, függetlenül attól, hogy melyik csapattag írta.

természetesen egy csapat mindig megírhatja saját stílus útmutatóját, de általában nincs rá szükség. Sok meglévő útmutatók közül lehet választani.

néhány népszerű választás:

• Google JavaScript Style Guide
• Airbnb JavaScript Style Guide
• Idiomatic.JS
• StandardJS
• (plusz még sok más)

Ha kezdő fejlesztő vagy, kezdje a csalólapot a fejezet elején. Ezután böngészhet más stílus útmutatók, hogy vegye fel több ötletet, majd eldönteni, hogy melyik tetszik a legjobban.

automatizált Linterek

a Linterek olyan eszközök, amelyek automatikusan ellenőrizhetik a kód stílusát, javító javaslatokat tehetnek.

a nagy dolog az, hogy a stílusellenőrzés is talál néhány hibát, mint például a változó vagy a funkciónevek helyesírása. Ennek a funkciónak köszönhetően a Szinter használata akkor is ajánlott, ha nem akar ragaszkodni egy adott “kódstílushoz”.

íme néhány jól ismert linting eszközök:

• JSLint-az egyik első linterek.
• JSHint-több beállítás, mint a JSLint.
• ESLint – valószínűleg a legújabb.

mindegyik képes elvégezni a munkát. A szerző az ESLint-et használja.

a legtöbb Linter számos népszerű szerkesztővel van integrálva: csak engedélyezze a bővítményt a szerkesztőben, majd konfigurálja a stílust.

például az ESLint esetében a következőket kell tennie:

1. install Node.js.
2. telepítse az ESLint-et a npm install -g eslint paranccsal (az npm egy JavaScript Csomagtelepítő).
3. hozzon létre egy .eslintrc nevű konfigurációs fájlt a JavaScript projekt gyökerében (az összes fájlt tartalmazó mappában).
4. telepítse / engedélyezze a bővítményt a szerkesztőhöz, amely integrálja az ESLint-et. A szerkesztők többsége rendelkezik ilyennel.

Íme egy példa egy .eslintrc fájlra:

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

itt a "extends" irányelv azt jelzi, hogy a konfiguráció az “eslint:recommended” beállításkészleten alapul. Ezután meghatározzuk a sajátunkat.

az is lehetséges, hogy töltse le stílus szabály készletek az internetről, majd kiterjeszteni őket helyett. A telepítéssel kapcsolatos további részletekért lásd:http://eslint.org/docs/user-guide/getting-started.

bizonyos ide-k beépített béléssel is rendelkeznek, ami kényelmes, de nem olyan testreszabható, mint az ESLint.

összefoglaló

Az ebben a fejezetben leírt összes szintaktikai szabály (valamint a hivatkozott stílus útmutatók) célja a kód olvashatóságának növelése. Mindegyik vitatható.

amikor a “jobb” kód írására gondolunk, a következő kérdéseket kell feltennünk magunknak: “mi teszi a kódot olvashatóbbá és könnyebben megérthetővé?”és” mi segíthet elkerülni a hibákat?”Ezek a legfontosabb dolgok, amelyeket szem előtt kell tartani a kódstílusok kiválasztásakor és megvitatásakor.

a népszerű stílus útmutatók olvasása lehetővé teszi, hogy naprakészen tartsa a legújabb ötleteket a kódstílus trendjeiről és a legjobb gyakorlatokról.