Najlepsze praktyki w JavaScript

Unikaj zmiennych globalnych,new,===,eval()

Unikaj zmiennych globalnych

Staraj się unikać używania zmiennych globalnych.

Obejmuje wszystkie typy danych, obiekty i funkcje.

Zmienne globalne i funkcje mogą być nadpisywane przez inne skrypty.

Używaj zmiennych lokalnych zamiast globalnych i nauka, jak ich używaćKapsuły.

Zawsze deklaruj zmienne lokalne

Wszystkie zmienne używane w funkcji powinny być zadeklarowane jakolokalnezmienne

zmienne lokalnemusiprzez var Zdeklaruj za pomocą kluczowych słów, w przeciwnym razie staną się zmiennymi globalnymi.

Stricter mode nie pozwala na niewyrażone zmienne.

Deklaracja na górze

Dobry nawyk programowania to umieszczanie wszystkich deklaracji na górze każdego segmentu skryptu lub funkcji.

Korzyścią tego jest:

  • Daje bardziej uporządkowany kod
  • Dostarcza dobrych miejsc do wyszukiwania zmiennych lokalnych
  • Łatwiejsze unikanie niepotrzebnych zmiennych globalnych
  • Redukcja ryzyka niepotrzebnych ponownych deklaracji
// Deklaracja na górze
var firstName, lastName, price, discount, fullPrice;
// Użyj później
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

Można również użyć jako zmiennej pętli:

// Deklaracja na górze
var i;
// Użyj później
for (i = 0; i < 5; i++)  {

Domyślnie, JavaScript przenosi wszystkie deklaracje na górę (JavaScript hoisting).

Inicjalizacja zmiennych

Inicjalizacja zmiennych w momencie ich deklaracji to dobry zwyczaj.

Korzyścią tego jest:

  • Czystszy kod
  • Inicjalizuj zmienne w oddzielnym miejscu
  • Unikaj wartości niezdefiniowanych
// Deklaracja i inicjalizacja na początku
var firstName = "",
    lastName  = "",
    price = 0,</br>
    discount = 0,</br>
    fullPrice  = 0,</br>
    myArray = [],
    myObject = {};

Inicjalizacja zmiennych pozwala nam zrozumieć przewidywaną użyteczność i typ danych.

Proszę nie deklarować obiektów liczbowych, ciągów znaków lub wartości logicznych

Proszę zawsze traktować liczby, ciągi znaków lub wartości logiczne jako wartości pierwotne, a nie obiekty.

Jeśli deklarujesz te typy jako obiekty, może to spowolnić wykonywanie i wywołać nieprzyjemne efekty uboczne:

Przykład

var x = "Bill";             
var y = new String("Bill");
(x === y) // wynik to false, ponieważ x jest ciągiem znaków, a y jest obiektem.

Spróbuj sam

Albo nawet gorzej:

Przykład

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // wynik to false, ponieważ nie można porównać obiektów.

Spróbuj sam

Proszę nie używać new Object()

  • Proszę używać {} zamiast new Object()
  • Proszę używać "" zamiast new String()
  • Proszę używać 0 zamiast new Number()
  • Proszę używać false zamiast new Boolean()
  • Proszę używać [] zamiast new Array()
  • Proszę używać /()/ zamiast new RegExp()
  • Proszę używać function (){} zamiast new Function()

Przykład

var x1 = {};           // Nowy obiekt
var x2 = "";           // Nowa wartość ciągła
var x3 = 0;            // Nowa wartość liczbowa
var x4 = false;        // Nowa wartość logiczna
var x5 = [];           // Nowy obiekt tablicy
var x6 = /()/;         // Nowy wyrażenie regularne
var x7 = function(){}; // Nowy obiekt funkcji

Spróbuj sam

Proszę zrozumieć automatyczną konwersję typów

Proszę zrozumieć, że liczby mogą nieoczekiwanie być konwertowane na ciąg znaków lub NaN(Nie liczba).

JavaScript jest typem luźnym. Zmienne mogą zawierać różne typy danych, a zmienne mogą zmieniać swój typ danych:

Przykład

var x = "Hello";     // typeof x jest ciąg znaków
x = 5;               // zmień typeof x na liczbowy

Spróbuj sam

jeśli wykonuje się operacja matematyczna, JavaScript może przekształcić liczbę na ciąg znaków:

Przykład

var x = 5 + 7;       // x.valueOf() jest 12, typeof x jest liczbowy
var x = 5 + "7";     // x.valueOf() jest 57, typeof x jest ciąg znaków
var x = "5" + 7;     // x.valueOf() jest 57, typeof x jest ciąg znaków
var x = 5 - 7;       // x.valueOf() jest -2, typeof x jest liczbowy
var x = 5 - "7";     // x.valueOf() jest -2, typeof x jest liczbowy
var x = "5" - 7;     // x.valueOf() jest -2, typeof x jest liczbowy
var x = 5 - "x";     // x.valueOf() jest NaN, typeof x jest liczbowy

Spróbuj sam

odjęcie jednego ciągu od innego ciągu nie powoduje błędu, ale zwraca NaN（Nie liczba）：

Przykład

"Hello" - "Dolly"    // zwraca NaN

Spróbuj sam

Używanie === do porównania

== porównywacze zawsze przekształcają typy przed porównaniem (aby dopasować typy).

=== operator porównania zmusza do porównania wartości i typów:

Przykład

0 == "";        // prawda
1 == "1";       // prawda
1 == true;      // prawda
0 === "";       // fałsz
1 === "1";      // fałsz
1 === true;     // fałsz

Spróbuj sam

Używanie domyślnych wartości parametrów

jeśli brakuje jednego parametru podczas wywoływania funkcji, wartość tego brakującego parametru zostanie ustawiona na undefined.

undefined wartość może zniszczyć Twoje kod. Ustawianie domyślnych wartości dla parametrów jest dobrym nawykiem.

Przykład

funkcja myFunction(x, y) {
    jeśli (y === undefined) {
        y = 0;
    }
}

Spróbuj sam

Proszę, sprawdźParametry funkcjiW tym rozdziale przeczytaj więcej o parametrach funkcji.

użyj domyślnie, aby zakończyć switch

użyj domyślnie zakończyć swoją switch złożenia. Nawet jeśli uważasz, że nie ma potrzeby jego użycia.

Przykład

switch (new Date().getDay()) {
    przypadek 0:
        day = "Niedziela";
        przerwij;
    przypadek 1:
        day = "Poniedziałek";
         przerwij;
    przypadek 2:
        day = "Wtorek";
         przerwij;
    przypadek 3:
        day = "Środa";
         przerwij;
    przypadek 4:
        day = "Czwartek";
         przerwij;
    przypadek 5:
        day = "Piątek";
         przerwij;
    przypadek 6:
        day = "Sobota";
         przerwij;
    domyślnie:
        day = "Nieznany";
}

Spróbuj sam

Unikaj użycia eval()

eval() Funkcje są używane do traktowania tekstu jako kodu. W prawie wszystkich przypadkach nie ma potrzeby jego użycia.

Ponieważ pozwala na uruchamianie dowolnego kodu, oznacza to również problem z bezpieczeństwem.