Popraw czytelność i łatwość konserwacji kodu JavaScript, przestrzegając tych konwencji nazewnictwa.

Zachowanie prostoty, czytelności i łatwości konserwacji w kodzie jest niezbędne do zarządzania złożonymi projektami JavaScript. Konsekwentne przestrzeganie konwencji nazewnictwa jest kluczem do osiągnięcia tego celu.

Zmienne, wartości logiczne, funkcje, stałe, klasy, komponenty, metody, funkcje prywatne, zmienne globalne i pliki należą do elementów JavaScript, które wymagają spójnych konwencji nazewnictwa. Możesz poprawić organizację i zrozumienie kodu, wdrażając ustandaryzowane konwencje nazewnictwa we wszystkich tych komponentach, oszczędzając czas i wysiłek w dłuższej perspektywie.

1. Nazewnictwo zmiennych

W JavaScript dane są przechowywane w zmiennych. Istotne jest, aby wybrać opisowe nazwy zmiennych, które dokładnie odzwierciedlają ich funkcję. Mógłbyś na przykład zamienić nazwa użytkownika Lub cena całkowita zamiast nazwy zmiennej X.

Dobry sposób nazywania zmiennych jest następujący:

pozwalać cena całkowita = 100;
pozwalać nazwa użytkownika = "Jan";
instagram viewer

Poprawioną czytelność kodu można osiągnąć, stosując opisowe nazwy zmiennych

2. Nazewnictwo logiczne

Zmienne, które mogą mieć tylko dwie wartości, tj PRAWDA Lub FAŁSZ, są znane jako logiczne. Kluczowe jest wybranie odpowiednich nazw dla zmiennych boolowskich, które wyrażają ich przeznaczenie.

Aby zilustrować, zamiast wybierać nazwę zmiennej, taką jak jest prawdziwy, powinieneś raczej iść z jest ważna Lub ma wartość.

Rozważ tę instancję:

pozwalać jest ważny = PRAWDA;
pozwalać maWartość = FAŁSZ;

W tym przykładzie opisowe nazwy zmiennych boolowskich wyjaśniają, co reprezentują.

3. Funkcje nazewnictwa

Funkcja w języku JavaScript odnosi się do samodzielnej jednostki kodu przeznaczonej do wykonania określonego zadania. Jest to blok kodu, który może być wywoływany lub wywoływany przez inne części kodu i działa jako niezależna jednostka.

Aby skutecznie nazywać funkcje, używaj nazw opisowych, które oddają ich cel. Na przykład zamiast tworzenie funkcjibla, wybierz bardziej ilustracyjne nazwy, takie jak sprawdź poprawność danych wejściowych użytkownika Lub oblicz cenę całkowitą.

Na przykład:

funkcjonowaćoblicz cenę całkowitą(cena, ilość) {
powrót cena * ilość;
}
funkcjonowaćsprawdź poprawność danych wejściowych użytkownika(wejście) {
powrót wprowadź !== nieokreślony && wprowadź !== zero;
}

4. Stałe nazewnictwa

Stałe to zmienne, których nie można ponownie przypisać. Podczas nazywania stałych ważne jest, aby do oddzielania słów używać samych wielkich liter i podkreśleń.

Na przykład:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;

W tym przykładzie wszystkie wielkie litery i podkreślenia zostały użyte do oddzielenia słów w nazwach stałych.

5. Klasy nazewnictwa

W JavaScript obiekty można tworzyć za pomocą schematów zwanych klasami. Aby osiągnąć nieskazitelne praktyki nazewnictwa, niezwykle ważne jest wykonanie PascalCase, konwencji nazewnictwa, która nakazuje pisanie wielkich liter w każdym słowie.

Weź na przykład:

klasaWózek sklepowy{
konstruktor(marka, model) {
Ten.make = make;
Ten.model = model;
 }
}

W tym przykładzie klasa Wózek sklepowy została nazwana przy użyciu PascalCase, co oznacza, że ​​pierwsza litera każdego słowa w nazwie klasy została pisana wielką literą i nie ma spacji ani podkreśleń między słowami.

6. Nazewnictwo komponentów

Komponenty są podstawowymi elementami konstrukcyjnymi w nowoczesnym tworzeniu oprogramowania, szczególnie w frameworki takie jak React, które podkreślają kod wielokrotnego użytku.

Dzieląc złożony interfejs użytkownika lub aplikację na mniejsze, łatwe do zarządzania elementy, możesz tworzyć komponenty, które można ponownie wykorzystać w różnych projektach, skracając czas programowania i zwiększając ilość kodu efektywność.

