13 figyelemre méltó pont a Google JavaScript stílus útmutatójából

Aki még nem ismeri a dolgot, a Google kiad egy stílus útmutatót a JavaScript írásához, amely meghatározza (mi a Google véleménye szerint) a tiszta, érthető kód írásának legjobb stíluspraktikáját.

Ezek nem bonyolult szabályok az érvényes JavaScript megírásához, csupán előírások az egységes és vonzó stílusválasztás fenntartásához a forrásfájlokban. Ez különösen érdekes a JavaScript esetében, amely egy rugalmas és elnéző nyelv, amely sokféle stílusválasztást tesz lehetővé.

A Google és az Airbnb között két legnépszerűbb stílusútmutató található. Mindenképpen ajánlom, hogy nézze meg mindkettőt, ha sok időt tölt a JS megírásával.

Az alábbiakban tizenháromat tartok, amelyek szerintem a Google legérdekesebb és legrelevánsabb szabályai a Google JS stílusútmutatójában.

Mindennel foglalkoznak az élesen vitatott kérdésekkel (tabulátorok és szóközök, valamint a pontosvesszők használatának ellentmondásos kérdése) és néhány homályosabb specifikációval kapcsolatban, amelyek meglepettek. A továbbiakban mindenképpen megváltoztatják a JS írásmódját.

Minden egyes szabályhoz összefoglalom a specifikációt, majd egy támogató idézetet követek a stílus útmutatóból, amely részletesen leírja a szabályt. Adott esetben a gyakorlatban is bemutatok egy példát a stílusra, és szembeállítom azt a kóddal, amely nem követi a szabályt.

Használjon szóközt, ne tabulátorokat

A sorterminációs sorrenden kívül az ASCII vízszintes szóköz karakter (0x20) az egyetlen szóköz karakter, amely bárhol megjelenik a forrásfájlban. Ez azt jelenti, hogy ... A tabulátor karaktereket nem használják behúzáshoz.

Az útmutató később meghatározza, hogy két (nem négy) szóközt kell használni a behúzáshoz.

// badfunction foo() {∙∙∙∙let name;}// badfunction bar() {∙let name;}// goodfunction baz() {∙∙let name;}

Pontvesszők KELL

Minden állítást pontosvesszővel kell befejezni. Tilos az automatikus pontosvessző beillesztése.

Bár el sem tudom képzelni, miért áll valaki ellen ennek az elképzelésnek, a pontosvesszők következetes használata a JS-ben az új „szóközök és fülek” vitává válik. A Google itt határozottan jelenik meg a pontosvessző védelmében.

// badlet luke = {}let leia = {}[luke, leia].forEach(jedi => jedi.father = 'vader')
// goodlet luke = {};let leia = {};[luke, leia].forEach((jedi) => { jedi.father = 'vader';});

Ne használjon ES6 modulokat (még)

Még ne használja az ES6 modulokat (azaz a exportés a importkulcsszavakat), mivel azok szemantikája még nincs befejezve. Ne feledje, hogy ezt a házirendet a szemantika teljes színvonalának elérése után felül kell vizsgálni.
// Don't do this kind of thing yet:
//------ lib.js ------export function square(x) { return x * x;}export function diag(x, y) { return sqrt(square(x) + square(y));}//------ main.js ------import { square, diag } from 'lib';

A vízszintes beállítás nem javasolt (de nem tiltott)

Ez a gyakorlat megengedett, de a Google Style általában nem ajánlja. Nem is szükséges fenntartani a vízszintes beállítást olyan helyeken, ahol már használták.

A vízszintes igazítás az a gyakorlat, hogy változó számú további szóközt ad hozzá a kódjához, hogy bizonyos tokenek közvetlenül az előző sorok bizonyos más tokenek alatt jelenjenek meg.

// bad{ tiny: 42, longer: 435, };
// good{ tiny: 42, longer: 435,};

Ne használjon többé var

Állapítsa összes helyi változókat sem constvagy let. Alapértelmezés szerint használja a const-ot, hacsak nem kell egy változót újra hozzárendelni. A varkulcsszó nem használható.

Még mindig látom, hogy vara StackOverflow-on és máshol kódmintákban használják az embereket . Nem tudom megmondani, hogy vannak-e olyan emberek, akik ügyet fognak emelni, vagy csak a régi szokások erősen meghalnak.

// badvar example = 42;
// goodlet example = 42;

A nyílfüggvényeket részesítik előnyben

A nyílfüggvények tömör szintaxist nyújtanak, és számos nehézséget megoldanak this. A nyílfüggvényeket részesítse előnyben a functionkulcsszóval szemben, különösen a beágyazott függvényeknél

Őszinte leszek, csak arra gondoltam, hogy a nyíl funkciók remekek, mert tömörebbek és szebben nézhetők. Kiderült, hogy ezek egy nagyon fontos célt is szolgálnak.

// bad[1, 2, 3].map(function (x) { const y = x + 1; return x * y;});// good[1, 2, 3].map((x) => { const y = x + 1; return x * y;});

Az összefűzés helyett használjon sablonhúrokat

