什么是干净代码（JavaScript 版）

无论你想怎么写，都可以编写只需要使用一次的代码。但是，在大多数情况下，遵守最佳实践和维护干净的代码至关重要。

请记住，您的代码稍后可能会被其他开发人员甚至您自己阅读。到那时，您的代码应该是不言自明的。每个变量、函数和注释都应该精确、干净且易于理解。这种方法不仅可以简化维护工作，还可以促进开发团队内部的协作和效率。

因此，当某人（或您）回来添加或修改您的代码时，将很容易理解每​​一行代码的作用。否则，您的大部分时间将花在试图理解代码上。对于在您的代码库上工作的新开发人员来说，也会出现同样的问题。如果代码不干净，他们将无法理解。因此，编写干净的代码非常重要。

什么是干净代码？

干净的代码基本上是指

的代码

1. 易于理解
2. 易于调试
3. 易于维护
4. 评论写得很好，简短易懂
5. 没有重复（冗余）代码并遵循 kiss 规则（保持简单，愚蠢！）

为了编写干净的代码，开发人员必须保持代码的一致性，并且开发人员需要遵循特定语言的最佳实践。

为什么清洁代码很重要？

当团队遵循简洁代码原则时，代码库变得更易于阅读和导航。这有助于开发人员快速理解代码并开始贡献。以下是为什么干净的代码很重要的一些原因。

1.可读性和可维护性： 当代码写得好、有良好的注释并遵循最佳实践时，它很容易阅读和理解。一旦出现问题或错误，您就知道在哪里可以找到它。

2.调试： 干净的代码设计清晰、简单，可以更轻松地定位和理解代码库的特定部分。清晰的结构、有意义的变量名称和定义明确的函数使识别和解决问题变得更加容易。

3.提高质量和可靠性： 干净的代码遵循特定语言的最佳实践，并优先考虑结构良好的代码。它增加了质量并提高了可靠性。因此它消除了由于错误和非结构化代码而可能出现的错误。

现在我们了解了为什么干净的代码至关重要，让我们深入研究一些最佳实践和原则来帮助您编写干净的代码。

干净代码的原则

要创建出色的代码，必须遵守干净代码的原则和实践，例如使用小型的、定义良好的方法。

让我们详细看看。

1.避免硬编码数字

我们可以使用常量并将该值赋给它，而不是直接使用值。因此，将来如果我们需要更新该值，我们只需在一个位置更新它。

示例

function getdate() {
  const date = new date();
  return "today's date: " + date;
}

function getformatteddate() {
  const date = new date().tolocalestring();
  return "today's date: " + date;
}

登录后复制

在此代码中，在某些时候发生了变化，需要将“今天的日期：”改为“日期：”。可以通过将该字符串分配给一个变量来改进这一点。

改进的代码：

const todaysdatelabel = "today's date: ";

function getdate() {
  const date = new date();
  return todaysdatelabel + date;
}

function getformatteddate() {
  const date = new date().tolocalestring();
  return todaysdatelabel + date;
}

登录后复制

在上面的代码中，在需要时更改日期字符串变得很容易。它提高了可维护性。

2.使用有意义且具有描述性的名称
我们可以使用更具描述性的名称，而不是到处使用通用变量名称，这是不言自明的。变量名本身应该定义它的使用。

命名规则

1. 选择描述性且明确的名称。
2. 做出有意义的区分。
3. 使用可发音的名字。
4. 使用可搜索的名称。
5. 用命名常量替换幻数。
6. 避免编码。不要附加前缀或类型信息。

示例

// calculate the area of a rectangle
function calc(w, h) {
    return w * h;
}

const w = 5;
const h = 10;
const a = calc(w, h);
console.log(`area: ${a}`);

登录后复制

这里的代码是正确的，但代码中有一些含糊之处。让我们看看使用描述性名称的代码。

改进的代码

// calculate the area of a rectangle
function calculaterectanglearea(width, height) {
    return width * height;
}

const rectanglewidth = 5;
const rectangleheight = 10;
const area = calculaterectanglearea(rectanglewidth, rectangleheight);
console.log(`area of the rectangle: ${area}`);

登录后复制

