Najlepsze praktyki w programowaniu JavaScript

Ten artykuł wyjaśnia najlepsze praktyki w programowaniu JavaScript.

Przedstawimy kluczowe najlepsze praktyki w JavaScript wraz z konkretnymi przykładami kodu.

YouTube Video

Najlepsze praktyki w programowaniu JavaScript

W programowaniu ważne jest nie tylko pisanie "kodu, który działa", ale tworzenie kodu, który jest łatwy w utrzymaniu, wydajny i niezawodny. Stosowanie "dobrych praktyk" sprawia, że kod jest łatwiejszy do zrozumienia przez innych programistów, prostszy w utrzymaniu i rozbudowie, a ostatecznie prowadzi do mniejszej liczby błędów i lepszej wydajności.

Na przykładach kodu przyjrzyjmy się kluczowym dobrym praktykom w JavaScripcie.

Używaj jasnych i opisowych nazw zmiennych i funkcji

Spraw, aby znaczenie zmiennej lub funkcji było zrozumiałe już przy samym czytaniu kodu. Preferuj nazwy opisowe zamiast skróconych nazw lub skrótów.

Zły przykład

1/* Bad Example */
2let x = 10;
3function fn() {
4    // ...
5}

• Nazwy takie jak x czy fn zaciemniają zamysł kodu.

Dobry przykład

1/* Good Example */
2let totalItems = 10;
3function calculateDiscount(price) {
4    // ...
5}

• Używanie znaczących nazw, takich jak totalItems czy calculateDiscount, pomaga czytelnikom zrozumieć kod.

Używaj const / let i unikaj var

Ponieważ var jest podatny na problemy z zakresem i ponowną deklaracją, zaleca się zawsze używać const lub let.

Zły przykład

1/* Bad Example */
2var count = 5;

• var ma zasięg funkcji i może powodować niezamierzone ponowne deklaracje oraz hoisting.

Dobry przykład

1/* Good Example */
2let count = 5; // Reassignable
3const MAX_COUNT = 10; // Not reassignable

• let i const mają zasięg blokowy i są bezpieczniejsze w użyciu, co przekłada się na bardziej przewidywalny i stabilny kod.

Używaj odpowiednich komentarzy

{^ i18n_speak 単にコードの動作をそのまま繰り返すコメントではなく、コードの「目的」や「理由」を説明するためにコメントを使います。^}

Zły przykład

1/* Bad Example */
2let a = 100; // assign 100 to a

Dobry przykład

1/* Good Example */
2// Initialize the maximum value to 100
3let maxItems = 100;

• Preferuj komentarze wyjaśniające, dlaczego coś jest robione, zamiast tego, co jest robione. To szczególnie przydatne tam, gdzie logika jest złożona.

Stosuj zasadę DRY (Nie Powtarzaj Siebie)

Zamiast powtarzać tę samą logikę, wydziel ją do funkcji lub klas. Ograniczanie duplikacji poprawia łatwość utrzymania i pomaga zapobiegać błędom.

Zły przykład

1/* Bad Example */
2let totalPrice = price * quantity;
3let discountedPrice = (price * 0.9) * quantity;

Dobry przykład

1/* Good Example */
2function calculatePrice(price, quantity, discount = 0) {
3    return (price * (1 - discount)) * quantity;
4}
5
6let totalPrice = calculatePrice(price, quantity);
7let discountedPrice = calculatePrice(price, quantity, 0.1);

• Scalając zduplikowaną logikę w jedną funkcję, zmiany i poprawki można wprowadzać w jednym miejscu. To szczególnie ważne w projektach na dużą skalę.

Zapewnij pojedynczą odpowiedzialność funkcji i minimalizuj efekty uboczne

Każda funkcja powinna mieć jeden, jasno określony cel. Unikaj modyfikowania zmiennych globalnych lub zewnętrznego stanu, aby ograniczyć efekty uboczne do minimum.

Zły przykład

1/* Bad Example */
2let total = 0;
3function addItem(price) {
4    total += price; // modifies external state
5    console.log('Item added');
6}

Dobry przykład

1/* Good Example */
2function calculateTotal(items) {
3    return items.reduce((sum, item) => sum + item.price, 0);
4}