Ponownie zdecydowanie zalecamy stosowanie konwencji nazewnictwa PascalCase do nazewnictwa komponentów. Oznacza to, że pierwsza litera każdego słowa w nazwie komponentu jest pisana wielką literą.

Taka konwencja pomaga w odróżnianiu komponentów od innych segmentów kodu, upraszczając identyfikację i manipulację.

funkcjonowaćPrzycisk(rekwizyty) {
powrót<przycisk>{rekwizyty.etykieta}przycisk>;
}

W tym przykładzie do nazwania komponentu użyto konwencji nazewnictwa PascalCase Przycisk.

7. Metody nazewnictwa

Podczas nazywania metod bardzo ważne jest, aby używać nazw opisowych, które skutecznie informują o tym, co metoda osiąga, ponieważ metody są funkcjami odnoszącymi się do obiektu.

Na przykład:

klasaSamochód{
konstruktor(marka, model) {
Ten.make = make;
Ten.model = model;
 }
 Start silnika() {
// kod uruchamiający silnik 
 } 
 stopEngine() { 
// kod do zatrzymania silnika 
 }
 }
}

Nazwy opisowe (Start silnika, stopSilnik) są używane w metodach w tym przykładzie, zapewniając łatwe zrozumienie ich zamierzonego celu.

8. Nazywanie funkcji prywatnych

Dostęp do funkcji zdefiniowanych jako prywatne jest ograniczony tylko w obrębie obiektu, w którym zostały zdefiniowane. Bardzo ważne jest dodanie wiodącego znaku podkreślenia (_), aby wskazać, że funkcje są prywatne.

Oto przykład:

klasaSamochód{
konstruktor(marka, model) {
Ten.make = make;
Ten.model = model;
 }
 _Start silnika() {
// kod uruchamiający silnik
 }
 _stopEngine() {
// kod do zatrzymania silnika
 }
}

Użycie wiodącego znaku podkreślenia w tym przykładzie wskazuje, że funkcje są prywatne.

9. Nazywanie zmiennych globalnych

Dostęp do zmiennych sklasyfikowanych jako globalne można uzyskać z dowolnej części bazy kodu. Nazywając takie zmienne globalne, kluczowe jest stosowanie jasnych i opisowych nazw, które skutecznie oddają zamierzony cel.

Na przykład:

konst MAX_PRICE = 1000;
konst MIN_PRICE = 0;
funkcjonowaćSprawdź cenę(cena) {
Jeśli (cena > MAX_PRICE) {
// kod do obsługi wysokich cen
 } w przeciwnym razieJeśli (cena < MIN_PRICE) {
// kod do obsługi niskich cen
 }
}

10. Nazewnictwo plików

Wydajna organizacja plików jest kluczowym aspektem pomyślnego zarządzania projektami JavaScript. Aby zapewnić usprawnione i spójne konwencje nazewnictwa, konieczne jest oddzielenie słów w nazwach plików za pomocą małych liter i łączników.

Preferowane są małe litery, ponieważ JavaScript rozróżnia wielkość liter, co oznacza, że ​​język traktuje małe i wielkie litery inaczej. Używanie małych liter w nazwach plików zapewnia spójność i pozwala uniknąć nieporozumień podczas odwoływania się do plików w kodzie.

Łączniki służą do oddzielania słów w nazwach plików, ponieważ spacje nie są dozwolone w nazwach plików. Można również zastosować inne alternatywy, takie jak podkreślenia lub camelCase, ale łączniki są ogólnie preferowane ze względu na ich czytelność.

Używanie łączników sprawia również, że nazwy plików są bardziej dostępne dla użytkowników korzystających z czytników ekranu lub innych technologii wspomagających.

moja-aplikacja/
├── źródło/
 ├── komponenty/
 ├── button.js
 ├── input-field.js
├── narzędzia/
 ├── string-utils.js
 ├── date-utils.js
├── app.js
├── index.js

W tym przykładzie małe litery i łączniki są używane do oddzielania słów w nazwach plików.

Znaczenie następujących konwencji nazewnictwa w JavaScript

Przestrzeganie dobrych konwencji nazewnictwa jest niezbędnym aspektem pisania czystego i łatwego w utrzymaniu kodu w JavaScript. Przestrzegając tych konwencji, możesz uczynić swój kod bardziej czytelnym i łatwiejszym w utrzymaniu, zwłaszcza w niektórych przypadkach Frameworki JavaScript, w których musisz obsługiwać nieporęczny kod, co może zaoszczędzić czas i wysiłek w długi bieg.