前端代码整洁之道

最新推荐文章于 2024-08-03 20:32:29 发布

卷笔小刀

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量199

点赞数

分类专栏：前端文章标签：前端 javascript java

本文链接：https://blog.csdn.net/weixin_46174844/article/details/130451762

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

随着互联网技术的快速发展，前端开发的重要性越来越受到重视。随着前端技术的不断更新和完善，前端工程师们的能力也不断增强，但是开发过程中却经常会遇到一些问题，其中最常见的就是代码不整洁。

代码不整洁的表现形式很多，比如变量命名不规范，函数过长，代码重复等等，在开发过程中这些问题将会给我们带来很多麻烦，增加代码维护的难度。因此，如何提高我们的代码质量，让代码更加整洁，已成为前端工程师们需要考虑的一个重要问题。

本文将介绍前端代码整洁之道，包括对于代码整洁及其重要性的阐述，以及具体如何通过一些技巧和方法来提高我们的代码质量，以及相关的示例和实践。

代码整洁的定义

代码整洁是指写出易读、可维护和可重复使用的代码，同时代码风格要符合行业标准。简单来说，代码整洁就是让自己的代码容易被自己和别人理解，修改和增强。

为什么要写整洁的代码？

代码整洁并不是一种比较新的理念，早在近40年前，大师级程序员Robert C. Martin就在《代码整洁之道》这本书中提出了这个概念。那么，为什么要写整洁的代码呢？

1.易于维护

一个整洁的代码，易于维护，可以让团队开发者更快速的理解代码结构和逻辑思路，从而更快速的修复或修改代码，并能减少出现不必要的错误。

2.提高开发效率和代码质量

在具有代码整洁之道的开发模式下，开发人员需要自始至终重视代码的可读性、可维护性，这有助于代码质量的提高，也能够减少在开发中不必要的时间浪费。

3.减少沟通成本

在团队开发中，如果每个人都有自己的写代码风格，那么在修改或者查看别人的代码时，很容易出现理解障碍。然而，在编写整洁的代码时，可以减少代码风格的多样性，从而减少了阅读造成的语言留白，节省了沟通成本。

4.降低维护成本

一个高质量的整洁代码可以避免过程中的维护成本，减少代码修复和维行成本同时增加代码更改和扩展的容易度和效率。

代码整洁的评估标准

那么一个代码是否整洁也就成为这个问题立足点。

下面介绍代码整洁的常见评估标准。

1. 可读性

代码的可读性是指代码是否容易阅读、易于理解。

代码的可读性有很多方面，例如代码格式化、注释是否恰当、代码变量是否规范，代码长度等等，代码的可读性影响了团队内部沟通成本的高低，影响处理 bug 和新需求变化的速度和成本。

2. 面向对象设计原则

面向对象编程是一种广泛应用于软件开发的编程范型，是由一组基本概念和技术组成的。面向对象的特点是数据抽象、继承和动态绑定。

采用面向对象设计原则编写的程序，具有更好的可维护性、可扩展性和可重用性等特征。

3. 可测试性

测试是为了发现并证明软件程序中存在的错误、漏洞及隐患，以便修正程序，提高程序的质量和可信度。

为了方便对代码进行测试，并及时发现 bug 以进行修复，在编写代码时应该考虑代码的可测试性，比如代码单元化、mock 和 stub 等技巧。

4. 相似性

相似性是指代码中的能量相似，使用相似的方法处理问题。

高度相似的代码通常会有很多重复代码，导致代码冗余，会影响程序的运行速度和内存占用，也增加了后期代码的维护成本。

代码整洁的准则和技巧

下面介绍一些关于代码整洁的准则和技巧。

1. 命名规范和可读性

变量、函数、类等命名应该能够直观地说明所表示的含义，同时避免使用没有意义的简洁名称。

建议采用驼峰式、下划线式等常见的命名规范，使代码结构更清晰易懂。

2. 函数的长度

函数尽量不要超过 50 行，保持函数短小，提高函数的可重用性和可读性。如果一个函数超过 100 行，那么应该考虑将函数进行拆分。

3. 函数的单一职责原则

一个函数应该只完成一个任务，不应该做太多的事情，这有助于降低代码复杂度和维护成本。

4. 接口的一致性

接口的一致性是指不同组件或模块之间，应该遵循统一的接口协议，使其易于集成和共享。这样使得不同的组件或模块之间更容易进行互相调用。

5. 函数参数的数量

函数参数的数量应该尽量少，不超过 3 个，当参数过多时可能会让函数失去其可扩展性。可以考虑使用匿名函数或函数类等方式来避免参数数量过多的情况。

