Najlepsze praktyki w JavaScript
Unikaj zmiennych globalnych, unikaj new, unikaj ==, unikajeval()
Unikaj zmiennych globalnych
Zminimalizuj użycie zmiennych globalnych.
Obejmuje to wszystkie typy danych, obiekty i funkcje.
Zmienne globalne i funkcje mogą być nadpisywane przez inne skrypty.
Zamiast tego użyj zmiennych lokalnych i dowiedz się, jak używać zamknięć .
Zawsze deklarowaj zmienne lokalne
Wszystkie zmienne używane w funkcji powinny być zadeklarowane jako zmienne lokalne .
Zmienne lokalne muszą być zadeklarowane za pomocą var
słowa kluczowego lub słowa kluczowego letlub constsłowa kluczowego, w przeciwnym razie staną się zmiennymi globalnymi.
Tryb ścisły nie zezwala na niezadeklarowane zmienne.
Deklaracje na górze
Dobrą praktyką kodowania jest umieszczenie wszystkich deklaracji na początku każdego skryptu lub funkcji.
Spowoduje to:
- Podaj czystszy kod
- Zapewnij jedno miejsce do wyszukiwania zmiennych lokalnych
- Ułatw unikanie niechcianych (domniemanych) zmiennych globalnych
- Zmniejsz możliwość niechcianych ponownych deklaracji
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;
Dotyczy to również zmiennych pętli:
for (let i = 0; i < 5; i++)
{
Zainicjuj zmienne
Dobrą praktyką kodowania jest inicjowanie zmiennych podczas ich deklarowania.
Spowoduje to:
- Podaj czystszy kod
- Zapewnij jedno miejsce do inicjalizacji zmiennych
- Unikaj niezdefiniowanych wartości
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};
Zmienne inicjujące zapewniają wyobrażenie o zamierzonym użyciu (i zamierzonym typie danych).
Zadeklaruj obiekty z const
Zadeklarowanie obiektów z const zapobiegnie przypadkowej zmianie typu:
Przykład
let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Changes object to string
const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Not possible
Zadeklaruj tablice z const
Zadeklarowanie tablic z const zapobiegnie przypadkowej zmianie typu:
Przykład
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Not possible
Nie używaj nowego Object()
- Użyj
""zamiastnew String() - Użyj
0zamiastnew Number() - Użyj
falsezamiastnew Boolean() - Użyj
{}zamiastnew Object() - Użyj
[]zamiastnew Array() - Użyj
/()/zamiastnew RegExp() - Użyj
function (){}zamiastnew Function()
Przykład
let x1 = ""; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new object
const x5 = []; // new array object
const x6 = /()/; // new regexp object
const x7 = function(){}; // new function object
Uważaj na automatyczne konwersje typów
JavaScript jest luźno wpisany.
Zmienna może zawierać wszystkie typy danych.
Zmienna może zmienić swój typ danych:
Przykład
let x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
Uważaj, że liczby mogą przypadkowo zostać przekonwertowane na ciągi lub NaN(nie liczba).
Wykonując operacje matematyczne, JavaScript może konwertować liczby na łańcuchy:
Przykład
let x = 5 + 7; // x.valueOf() is 12, typeof x is a number
let x = 5 + "7"; // x.valueOf() is 57, typeof x is a string
let x = "5" + 7; // x.valueOf() is 57, typeof x is a string
let x = 5 - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "7"; // x.valueOf() is -2, typeof x is a number
let x = "5" - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "x"; // x.valueOf() is NaN, typeof x is a number
Odjęcie napisu od napisu nie generuje błędu, ale zwraca NaN(Not a Number):
Przykład
"Hello" - "Dolly" // returns NaN
Użyj === Porównanie
Operator ==porównania zawsze konwertuje (na pasujące typy) przed porównaniem.
Operator ===wymusza porównanie wartości i typu:
Przykład
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true;
// false
Użyj wartości domyślnych parametrów
Jeśli funkcja zostanie wywołana z brakującym argumentem, wartość brakującego argumentu jest ustawiana na
undefined.
Niezdefiniowane wartości mogą złamać Twój kod. Dobrym zwyczajem jest przypisywanie argumentom wartości domyślnych.
Przykład
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
ECMAScript 2015 dopuszcza parametry domyślne w definicji funkcji:
function (a=1, b=1) { /*function code*/ }
Przeczytaj więcej o parametrach i argumentach funkcji w sekcji Parametry funkcji
Zakończ swoje przełączniki wartościami domyślnymi
Zawsze kończ swoje switchwypowiedzi znakiem default. Nawet jeśli myślisz, że nie ma takiej potrzeby.
Przykład
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
day =
"Unknown";
}
Unikaj liczb, ciągów i wartości logicznych jako obiektów
Zawsze traktuj liczby, łańcuchy lub wartości logiczne jako wartości pierwotne. Nie jako przedmioty.
Zadeklarowanie tych typów jako obiektów, spowalnia szybkość wykonywania i powoduje nieprzyjemne efekty uboczne:
Przykład
let x = "John";
let y = new String("John");
(x === y) // is false because x is a string and y is an object.
Albo jeszcze gorzej:
Przykład
let x = new String("John");
let y = new String("John");
(x == y) // is false because you cannot compare objects.
Unikaj używania eval()
Funkcja eval()służy do uruchamiania tekstu jako kodu. W prawie wszystkich przypadkach nie powinno być konieczne jego używanie.
Ponieważ pozwala na uruchomienie dowolnego kodu, stanowi również problem z bezpieczeństwem.