• Projektowanie funkcji jako czystych — zwracających ten sam wynik dla tych samych danych wejściowych — ułatwia ich testowanie i zwiększa niezawodność. To również poprawia możliwość ponownego wykorzystania i ułatwia debugowanie.

Wykonuj obsługę błędów

Zadbaj, aby aplikacja nie ulegała awarii przy nieoczekiwanych danych wejściowych lub wyjątkach. Używaj składni try...catch, aby właściwie obsługiwać błędy.

Zły przykład

1/* Bad Example */
2let data = JSON.parse(inputData);

Dobry przykład

1/* Good Example */
2try {
3    let data = JSON.parse(inputData);
4} catch (error) {
5    console.error('Failed to parse JSON:', error);
6}

• Ponieważ JSON.parse() może zgłosić wyjątek, obsłuż to bezpiecznie za pomocą try-catch. Dokładna obsługa błędów pomaga tworzyć odporne aplikacje.

Generuj ustrukturyzowane logi

Zapisuj logi w spójnym formacie, aby łatwiej śledzić zachowanie systemu. Używanie logów w formacie JSON ułatwia pracę z nimi w narzędziach analitycznych i monitorujących.

Zły przykład

1/* Bad Example */
2console.log('Error occurred!');

Dobry przykład

1/* Good Example */
2console.log(JSON.stringify({
3    level: 'error',
4    message: 'Database connection failed',
5    timestamp: new Date().toISOString()
6}));

• Zwykłe logi jako ciągi tekstowe mogą tracić informacje; ustrukturyzowane logi ułatwiają analizę logów, wizualizację i monitorowanie. Jest to szczególnie skuteczne po stronie serwera w JavaScripcie (Node.js).

Popraw Czytelność Kodu

Kod czytają inni (a także ty w przyszłości). Stosuj odpowiednie wcięcia, łamanie linii i odstępy, aby kod był łatwy do czytania.

Zły przykład

1/* Bad Example */
2if(a===b){doSomething();}

Dobry przykład

1/* Good Example */
2if (a === b) {
3    doSomething();
4}

• Dobrze sformatowany, czytelny kod szybciej się rozumie i łatwiej w nim dostrzec błędy. Nie upychaj wszystkiego w jednej linii; spraw, by struktura była wizualnie czytelna.

Zawsze pamiętaj o bezpieczeństwie

Ponieważ JavaScript często działa w środowiskach webowych, świadomość bezpieczeństwa jest kluczowa. Zawsze waliduj dane wejściowe użytkownika, chroń się przed XSS i CSRF oraz utrzymuj zależności na bieżąco.

Zły przykład

1/* Bad Example */
2// Directly inserting user input into HTML (vulnerable to XSS)
3element.innerHTML = userInput;

Dobry przykład

1/* Good Example */
2// Use textContent to prevent XSS attacks
3element.textContent = userInput;

• Przetwarzanie danych wejściowych użytkownika bez weryfikacji może wprowadzić podatności, takie jak wstrzyknięcie skryptu. Używaj bezpiecznych interfejsów API i wyrób sobie nawyk zawsze walidować i oczyszczać dane.

Przeprowadzanie Testów Kodu

Wprowadzenie testów automatycznych ułatwia wykrywanie i zapobieganie błędom. W JavaScripcie powszechnie używa się frameworków testowych, takich jak Jest i Mocha.

Przykład

1// Simple test using Jest
2function sum(a, b) {
3    return a + b;
4}
5
6test('adds 1 + 2 to equal 3', () => {
7    expect(sum(1, 2)).toBe(3);
8});

• Posiadanie testów gwarantuje, że błędy nie wracają przy dodawaniu nowych funkcjonalności lub wprowadzaniu zmian. Testy są niezbędne do ciągłego zapewniania jakości.

Wniosek

Stosowanie dobrych praktyk może znacząco poprawić jakość, łatwość utrzymania i niezawodność kodu. Ucząc się JavaScriptu, ważne jest wyrabianie nawyków nie tylko wokół składni, ale także dotyczących tego, "jak pisać dobry kod". Dzięki ciągłej nauce możesz uczynić swój kod bardziej czytelnym, bezpiecznym i wydajnym.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video