JavaScript 最佳实践：编写简洁、高效且可维护的代码-js教程-PHP中文网

JavaScript 最佳实践：编写简洁、高效且可维护的代码

DDD

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

原创

715 人浏览过

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

登录后复制