0

0

什么是干净代码(JavaScript 版)

王林

王林

发布时间:2024-07-29 08:50:01

|

966人浏览过

|

来源于dev.to

转载

什么是干净代码(javascript 版)

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

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

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

什么是干净代码?

干净的代码基本上是指

立即学习Java免费学习笔记(深入)”;

的代码
  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;
}

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

In3D
In3D

把真人变成化身,创建逼真且可自定义的虚拟角色

下载

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)。
  • 保持简单愚蠢。越简单总是越好。尽可能降低复杂性。
  • 童子军规则。让露营地比你发现时更干净。
  • 始终找到根本原因。始终寻找问题的根本原因。
  • 编写易于理解的代码

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

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1570

2023.10.24

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

761

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1570

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

651

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

1229

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

1205

2024.04.29

go语言字符串相关教程
go语言字符串相关教程

本专题整合了go语言字符串相关教程,阅读专题下面的文章了解更多详细内容。

193

2025.07.29

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

69

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号