styl kodowania
Nasz kod musi być tak czysty i łatwy do odczytania, jak to tylko możliwe.
To jest właściwie Sztuka programowania – wykonywanie skomplikowanych zadań i kodowanie ich w sposób zarówno poprawny, jak i czytelny dla człowieka. Dobry styl kodu bardzo w tym pomaga.
składnia
Oto Ściągawka z sugerowanymi regułami (patrz poniżej, aby uzyskać więcej informacji):
teraz omówmy szczegółowo zasady i powody ich stosowania.
nic tu nie jest ustawione w kamieniu. Są to preferencje stylu, a nie dogmaty religijne.
klamry
w większości projektów JavaScript klamry są pisane w stylu „egipskim” z nawiasem otwierającym w tej samej linii co odpowiednie słowo kluczowe – Nie w nowej linii. Przed nawiasem otwierającym powinna być również spacja, taka jak ta:
if (condition) { // do this // ...and that // ...and that}konstrukcja jednoliniowa, taka jak if (condition) doSomething(), jest ważnym przypadkiem krawędzi. Czy powinniśmy w ogóle używać aparatu ortodontycznego?
oto warianty z adnotacjami, więc możesz sam ocenić ich czytelność:
dla bardzo krótkiego kodu dozwolona jest jedna linia, np.if (cond) return null. Ale blok kodu (ostatni wariant) jest zwykle bardziej czytelny.
Długość linii
nikt nie lubi czytać długiej poziomej linii kodu. Najlepszą praktyką jest ich rozdzielanie.
na przykład:
// 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.`;i, dla if Oświadczenia:
if ( id === 123 && moonPhase === 'Waning Gibbous' && zodiacSign === 'Libra') { letTheSorceryBegin();}maksymalna długość linii powinna być uzgodniona na poziomie zespołu. Zwykle jest to 80 lub 120 znaków.
wcięcia
istnieją dwa rodzaje wcięć:
-
wcięcia poziome: 2 lub 4 spacje.
poziome wcięcie jest wykonywane za pomocą 2 lub 4 spacji lub symbolu poziomej zakładki (klawisz Tab). Który wybrać to stara święta wojna. Przestrzenie są dziś bardziej powszechne.
zaletą spacji nad tabulatorami jest to, że spacje pozwalają na bardziej elastyczną konfigurację wcięć niż symbol tabulatora.
na przykład, możemy wyrównać parametry z nawiasem otwierającym, jak to:
show(parameters, aligned, // 5 spaces padding at the left one, after, another ) { // ...} -
wcięcia pionowe: puste linie do dzielenia kodu na bloki logiczne.
nawet pojedyncza funkcja często może być podzielona na bloki logiczne. W poniższym przykładzie inicjalizacja zmiennych, pętla główna i zwracanie wyniku Są podzielone pionowo:
function pow(x, n) { let result = 1; // <-- for (let i = 0; i < n; i++) { result *= x; } // <-- return result;}Wstaw dodatkowy znak nowej linii, który pomoże uczynić kod bardziej czytelnym. Nie powinno być więcej niż dziewięć linii kodu bez wcięć pionowych.
średniki
średnik powinien być obecny po każdej instrukcji, nawet jeśli mógłby zostać pominięty.
istnieją języki, w których średnik jest naprawdę opcjonalny i jest rzadko używany. W języku JavaScript zdarzają się jednak przypadki, w których podział linii nie jest interpretowany jako średnik, przez co kod jest podatny na błędy. Zobacz więcej na ten temat w rozdziale struktura kodu.
Jeśli jesteś doświadczonym programistą JavaScript, możesz wybrać styl kodu bez średnika, taki jak StandardJS. W przeciwnym razie najlepiej używać średników, aby uniknąć możliwych pułapek. Większość programistów umieścić średniki.
poziomy zagnieżdżania
staraj się unikać zagnieżdżania kodu zbyt wielu poziomów.
na przykład w pętli czasami dobrym pomysłem jest użycie dyrektywy continue, aby uniknąć dodatkowego zagnieżdżania.
na przykład, zamiast dodać zagnieżdżonyif warunkowy w ten sposób:
for (let i = 0; i < 10; i++) { if (cond) { ... // <- one more nesting level }}możemy napisać:
for (let i = 0; i < 10; i++) { if (!cond) continue; ... // <- no extra nesting level}podobną rzecz można zrobić zif/else Ireturn.
na przykład dwa konstrukcje poniżej są identyczne.
Opcja 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; }}Opcja 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;}drugi jest bardziej czytelny, ponieważ „specjalny przypadek” n < 0 jest wcześniej obsługiwany. Po zakończeniu sprawdzania możemy przejść do „głównego” przepływu kodu bez potrzeby dodatkowego zagnieżdżania.
rozmieszczenie funkcji
Jeśli piszesz kilka funkcji „pomocniczych” i kod, który ich używa, istnieją trzy sposoby organizacji funkcji.
w większości przypadków preferowany jest drugi wariant.
To dlatego, że czytając kod, najpierw chcemy wiedzieć, co on robi. Jeśli kod idzie pierwszy, to staje się jasne od początku. Wtedy może nie będziemy musieli w ogóle czytać funkcji, zwłaszcza jeśli ich nazwy są opisem tego, co faktycznie robią.
przewodniki po stylach
przewodnik po stylach zawiera ogólne zasady dotyczące „pisania” kodu, np. jakich cudzysłowów użyć, ile spacji wciąć, maksymalną długość linii itp. Wiele drobnych rzeczy.
gdy wszyscy członkowie zespołu używają tego samego przewodnika po stylu, kod wygląda jednolicie, niezależnie od tego, który z członków zespołu go napisał.
oczywiście zespół zawsze może napisać własny poradnik stylu, ale zazwyczaj nie ma takiej potrzeby. Istnieje wiele istniejących przewodników do wyboru.
niektóre popularne wybory:
- Google JavaScript Style Guide
- Airbnb JavaScript Style Guide
- Idiomatic.Js
- StandardJS
- (plus wiele innych)
Jeśli jesteś początkującym programistą, zacznij od ściągawki na początku tego rozdziału. Następnie możesz przeglądać inne przewodniki stylu, aby wybrać więcej pomysłów i zdecydować, który z nich najbardziej Ci się podoba.
automatyczne Lintery
Lintery są narzędziami, które mogą automatycznie sprawdzać styl Twojego kodu i wprowadzać ulepszenia.
najlepsze w nich jest to, że sprawdzanie stylu może również znaleźć błędy, takie jak literówki w nazwach zmiennych lub funkcji. Ze względu na tę funkcję, używanie lintera jest zalecane, nawet jeśli nie chcesz trzymać się jednego konkretnego „stylu kodu”.
oto kilka znanych narzędzi do lintowania:
- JSLint-jeden z pierwszych linterów.
- JSHint-więcej ustawień niż JSLint.
- ESLint-chyba najnowszy.
każdy z nich może wykonać zadanie. Autor wykorzystuje ESLint.
Większość linterów jest zintegrowana z wieloma popularnymi edytorami: wystarczy włączyć wtyczkę w edytorze i skonfigurować styl.
na przykład dla ESLint powinieneś wykonać następujące czynności:
- Install Node.js.
- zainstaluj ESLint za pomocą polecenia
npm install -g eslint(npm to instalator pakietów JavaScript). - Utwórz plik konfiguracyjny o nazwie
.eslintrcw katalogu głównym projektu JavaScript (w folderze zawierającym wszystkie Twoje pliki). - zainstaluj / włącz wtyczkę do edytora, która integruje się z ESLint. Większość redaktorów ma taki.
oto przykład pliku :
{ "extends": "eslint:recommended", "env": { "browser": true, "node": true, "es6": true }, "rules": { "no-console": 0, "indent": 2 }}dyrektywa"extends" oznacza, że konfiguracja opiera się na zestawie ustawień „eslint:recommended”. Następnie określamy własne.
możliwe jest również pobieranie zestawów reguł stylów z Internetu i ich rozszerzanie. Więcej informacji na temat instalacji można znaleźć w http://eslint.org/docs/user-guide/getting-started.
również niektóre IDE mają wbudowane linting, który jest wygodny, ale nie tak konfigurowalny jak ESLint.
podsumowanie
wszystkie zasady składni opisane w tym rozdziale (i w przewodnikach po stylach) mają na celu zwiększenie czytelności Twojego kodu. Wszystkie z nich są dyskusyjne.
Kiedy myślimy o napisaniu „lepszego” kodu, powinniśmy zadać sobie pytanie: „co sprawia, że kod jest bardziej czytelny i łatwiejszy do zrozumienia?”i” co może nam pomóc uniknąć błędów?”To są główne rzeczy, o których należy pamiętać przy wyborze i debacie nad stylami kodu.
Czytanie popularnych przewodników po stylach pozwoli Ci być na bieżąco z najnowszymi pomysłami na temat trendów w stylu kodowym i najlepszych praktyk.