遵循这些 JavaScript 最佳实践编写更好的代码

女爷i 2024-03-22 19:06 67阅读 0赞

无论您是正在寻找改进编码风格的方法的经验丰富的开发人员，还是渴望掌握要点的初学者，这篇博文都适合您。在这份全面的指南中，我们将探讨各种可以帮助您将 JavaScript 技能提升到新水平的最佳实践。

1.采用一致的编码风格  
改进 JavaScript 游戏的第一步是采用一致的编码风格。为什么这很重要？一致的编码风格增强了代码的可读性和可维护性。将其视为为您的脚本提供结构和连贯性的蓝图。

您可以遵循几种流行的编码风格指南：

地道的 JavaScript，它是基于社区的  
Google 的 JavaScript 风格指南  
Airbnb 的 JavaScript 风格指南  
选择一个符合你的编程风格的指南，并在你的项目中坚持使用它，你的项目应该看起来只有一个人编写代码，即使许多其他开发人员在同一个项目上工作。

2.命名变量和函数  
接下来是变量、函数和其他代码结构的命名约定。这种做法不仅与美学或语义有关，还与代码可读性和高效调试有关。

请记住，在 JavaScript 中，标准是对变量和函数使用驼峰式大小写（如myVariableName），对类使用 Pascal 大小写（如MyClassName）。

// ❌ Poorly named variables:
    let a = 'John';
    let fn = () => console.log('Hello');
    
    // ✅ Descriptive variable names:
    let firstName = 'John';
    let sayHello = () => console.log('Hello');

1.  使用速记但要谨慎  
    速记是编写代码更快、更干净的好方法，但要小心，因为它们可能会返回令人惊讶的结果。为防止此类意外结果，请确保始终检查文档、查找相关的 JavaScript 代码示例并测试结果。

// ❌ Traditional function declaration:
    function square1 (num) {
       
        
      return num * num
    }
    // ✅ Using arrow functions (shorthand):
    const square2 = num => num * num
    
    // ❌ Very long code:
    let x
    
    if (y) {
       
        
      x = y
    } else {
       
        
      x = 'default'
    }
    
    // ✅ A more succinct way to achieve the same result using logical OR:
    let x = y || 'default'

1.  为你的代码添加有意义的注释  
    评论您的代码就像为您未来的自己或其他开发人员留下面包屑。它有助于理解代码的流程和目的，尤其是在处理团队项目时。

但是，请记住让您的评论简短、简洁，并且只包含关键信息。

// ❌ Over-commenting or not commenting at all:
    function convertCurrency (from, to) {
       
        
      // Conversion logic goes here
    }
    
    // ✅ Using appropriate comments:
    /**
     * Converts currency from one type to another
     *
     * @description Converts one currency to another
     * @param {
       
        string} from - The currency to convert from
     * @param {
       
        string} to - The currency to convert to
     * @returns {
       
        number} - The converted amount
     * */
    function convertCurrency