Najnowsze tutoriale tworzenie stron internetowych
 

JavaScript Style Guide oraz standardy kodowania


Zawsze należy stosować te same standardy kodowania dla wszystkich projektów JavaScript.


JavaScript standardy kodowania

Standardy kodowania są w formie wytycznych dotyczących programowania. Obejmują one zwykle:

  • Nazewnictwa i deklaracja zasady zmiennych i funkcji.
  • Zasady korzystania z białej przestrzeni, wcięcia i komentarze.
  • Programowanie praktyk i zasad

Kodowanie konwencje bezpieczne jakości:

  • Poprawia czytelność kodu
  • Aby ułatwić utrzymanie kodu

standardy kodowania może być udokumentowane zasady drużyny do naśladowania, lub po prostu być twoim indywidualnej praktyki kodowania.

Ta strona opisuje ogólne konwencje kodu JavaScript używanych przez w3ii.
Należy również przeczytać w następnym rozdziale "najlepszych praktyk" i dowiedz się, jak uniknąć pułapek kodowania.


nazwy zmiennych

Na w3ii używamy camelCase nazw identyfikator (zmienne i funkcje).

Wszystkie nazwy zaczynają się od litery.

Na dole tej stronie znajdziesz szerszą dyskusję na temat zasad nazewnictwa.

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Przestrzenie wokół Operatorów

Zawsze umieścić przestrzenie wokół operatorów ( = + - * / ) , a po przecinkami:

Przykłady:

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

Kod Wcięcia

Zawsze używaj 4 miejsca dla wcięć bloków kodu:

Funkcje:

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

Nie należy używać kart (tabulatory) do wcięcia. Różne redaktorzy interpretacji kart inaczej.


Oświadczenie Zasady

Ogólne zasady prostych stwierdzeń:

  • Zawsze kończy proste stwierdzenie ze średnikiem.

Przykłady:

var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Ogólne zasady Complex (związek) sprawozdania:

  • Umieścić wspornik otwarcia pod koniec pierwszej linii.
  • Użyj jednego miejsca przed nawiasem otwierającym.
  • Umieścić wspornik zamykający w nowej linii, bez czołowych miejscach.
  • Nie przerywaj złożonego oświadczenia ze średnikiem.

Funkcje:

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

pętle:

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

warunkowe:

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

Zasady obiektu

Ogólne zasady definicji obiektów:

  • Umieścić wspornik otwarcie w tym samym wierszu co nazwa obiektu.
  • Użyj dwukropka plus jedna przestrzeń pomiędzy każdej nieruchomości i jej wartości.
  • Użyj cudzysłowów wokół ciągów znaków, a nie wokół wartości numerycznych.
  • Nie dodawaj przecinka po ostatniej pary właściwość-wartość.
  • Umieścić wspornik zamykający w nowej linii, bez czołowych miejscach.
  • Zawsze kończy definicję obiektu ze średnikiem.

Przykład

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Krótkie obiekty można zapisać skompresowany, w jednej linii, używając spacji tylko między właściwości, na przykład:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Długość linii <80

Dla czytelności, unikać linii dłuższych niż 80 znaków.

Jeżeli oświadczenie JavaScript nie zmieszczą się na jednej linii, to najlepsze miejsce, żeby go złamać, to po operatora lub przecinkami.

Przykład

document.getElementById("demo").innerHTML =
    "Hello Dolly.";
Spróbuj sam "

Konwencje nazewnictwa

Zawsze należy stosować tę samą konwencję nazewnictwa dla całego kodu. Na przykład:

  • Nazwy zmiennych i funkcji napisane jak camelCase
  • Zmienne globalne pisemne WIELKA (nie, ale to jest dość powszechne)
  • Stałe (jak PI) pisemne WIELKA

Należy użyć Hyp-niosek, camelCase lub under_scores w nazwach zmiennych?

To jest pytanie, programiści często dyskutować. Odpowiedź zależy od tego, kogo zapytasz:

Łączniki w HTML i CSS:

HTML5 atrybuty mogą zacząć DATA- (dane-ilość, data-cenowej).

CSS wykorzystuje łączniki w nieruchomości nazw (font-size).

Łączniki mogą być mylone jako próby odejmowanie. Łączniki są niedozwolone w nazwach JavaScript.

podkreśla:

Wielu programistów woli używać podkreślenia (date_of_birth), zwłaszcza w bazach danych SQL.

Podkreślenia są często stosowane w dokumentacji PHP.

PascalCase:

PascalCase jest często preferowany przez programistów C.

camelCase:

camelCase jest wykorzystana przez JavaScript, przez jQuery i innych bibliotek JavaScript.

Nie zaczynaj nazwy ze znakiem $. Będzie można umieścić w konflikcie z wieloma nazwami biblioteką JavaScript.


Ładowanie JavaScript w HTML

Użyj prostą składnię do ładowania skryptów zewnętrznych (atrybut type nie jest to konieczne):

<script src="myscript.js">

Dostęp do elementów HTML

Konsekwencją stosowania "niechlujny" style HTML, może spowodować błędy JavaScript.

Te dwa stwierdzenia JavaScript dadzą różne wyniki:

var obj = getElementById("Demo")

var obj = getElementById("demo")

Jeśli to możliwe, używać tej samej konwencji nazewnictwa (jako JavaScript) w HTML.

Odwiedź HTML Style Guide .


Rozszerzenia plików

Pliki HTML powinny mieć rozszerzenie .html (nie .htm).

Pliki CSS powinny mieć rozszerzenie .css.

Pliki JavaScript powinien mieć rozszerzeniem js.


Użyj małych liter nazwy plików

Większość serwerów WWW (Apache, Unix) jest wielkość liter o nazwach:

london.jpg nie mogą być dostępne jako London.jpg .

Inne serwery WWW (Microsoft IIS) nie uwzględniają wielkości liter:

london.jpg mogą być dostępne jako London.jpg lub london.jpg .

Jeśli używasz kombinacji dużych i małych liter, trzeba być niezwykle spójna.

Jeśli przeniesiesz się ze sprawy, niewrażliwego na serwer wrażliwej przypadku, nawet drobne błędy mogą przełamać swoją witrynę internetową.

Aby uniknąć tych problemów, należy zawsze używać niższych nazwy plików przypadku (jeśli to możliwe).


Wydajność

standardy kodowania nie są używane przez komputery. Większość reguły mają niewielki wpływ na realizację programów.

Wcięcia i dodatkowe pomieszczenia nie są istotne w małych skryptów.

Dla kodu w rozwoju, powinny być preferowane czytelność. Większe skrypty produkcyjne powinny zostać zmniejszony.