6. 代码复用

可以使用抽象类、接口、继承等技术来减少代码复杂性和代码冗余度，并提高代码的可读性和可维护性。

7. 函数注释

每一个关键的函数应该有适当的注释，主要是起到解释函数实现功能和参数用途的作用，这样可以帮助其他开发人员更好地理解和使用这个函数。

8. 变量命名

变量名应该有具体含义的命名，能够清晰明了的表达出变量的用途和变量类型。

9. 代码格式化

代码由于缩进对其格式化，可以使代码结构更清晰易懂，建议采用四个空格或者一个Tab作为缩进，而非手动添加空格或Tab。

10.代码注释

注释应该准确、简明、易于理解，注释应该配合代码来使用，同时不应该为所有代码都添加注释。注释可以简单解释为什么要这样做并帮助更好的理解代码。

前端代码整洁之道示例

1.命名规范和可读性

命名不合理往往会给其他开发者带来很多困惑。下面是从一个 React 组件文件中提取出的两个不合理变量替换为合适名称的例子。

// 源代码
const myFunc = (a, b) =&gt; {
  const i = a + b;
  console.log(`value of i: ${i}`);

  if (i &gt; 10) {
    return true;
  } else {
    return false;
  }
}
// 修改后的代码
const addition = (num1, num2) =&gt; {
  const result = num1 + num2;
  console.log(`addition result = ${result}`);

  if (result &gt; 10) {
    return true;
  } else {
    return false;
  }
}

在这个例子中，我们将变量 myFunc 改为 addition，使它更加准确地描述函数的用途；将参数 a 和 b 改为 num1 和 num2，更好地描述了两个参数的含义。

2. 函数的长度

函数长度应该尽量短小，下面的代码演示了大块的代码如何更好的重构。

// 源代码
const renderData = data =&gt; {
  let html = "<ul>";

  for (const item of data) {
    html += "<li>";

    if (item.status === "active") {
      html += "<span class="active">ACTIVE</span>";
    } else {
      html += "<span class="inactive">INACTIVE</span>";
    }

    html += item.name + "</li>";
  }
  html += "</ul>";

  return html;
};

// 重构后的代码
const renderData = data =&gt; {
  const renderListItem = item =&gt;
    `<li class="list__item` +
    (item.status === &quot;active&quot; ? &quot; list--active&quot; : &quot; list--inactive&quot;) +
    `"><span class="list__status">${
      item.status === "active" ? "ACTIVE" : "INACTIVE"
    }</span>${item.name}</li>`;

  const listItems = data.map(renderListItem).join("");
  return `<ul class="list">${listItems}</ul>`;
};

在这个例子中，我们将一个长函数拆分为两个函数来提高可读性和可维护性。

3. 函数的单一职责原则

代码保证了每个函数的职责都非常单一，例如：

// 源代码
const fetchAndRenderUser = async userId =&gt; {
  const user = await api.getUser(userId);
  const userFriends = await api.getUserFriends(userId);

  const userEl = document.querySelector(".user");
  const userFriendsEl = document.querySelector(".user-friends");

  userEl.textContent = user.name;
  userFriendsEl.innerHTML = userFriends.map(friend =&gt; `<li>${friend.name}</li>`).join("");
};

// 重构后代码
const async getUser(userId) {
  const user = await api.getUser(userId);
  return user;
}

const async getUserFriends(userId) {
  const friends = await api.getUserFriends(userId);
  return friends;
}

const renderUser(user) {
  const userEl = document.querySelector(".user");
  userEl.textContent = user.name;
}

const renderUserFriends(friends) {
  const userFriendsEl = document.querySelector(".user-friends");
  userFriendsEl.innerHTML = friends.map(friend =&gt; `<li>${friend.name}</li>`).join("");
}

const UIController = {
  async renderUserUI(userId) {
    const user = await getUser(userId);
    const friends = await getUserFriends(userId);

    renderUser(user);
    renderUserFriends(friends);
  }
};

在这个例子中，我们将 fetchAndRenderUser 函数拆分成了四个独立的函数：getUser、getUserFriends、renderUser 和 renderUserFriends。该改动将使每个函数的职责更加单一和内聚，并且更易于阅读和以后的维护。

总结

代码整洁是一种好的编程习惯，可以减少代码阅读和修改的效率，增强代码的可读性和可维护性。在代码整洁之道中，我们强调了一些规范和技巧，包括命名规范、函数的来源性、接口的一致性、变量命名、代码格式化、代码注释等等。而且在代码整洁之道中最重要的一点在于，做好长时间的代码开发维护，说不定在一年之后，你的代码依然能为你而工作。