Przewodnik po stylach JavaScript
Zawsze używaj tych samych konwencji kodowania we wszystkich projektach JavaScript.
Konwencje kodowania JavaScript
Konwencje kodowania to wytyczne dotyczące stylu programowania . Zazwyczaj obejmują one:
- Reguły nazewnictwa i deklaracji zmiennych i funkcji.
- Zasady używania spacji, wcięć i komentarzy.
- Praktyki i zasady programowania
Konwencje kodowania zapewniają jakość :
- Poprawia czytelność kodu
- Ułatw konserwację kodu
Konwencje kodowania mogą być udokumentowanymi regułami, których mają przestrzegać zespoły, lub po prostu stanowić indywidualną praktykę kodowania.
Ta strona opisuje ogólne konwencje kodu JavaScript używane przez W3Schools.
Powinieneś również przeczytać następny rozdział „Najlepsze praktyki” i dowiedzieć się, jak uniknąć pułapek związanych z kodowaniem.
Nazwy zmiennych
W W3schools używamy camelCase do nazw identyfikatorów (zmiennych i funkcji).
Wszystkie imiona zaczynają się na literę .
Na dole tej strony znajdziesz szersze omówienie reguł nazewnictwa.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Przestrzenie wokół operatorów
Zawsze umieszczaj spacje wokół operatorów ( = + - * / ), a po przecinkach:
Przykłady:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Wcięcie kodu
Zawsze używaj 2 spacji do wcięcia bloków kodu:
Funkcje:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Nie używaj tabulatorów (tabulatorów) do wcięć. Różni redaktorzy różnie interpretują karty.
Zasady wyciągu
Ogólne zasady dla prostych oświadczeń:
- Zawsze kończ proste stwierdzenie średnikiem.
Przykłady:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Ogólne zasady dla złożonych (złożonych) oświadczeń:
- Umieść wspornik otwierający na końcu pierwszej linii.
- Użyj jednego miejsca przed wspornikiem otwierającym.
- Umieść klamrę zamykającą w nowej linii, bez spacji wiodących.
- Nie kończ złożonego stwierdzenia średnikiem.
Funkcje:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Pętle:
for (let i = 0; i < 5; i++) {
x += i;
}
Warunki:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Zasady dotyczące obiektów
Ogólne zasady definicji obiektów:
- Umieść nawias otwierający w tym samym wierszu co nazwa obiektu.
- Użyj dwukropka i jednej spacji między każdą właściwością a jej wartością.
- Używaj cudzysłowów wokół wartości ciągów, a nie wokół wartości liczbowych.
- Nie dodawaj przecinka po ostatniej parze właściwość-wartość.
- Umieść nawias zamykający w nowej linii, bez spacji wiodących.
- Zawsze kończ definicję obiektu średnikiem.
Przykład
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Krótkie obiekty można zapisać skompresowane, w jednym wierszu, używając tylko spacji między właściwościami, na przykład:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Długość linii <80
Aby zapewnić czytelność, unikaj wierszy dłuższych niż 80 znaków.
Jeśli instrukcja JavaScript nie mieści się w jednej linii, najlepszym miejscem na jej złamanie jest po operatorze lub przecinku.
Przykład
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Konwencje nazewnictwa
Zawsze używaj tej samej konwencji nazewnictwa dla całego kodu. Na przykład:
- Nazwy zmiennych i funkcji zapisane jako camelCase
- Zmienne globalne pisane WIELKIMI LITERAMI (nie robimy tego, ale jest to dość powszechne)
- Stałe (takie jak PI) pisane WIELKIMI LITERAMI
Czy powinieneś używać hyp-hens , camelCase , czy under_scores w nazwach zmiennych?
To pytanie, które często zadają sobie programiści. Odpowiedź zależy od tego, kogo zapytasz:
Łączniki w HTML i CSS:
Atrybuty HTML5 mogą zaczynać się od data- (ilość danych, cena danych).
CSS używa myślników w nazwach właściwości (rozmiar czcionki).
Łączniki można pomylić z próbami odejmowania. Łączniki nie są dozwolone w nazwach JavaScript.
Podkreślenia:
Wielu programistów woli używać podkreśleń (data_urodzenia), zwłaszcza w bazach danych SQL.
Podkreślenia są często używane w dokumentacji PHP.
PascalSprawa:
PascalCase jest często preferowany przez programistów C.
wielbłądSprawa:
camelCase jest używany przez sam JavaScript, jQuery i inne biblioteki JavaScript.
Nie zaczynaj nazw od znaku $. Spowoduje to konflikt z wieloma nazwami bibliotek JavaScript.
Ładowanie JavaScript w HTML
Użyj prostej składni do ładowania zewnętrznych skryptów (atrybut type nie jest konieczny):
<script src="myscript.js"></script>
Dostęp do elementów HTML
Konsekwencją używania „nieporządnych” stylów HTML może być wystąpienie błędów JavaScript.
Te dwie instrukcje JavaScript dadzą różne wyniki:
const obj = getElementById("Demo")
const obj = getElementById("demo")
Jeśli to możliwe, użyj tej samej konwencji nazewnictwa (jak JavaScript) w HTML.
Odwiedź Przewodnik po stylach HTML .
Rozszerzenia plików
Pliki HTML powinny mieć rozszerzenie .html ( dozwolone jest rozszerzenie .htm ).
Pliki CSS powinny mieć rozszerzenie .css .
Pliki JavaScript powinny mieć rozszerzenie .js .
Użyj małych liter w nazwach plików
Większość serwerów WWW (Apache, Unix) rozróżnia wielkość liter w nazwach plików:
Nie można uzyskać dostępu do pliku london.jpg jako London.jpg.
Inne serwery internetowe (Microsoft, IIS) nie rozróżniają wielkości liter:
london.jpg można uzyskać jako London.jpg lub london.jpg.
Jeśli używasz kombinacji wielkich i małych liter, musisz być wyjątkowo konsekwentny.
Jeśli przejdziesz z serwera bez rozróżniania wielkości liter na serwer z rozróżnianiem wielkości liter, nawet małe błędy mogą uszkodzić twoją stronę internetową.
Aby uniknąć tych problemów, zawsze używaj nazw plików pisanych małymi literami (jeśli to możliwe).
Wydajność
Konwencje kodowania nie są używane przez komputery. Większość reguł ma niewielki wpływ na wykonywanie programów.
W małych skryptach wcięcia i dodatkowe spacje nie mają znaczenia.
W przypadku kodu w fazie rozwoju preferowana powinna być czytelność. Większe skrypty produkcyjne należy zminimalizować.