Przegląd stylu JavaScript

Zawsze używaj tych samych zasad kodowania dla wszystkich swoich projektów JavaScript.

Zasady kodowania JavaScript

Zasady kodowania (Coding conventions) oznaczają:Wytyczne dotyczące stylu programowania. Te zasady obejmują między innymi:

  • Zasady nazewnictwa i deklaracji zmiennych i funkcji
  • Zasady użycia przestrzeni, wcięć i komentarzy
  • Nawyki programistyczne i wytyczne

Zasady kodowaniaZapewnienie jakości:

  • Poprawa czytelności kodu
  • Poprawa łatwości utrzymania kodu

Zasady kodowania mogą być pisemnymi zasadami przestrzegwanymi przez zespół, lub osobistymi nawykami kodowania.

Ta strona przedstawia ogólne zasady kodowania JavaScript używane przez CodeW3C.com.

Powinieneś kontynuować czytanie następnego rozdziału „Najlepsze praktyki”, aby nauczyć się, jak unikać pułapek kodowania.

nazwy zmiennych

Na CodeW3C.com używamy nazw identyfikatorów (zmienne i funkcje) wmałej litery z dużej.

Wszystkie nazwy zaczynają się odLiteraPoczątek.

Na dole tej strony omówimy szerzej zasady nazewnictwa.

imię = "Bill";
nazwisko = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

Spacje wokół operatorów

Zawsze dodawaj spacje wokół operatorów ( = + - * /) oraz po przecinkach:

Przykład

var x = y + z;
var wartości = ["Volvo", "Saab", "Fiat"];

Wcięcia kodu

Zawsze używaj 4 spacji do wcięć bloków kodu:

Funkcja

function doCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Nie używaj tabulatorów do wcięć. Różne edytory mają różne interpretacje tabulatora;

Zasady zdań

Ogólne zasady prostych zdań:

Zawsze zakończ pojedyncze zdanie średnikiem:

Przykład

var wartości = ["Volvo", "Saab", "Fiat"];
var osoba = {
    imię: "Bill",
     nazwisko: "Gates",
    wiek: 50,
    kolorOka: "niebieski"
};

Ogólne zasady złożonych zdań:

  • Pisz otwierający nawias na końcu pierwszej linii;
  • Użyj jednego spacja przed otwierającym nawiasem;
  • Zawsze pisz zamknięcie nawiasów w nowej linii, bez wstępnego spacja;
  • Nie zakończ złożonych zdań średnikiem;

Funkcja:

function doCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Petla:

for (i = 0; i < 5; i++) {
    x += i;
}

Warunek:

if (time < 20) {
    powitanie = "Good day";
} else {
     powitanie = "Good evening";
}

Zasady obiektu

Ogólne zasady definicji obiektu:

  • Umieść otwierający nawias i nazwę obiektu na tej samej linii;
  • Używaj kropki i spacja między atrybutem a jego wartością;
  • Nie pisz przecinka po ostatnim parze wartości atrybutu;
  • Zawsze pisz zamknięcie nawiasów w nowej linii, bez wstępnego spacja;
  • Zawsze zakończ definicję obiektu średnikiem;

Przykład

var osoba = {
    imię: "Bill",
    nazwisko: "Gates",
    wiek: 19,
    kolorOka: "niebieski"
};

Można skompresować krótkie obiekty w jednej linii, używając tylko spacji między atrybutami, tak jak tutaj:

var osoba = {imię: "Bill", nazwisko: "Gates", wiek: 50, kolorOka: "niebieski"};

Długość wiersza mniejsza niż 80

Aby zwiększyć czytelność, unikaj każdej linii dłuższej niż 80 znaków.

Jeśli zdanie JavaScript jest dłuższe niż jedno wiersz, najlepsze miejsce do wstawienia znaku nowej linii to operator lub przecinek.

Przykład

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

Spróbuj sam

Nazewnictwo

Zawsze używaj tych samych nazewnictw we wszystkich swoich kodach. Na przykład:

  • Nazwy zmiennych i funkcji używająWielkie litery w środku słówdo pisania
  • Globalne zmienne używająWielkich liter(nie robimy tego, ale jest to dość powszechne)
  • Literals (np. PI) używająWielkich liter

Czy powinniśmy używać w nazwach zmiennych?Kreski,Wielkie litery w środku słówlubPodkreśleniaczy?

To jest często dyskutowany problem. Odpowiedź zależy od tego, kto na nią odpowiada:

Kreski w HTML i CSS:

Atrybuty HTML5 mogą zaczynać się od data- (data-quantity, data-price).

CSS używa kreski w nazwach właściwości (font-size).

Kreski mogą być mylone z operatorami minus. Nazewnictwo JavaScript nie pozwala na użycie kreski.

Podkreślenia:

Wiele programistów lubi używać podkreśleń (date_of_birth), zwłaszcza w bazach danych SQL.

Podkreślenia są często używane w dokumentacji PHP.

Nazewnictwo PascalCase:

Programiści języka C często używają nazewnictwa PascalCase.

Wielkie litery w środku słów (camelCase):

JavaScript, jQuery oraz inne biblioteki JavaScript używają wielkich liter w środku słów (camelCase).

Nie zaczynaj nazw JavaScript od znaku $. Może to prowadzić do konfliktów w nazwach bibliotek JavaScript.

Ładuj JavaScript w HTML

Ładuj zewnętrzne skrypty za pomocą prostej gramatyki (parametr type jest nieobowiązkowy):

<script src="myscript.js"></script>

Dostęp do elementów HTML

Konsekwencje użycia "niezorganizowanego" stylu HTML mogą prowadzić do błędów JavaScript.

Te dwa zdania JavaScript mają różne wyniki:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Jeśli to możliwe, używaj tych samych nazw w HTML (tak jak w JavaScript).

Dostęp do przewodnika stylów HTML.

Rozszerzenia plików

Pliki HTML powinny używać .html Rozszerzenia (zamiast .htm).

Pliki CSS powinny używać .css Rozszerzenia.

Pliki JavaScript powinny używać .js Rozszerzenia.

Używaj małych nazw plików

Większość serwerów webowych (Apache, Unix) jest czuła na wielkość znaków w nazwach plików:

london.jpg nie można uzyskać dostęp poprzez London.jpg.

Inne serwery webowe (Microsoft IIS) są nieczułe na wielkość znaków:

london.jpg można uzyskać dostęp poprzez London.jpg lub london.jpg.

Jeśli mieszasz wielkość znaków, musisz ściśle utrzymywać ciągłość i spójność.

Jeśli przeniesiesz stronę z serwera nieczułego na wielkość znaków do serwera czulego na wielkość znaków, nawet te małe błędy mogą zniszczyć Twoją stronę.

Aby uniknąć tych problemów, zawsze używaj małych nazw plików (jeśli to możliwe).

Wydajność

Komputery nie używają konwencji kodowania. Większość zasad ma mały wpływ na działanie programu.

Wcięcia i dodatkowe spacje są nieistotne dla krótkich skryptów.

Dla skryptów w fazie rozwoju, należy priorytetować czytelność. W większych produkcjach skryptów należy je upraszczać.