这里每个变量名称都是不言自明的。因此，很容易理解代码并提高代码质量。

3.仅在需要的地方使用评论
你不需要到处写评论。只写在需要的地方，并且写得简短易懂。太多的注释会导致混乱和混乱的代码库。

评论规则

1. 始终尝试用代码来解释自己。
2. 不要多余。
3. 不要添加明显的噪音。
4. 不要使用右大括号注释。
5. 不要注释掉代码。删除即可。
6. 用作意图的解释。
7. 用作代码的澄清。
8. 用作后果警告。

示例

// function to get the square of a number
function square(n) {
    // multiply the number by itself
    var result = n * n; // calculate square
    // return the result
    return result; // done
}

var num = 4; // number to square
var squared = square(num); // call function

// output the result
console.log(squared); // print squared number

登录后复制

这里我们可以看到注释用于定义步骤，通过阅读代码很容易理解。这些注释是不必要的，并且会使代码变得混乱。让我们看看注释的正确使用。

改进的代码

/**
 * returns the square of a number.
 * @param {number} n - the number to be squared.
 * @return {number} the square of the input number.
 */
function square(n) {
    return n * n;
}

var num = 4;
var squared = square(num); // get the square of num

console.log(squared); // output the result

登录后复制

在上面的示例中，注释仅在需要的地方使用。这是使代码整洁的好习惯。

4.编写只做一件事的函数
当你编写函数时，不要给它们添加太多的职责。遵循单一职责原则 (srp)。这使得该函数更容易理解并简化了为其编写单元测试。

函数规则

1. 保持小。
2. 做一件事。
3. 使用描述性名称。
4. 希望少一点争论。
5. 将方法拆分为多个可以从客户端调用的独立方法。

示例

async function fetchdataandprocess(url) {
    // fetches data from an api and processes it in the same function
    try {
        const response = await fetch(url);
        const data = await response.json();

        // process data (e.g., filter items with value greater than 10)
        const processeddata = data.filter(item => item.value > 10);

        console.log(processeddata);
    } catch (error) {
        console.error('error:', error);
    }
}

// usage
const apiurl = 'https://api.example.com/data';
fetchdataandprocess(apiurl);

登录后复制

在上面的示例中，我们可以看到一个使用 api 获取数据并进行处理的函数。这可以通过另一个函数来完成。目前，数据处理功能很小，但在生产级项目中，数据处理可能会非常复杂。那时，将其保留在同一个函数中并不是一个好的做法。这将使您的代码一次性变得复杂且难以理解。
让我们看看这个的干净版本。

改进的代码

async function fetchData(url) {
    // Fetches data from an API
    try {
        const response = await fetch(url);
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

function processData(data) {
    // Processes the fetched data (e.g., filter items with value greater than 10)
    return data.filter(item => item.value > 10);
}

// Usage
const apiUrl = 'https://api.example.com/data';

fetchData(apiUrl)
    .then(data => {
        const processedData = processData(data);
        console.log(processedData);
    })
    .catch(error => {
        console.error('Error:', error);
    });

登录后复制

在此示例中，职责是分离的：fetchdata 函数处理 api 调用，processdata 函数处理数据处理。这使得代码更容易理解、维护和测试。

5.避免代码重复（遵循 dry 原则 – 不要重复自己）

为了增强代码的可维护性和整洁性，尽可能创建可重用的函数或重用现有代码。例如，如果您要从 api 获取数据以在页面上显示，您将编写一个函数来检索数据并将其传递给呈现器以进行 ui 显示。如果需要在另一页上显示相同的数据，则不应再次编写相同的函数，而应将该函数移动到实用程序文件中。这允许您在两个实例中导入和使用该函数，从而提高整个代码库的可重用性和一致性。

编写整洁代码的其他一般规则

• 遵循标准约定（对于 javascript camel case）。
• 保持简单愚蠢。越简单总是越好。尽可能降低复杂性。
• 童子军规则。让露营地比你发现时更干净。
• 始终找到根本原因。始终寻找问题的根本原因。
• 编写易于理解的代码

从今天开始实施这些实践和原则来编写干净的代码。

以上就是什么是干净代码（JavaScript 版）的详细内容，更多请关注叮当号网其它相关文章！