Rumah > hujung hadapan web > tutorial js > Piawaian Pengekodan Umum JavaScript.

Piawaian Pengekodan Umum JavaScript.

王林
Lepaskan: 2024-08-06 18:33:40
asal
1225 orang telah melayarinya

General Coding Standards JavaScript.

Piawaian Pengekodan Umum

  1. Nama Bermakna:
    • Gunakan pembolehubah dan nama fungsi yang bermakna dan deskriptif.
    • Elakkan singkatan dan nama huruf tunggal kecuali pembilang gelung.
   // Good
   const userAge = 25;
   function calculateTotalPrice(items) { ... }

   // Bad
   const a = 25;
   function calc(items) { ... }
Salin selepas log masuk
  1. Konvensyen Penamaan Konsisten:
    • Gunakan camelCase untuk pembolehubah dan fungsi.
    • Gunakan PascalCase untuk nama kelas.
   const userAge = 25;
   function calculateTotalPrice(items) { ... }
   class UserProfile { ... }
Salin selepas log masuk
  1. Elakkan Pengulangan:
    • Ikuti prinsip DRY (Jangan Ulangi Diri Sendiri) dengan merangkum kod berulang ke dalam fungsi.
   // Good
   function calculateDiscount(price, discount) { ... }
   const price1 = calculateDiscount(100, 10);
   const price2 = calculateDiscount(200, 20);

   // Bad
   const price1 = 100 - 10;
   const price2 = 200 - 20;
Salin selepas log masuk
  1. Pengendalian Ralat:
    • Balut panggilan API dan operasi tak segerak lain dalam blok cuba-tangkap.
   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }
Salin selepas log masuk
  1. Sarung Tepi:
    • Sentiasa pertimbangkan kes tepi dan sahkan input.
   function getUserAge(user) {
     if (!user || !user.age) {
       return 'Age not available';
     }
     return user.age;
   }
Salin selepas log masuk
  1. Pemformatan Konsisten:
    • Ikuti gaya pemformatan kod yang konsisten (lekukan, jarak, dll.). Gunakan alat seperti Prettier untuk mengautomasikan ini.
   if (condition) {
     doSomething();
   } else {
     doSomethingElse();
   }
Salin selepas log masuk

Organisasi Kod

  1. Pemodularan:
    • Pecahkan kod kepada modul atau fungsi kecil yang boleh digunakan semula.
   // utils.js
   export function calculateDiscount(price, discount) { ... }

   // main.js
   import { calculateDiscount } from './utils.js';
Salin selepas log masuk
  1. Pemisahan Kebimbangan:
    • Asingkan kebimbangan yang berbeza (cth., logik UI, logik perniagaan, pengendalian data) ke dalam fail atau fungsi yang berbeza.
   // ui.js
   function updateUI(data) { ... }

   // data.js
   async function fetchData() { ... }

   // main.js
   import { updateUI } from './ui.js';
   import { fetchData } from './data.js';
Salin selepas log masuk

Amalan Terbaik

  1. Gunakan Mod Ketat:
    • Sentiasa dayakan mod ketat untuk menangkap ralat pengekodan biasa.
   'use strict';
Salin selepas log masuk
  1. Gunakan Pemalar:
    • Gunakan pemalar untuk nilai yang tidak berubah.
   const MAX_USERS = 100;
Salin selepas log masuk
  1. Elakkan Pembolehubah Global:
    • Meminimumkan penggunaan pembolehubah global untuk mengelakkan konflik dan tingkah laku yang tidak diingini.
   // Good
   (function() {
     const localVariable = 'This is local';
   })();

   // Bad
   var globalVariable = 'This is global';
Salin selepas log masuk
  1. Ulasan dan Dokumentasi:
    • Tulis ulasan dan dokumentasi untuk menerangkan tujuan dan fungsi kod.
   /**
    * Calculates the total price after applying a discount.
    * @param {number} price - The original price.
    * @param {number} discount - The discount to apply.
    * @returns {number} - The total price after discount.
    */
   function calculateTotalPrice(price, discount) { ... }
Salin selepas log masuk
  1. Gunakan Janji dan Async/Tunggu dengan Pengendalian Ralat:
    • Lebih suka menggunakan janji dan async/tunggu untuk operasi tak segerak, dan bungkusnya dalam blok cuba-tangkap untuk pengendalian ralat.
   // Good
   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }

   // Bad
   function fetchData(callback) {
     fetch('api/url')
       .then(response => response.json())
       .then(data => callback(data))
       .catch(error => console.error('Error fetching data:', error));
   }
Salin selepas log masuk
  1. Pemusnahan Objek:
    • Gunakan pemusnahan objek untuk mengekstrak berbilang sifat daripada objek dengan cara yang ringkas.
   // Good
   const vehicle = { make: 'Toyota', model: 'Camry' };
   const { make, model } = vehicle;

   // Bad
   const vehicleMake = vehicle.make;
   const vehicleModel = vehicle.model;
Salin selepas log masuk

Dengan mengikut piawaian ini, anda boleh memastikan kod JavaScript anda bersih, boleh diselenggara dan cekap.

Atas ialah kandungan terperinci Piawaian Pengekodan Umum JavaScript.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan