JavaScript 最佳實務：編寫簡潔、有效率且可維護的程式碼-js教程-PHP中文網

JavaScript 最佳實務：編寫簡潔、有效率且可維護的程式碼

DDD

發布： 2024-11-27 09:22:10

原創

682 人瀏覽過

Best Practices in JavaScript: Writing Clean, Efficient, and Maintainable Code

1.使用可選連結保護您的程式碼 (?.)

如果屬性不存在，存取深度嵌套的屬性通常會導致 TypeError。可選連結 (?.) 提供了一種安全存取這些屬性的乾淨方法，無需編寫詳細的檢查。

範例：

const user = { profile: { name: 'Alice' } };  

console.log(user.profile?.name); // Alice  
console.log(user.profile?.age); // undefined (No error)

登入後複製

為什麼要使用它？

可選鏈可防止因未定義或空值引起的崩潰，並透過消除重複的 if 語句來保持程式碼整潔。

2.透過動態導入最佳化效能

動態導入可讓您僅在需要時載入 JavaScript 模組，從而減少初始套件大小並提高應用程式效能。

範例：

async function loadChart() {  
  const { Chart } = await import('chart.js');  
  const myChart = new Chart(canvas, { type: 'bar', data: {...} });  
}

登入後複製

為什麼要使用它？

動態導入啟用程式碼分割，確保僅載入特定功能所需的 JavaScript，從而實現更快的載入時間和更好的使用者體驗。

3.透過解構和預設值簡化程式碼

使用預設值解構可讓您從物件或陣列中簡潔地提取屬性，同時提供後備值以避免未定義。

範例：

const settings = { theme: 'dark' };  

const { theme = 'light', language = 'en' } = settings;  

console.log(theme); // dark  
console.log(language); // en (default)

登入後複製

為什麼要使用它？

這種方法減少了樣板程式碼並防止意外的未定義值，使您的邏輯更加健壯和可讀。

4.透過去抖動和節流提高性能

如果觸發過於頻繁，處理滾動或調整大小等事件的成本可能會很高。使用 debouncing 延遲執行，或使用 throttting 限制函數呼叫的頻率。

去抖動範例：

function debounce(func, delay) {  
  let timeout;  
  return (...args) => {  
    clearTimeout(timeout);  
    timeout = setTimeout(() => func(...args), delay);  
  };  
}  

window.addEventListener('resize', debounce(() => console.log('Resized!'), 300));

登入後複製

節流範例：

function throttle(func, limit) {  
  let lastCall = 0;  
  return (...args) => {  
    const now = Date.now();  
    if (now - lastCall >= limit) {  
      lastCall = now;  
      func(...args);  
    }  
  };  
}  

window.addEventListener('scroll', throttle(() => console.log('Scrolled!'), 200));

登入後複製

為什麼要使用它？

這兩種技術都透過減少事件處理程序的觸發次數來優化瀏覽器效能，讓您的應用程式更流暢、更能回應。

5.透過記憶化緩存昂貴的計算

透過使用記憶化快取函數呼叫的結果來避免冗餘計算。

範例：

function memoize(fn) {  
  const cache = new Map();  
  return (...args) => {  
    const key = JSON.stringify(args);  
    if (cache.has(key)) return cache.get(key);  
    const result = fn(...args);  
    cache.set(key, result);  
    return result;  
  };
}  

const factorial = memoize(n => (n <= 1 ? 1 : n * factorial(n - 1)));  

console.log(factorial(5)); // 120  
console.log(factorial(5)); // Retrieved from cache

登入後複製