Használjon sablon karaktersorozatokat (elválasztva `) a bonyolult karaktersorozatokon, különösen akkor, ha több sztring literál szerepel. A sablonhúrok több sort is átívelhetnek.
// badfunction sayHi(name) { return 'How are you, ' + name + '?';}// badfunction sayHi(name) { return ['How are you, ', name, '?'].join();}// badfunction sayHi(name) { return `How are you, ${ name }?`;}// goodfunction sayHi(name) { return `How are you, ${name}?`;}

Ne használjon vonalfolytatást hosszú húrokhoz

Ne használja a sorfolytatásokat (vagyis a karakterlánc belsejében lévő vonal befejezését visszavágással) sem a hétköznapi, sem a sablon karakterláncban. Annak ellenére, hogy az ES5 ezt megengedi, trükkös hibákhoz vezethet, ha a perjel után bármilyen szóköz jelenik meg, és ez kevésbé nyilvánvaló az olvasók számára.

Érdekes módon ez a szabály, amelyben a Google és az Airbnb nem ért egyet (itt az Airbnb specifikációja).

Míg a Google a hosszabb karakterláncok összefűzését javasolja (az alábbiak szerint), az Airbnb stílusútmutatója lényegében a semmittevést javasolja, és a hosszú karakterláncok engedélyezését addig, amíg szükséges.

// bad (sorry, this doesn't show up well on mobile)const longString = 'This is a very long string that \ far exceeds the 80 column limit. It unfortunately \ contains long stretches of spaces due to how the \ continued lines are indented.';
// goodconst longString = 'This is a very long string that ' + 'far exceeds the 80 column limit. It does not contain ' + 'long stretches of spaces since the concatenated ' + 'strings are cleaner.';

A „for… of” esetében a „for loop” előnyben részesített típusa

Az ES6 esetében a nyelvnek háromféle forhurkja van. Minden lehet használni, bár for- ofhurkokat kell előnyben részesíteni, ha lehetséges.

Ez egy furcsa, ha megkérdezed, de gondoltam, hogy felveszem, mert nagyon érdekes, hogy a Google deklarálja a forhurok előnyben részesített típusát .

Mindig az volt a benyomásom, hogy a for... inhurkok jobban megfelelnek az objektumoknak, míg for... ofa tömböknek jobban megfelelnek. A „megfelelő eszköz a megfelelő munkahelyhez” típusú helyzethez.

Bár a Google specifikációja itt nem feltétlenül ellentmond ennek az elképzelésnek, mégis érdekes tudni, hogy elsősorban ezt a hurkot preferálják.

Ne használja az eval ()

Ne használja evalvagy a Function(...string)kivitelezőt (kivéve a kódtöltőket). Ezek a szolgáltatások potenciálisan veszélyesek, és egyszerűen nem működnek CSP környezetben.

Az MDN oldalán eval()még található egy „Ne használd az eval!” Részt.

// badlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"eval( 'var result = obj.' + propName );
// goodlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"let result = obj[ propName ]; // obj[ "a" ] is the same as obj.a

Az állandókat ALL_UPPERCASE mezőben kell aláhúzással elválasztani

Az állandó nevek használata CONSTANT_CASE: minden nagybetű, aláhúzással elválasztott szavakkal.

Ha teljesen biztos abban, hogy egy változónak nem szabad megváltoznia, akkor ezt a konstans nevének nagybetűjével jelezheti. Ez nyilvánvalóvá teszi az állandó megváltoztathatatlanságát, mivel az egész kódodban felhasználódik.

Figyelemre méltó kivétel e szabály alól, ha az állandó függvényköre van. Ebben az esetben a camelCase fájlba kell írni.

// badconst number = 5;
// goodconst NUMBER = 5;

Nyilatkozatonként egy változó

Minden helyi változó deklaráció csak egy változót deklarál: let a = 1, b = 2;a nem használt deklarációkat .
// badlet a = 1, b = 2, c = 3;
// goodlet a = 1;let b = 2;let c = 3;

Használjon egyetlen idézetet, ne kettős idézetet

A közönséges karakterlánc-literálok idézőjelek ( ') helyett kettős idézőjelek ( ") kerülnek leválasztásra.
// badlet directive = "No identification of self or mission."
// badlet saying = 'Say it ain\u0027t so.';
// goodlet directive = 'No identification of self or mission.';
// goodlet saying = `Say it ain't so`;

Egy utolsó megjegyzés

Mint az elején mondtam, ezek nem megbízások. A Google csak egy a sok technológiai óriás közül, és ezek csak ajánlások.

Ennek ellenére érdekes megnézni azokat a stílusajánlatokat, amelyeket egy olyan cég ad ki, mint a Google, amely sok zseniális embert foglalkoztat, akik sok időt töltenek kiváló kód megírásával.

You can follow these rules if you want to follow the guidelines for ‘Google compliant source code’ — but, of course, plenty of people disagree, and you’re free to brush any or all of this off.

I personally think there are plenty of cases where Airbnb’s spec is more appealing than Google’s. No matter the stance you take on these particular rules, it is still important to keep stylistic consistency in mind when write any sort of code.