JavaScript代码整洁之道-命名约定！

众所周知，软件开发不是一个人的工作，总是需要团队合作。因此，必须保持定义的命名约定。为函数或变量选择适当的名称需要经验以及花费大量的代码阅读时间。该挑战不是技术或管理挑战，而是一项需要大量实践的技能。

它为什么这么重要？

1.更好的沟通

开发产品始终是团队合作的结晶，这需要确保每个人都理解我们命名的名称，我们必须清楚地命名它们。

2.易于管理

由于编码约定的不同，开发人员会毫不犹豫地接触同行成员的代码。

3.易于审核

一致的代码约定使检查变得更容易，因为我们不必找出含义。

4.易于入职

对于新入职的开发人员，编码约定使他们可以通过简单地查看代码来轻松掌握代码的内部。

如何写出有意义的名字？

变量，函数或类的名称应该能回答所有大问题。它应该告诉您它为什么存在，它做什么以及如何使用。如果名称需要注释，则该名称不会显示其意图。
变量名必须定义其内容的确切说明，以便在没有文档的情况下也可以自行记录。

// Bad 
let d // 经过的时间（天）
// Good
let elapsedTimeInDays

使用易读的名称

// Bad
class NwClmDmg {
    private _lyt = 'dashboard';
    private Date _modymdhms;
}
// Good
class NewClaimDamage {
    private _layout = 'dashboard';
    private Date _modificationTimestamp;
}

使用可搜索的名称

如果可以在代码体的多个位置看到或使用变量或常量，则必须为其指定一个易于搜索的名称。

// Bad
for (let item = 0; item < 34; item++) {
    s += (t[item] * 4) / 5;
}
// Good
let realDaysPerIdealDay = 4;
const WORK_DAYS_PER_WEEK = 5;
let sum = 0;
for (var item = 0; item < NUMBER_OF_TASKS; item++) {
    let realTaskDays = taskEstimate[item] * realDaysPerIdealDay;
    let realTaskWeeks = (realTaskDays / WORK_DAYS_PER_WEEK);
    sum += realTaskWeeks;
}

使用一种一致的语言,确定并使用一种自然语言进行命名，例如使用混合的英语和Bahasa名称会导致不一致和难以理解。变量名称的长度没有限制,在每个代码范围中使用足够短和足够长的变量名。

尽管应该避免使用简短的，隐秘的变量名，而使用更长的描述性名，但这并不意味着您应该使用整个句子。极长的名称效率低下，因为它们会使代码变得肮脏，难以读取并导致输入错误。

在开始定义约定之前，这里有一些代码中常用的定界约定：

单词由下划线分隔。

const first_name;

单词用大写字母分隔。

const FirstName;

单词以大写字母分隔，首字母除外。

const firstName;

~~匈牙利表示法（陈旧，过时且不应使用）~~

该符号在变量名的开头描述了变量类型或用途，后跟一个说明变量功能的描述符。驼峰表示法用于分隔单词。

let arrCompanyGroup; // Array called “Company Group”
let sUserName;       // String called “User Name”
let iRandomSeed;     // Integer called “Random Seed”

命名约定

一致性和可读性是在变量命名中应该使用的关键思想。无论您如何选择命名变量，都应始终确保整个代码中的命名约定都是一致的。一致性使其他人可以更轻松地理解您的代码。大多数情况下，变量是使用camelCase声明的。

命名变量:

let firstName = 'JavaScript';

命名常量:

const SECONDS = 60;

命名布尔值:

像is，are，has之类的前缀可以帮助开发人员仅查看布尔变量即可将其与另一个变量区分开。

let isVisible = true;
let hasKey = false;

命名函数：

函数名称使用camelCase编写。始终以动词开头函数名称，该动词定义受该函数影响的实体名称与该函数一起尝试执行的操作。

getOrder();
fetchClaims();
deleteOrder();
connectToDatabase();

命名方法:

像函数一样，方法名称用camelCase编写。由于类名本身描述的是实体，因此在函数名中添加实体是没有意义的，因为在使用类方法时，它变得不言自明。

class User {
    delete(id) {
        // do something
    }
}
const user = new User();
console.log(user.delete(2)); // delete the user with ID = 2

命名类:

应该在自己的文件中使用PascalCase声明一个类。

class UserInfo {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}
const userInfo = new UserInfo(‘John’, ‘Doe’);

命名组件:

组件也广泛使用PascalCase声明。使用组件时，它会与本地HTML和Web组件区分开来，因为其首字母始终以大写形式书写。

function UserProfile(user) {
    return (
        <div>
            <span>First Name: {user.firstName}</span>
            <span>Last Name: {user.lastName}</span>
        </div>
    );
}

<div>
    <UserProfile
        user={{ firstName: ‘John’, lastName: ‘Doe’ }}
    />
</div>

命名私有属性：

类中的私有和受保护属性必须以单个下划线作为前缀。

class User {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.name = _getName(firstName, lastName);
    }
    _getName(firstName, lastName) {
        return `${firstName} ${lastName}`;
    }
}
var me = new User(‘John’, ‘Doe’);
console.log(me.name);

命名参数：

使用不言自明的参数标签，可以更明确地表明参数的意图。

// Bad
function getRemainder(x, y) {
    // do something
}
// Good
function getRemainder(number, divisor) {
    // do something
}

括号样式:

括号的两种常用约定是：K＆R括号和Allman括号。建议使用“ K＆R样式”括号，因为它们可以节省一行并且看起来很自然。

K＆R括号:

if(isVisible) {
    // do something
}

Allman括号:

if(isVisible)
{
    // do something
}

魔法数字

魔术数字表示我们正在分配没有明确含义的数字。有时我们将值用于特定目的，而没有在有意义的变量中分配值。问题在于，当有人使用您的代码时，该人不知道该直接值的含义。

//Bad 
for(let i = 0; i < 50; i++){
    //do something
}
//Good 
let NUMBER_OF_STUDENTS= 50;
for(let i = 0; i < NUMBER_OF_STUDENTS; i++){
    //do something
}

深层嵌套

有时我们使用难以理解的嵌套循环。处理该问题的方法是将所有循环提取到单独的函数中。假设我们有一个包含另一个数组的另一个数组的数组，并且我们想要最后一个数组的值。我们可以编写一个嵌套循环来满足我们的需求。但这不是正确的方法。在这里，我编写了可以执行相同操作的函数，但是此函数更简洁，更容易，重复性更低，更易于阅读和可重用。

// bad practice
const array = [ [ ['Shoaib Mehedi'] ] ]
array.forEach((firstArr) =>{
    firstArr.forEach((secondArr) => {
        secondArr.forEach((element) => {
            console.log(element);
        })
    })
})

// good practice
const array = [ [ ['Shoaib Mehedi'] ] ]
const getValuesOfNestedArray = (element) => {
    if(Array.isArray(element)){
        return getValuesOfNestedArray(element[0])
    }
    return element
}
getValuesOfNestedArray(array)

避免函数体量过大

当一个函数或一个类大得多时，建议将其分成多个整数。这将使我们的代码更容易，干净，易于理解并且可重用。假设我们需要加减两个数字。我们可以用一个功能做到这一点。但是好的做法是将它们分为两部分。如果有单独的功能，则可以在整个应用程序中重复使用。

// bad 
const addSub = (a,b) => {
    // add
    const addition = a+b;
    // sub
    const sub = a-b;
    return `${addition}${sub}`;
}

// good 

const add = (a,b) => {
    return a+b;
}

const sub = (a,b) => {
    return a-b;
}

代码重复

重复代码是指代码块在您的代码中重复多次。这意味着您的代码部分需要提取到函数中。这是我们之前在上面的“深层嵌套”中使用的示例。看一下第一部分：我们已经将同一件事重复了三遍。使单个功能执行相同操作的解决方案是更好的解决方案。同样，这是可重用的。

// bad 
const array = [ [ ['Shoaib Mehedi'] ] ];
array.forEach((firstArr) =>{
    firstArr.forEach((secondArr) => {
        secondArr.forEach((element) => {
            console.log(element);
        });
    });
});

// good 
const array = [ [ ['Shoaib Mehedi'] ] ];
const getValuesOfNestedArray = (element) => {
    if(Array.isArray(element)){
        return getValuesOfNestedArray(element[0]);
    }
    return element;
}
getValuesOfNestedArray(array);

避免一个字母的变量名

一个字母的变量是非常非常不好使用的东西。请勿将其用作变量名。但是在循环中，我们使用一些带有字母的变量，可以使用。

// bad
const q = () => {
    //....
}
// good
const query = () => {
    //....
}
// 这也没关系
for(let i = 0;i < 10; i++){
    //...
}

最后

❤️ 看完三件事:

如果你觉得这篇内容对你挺有启发，我想邀请你帮我个小忙：

点赞，让更多的人也能看到这篇内容，也方便自己随时找到这篇内容（收藏不点赞，都是耍流氓 -_-）；
关注我们，不定期分好文章；
也看看其它文章；

🎉欢迎你把自己的学习体会写在留言区，与我和其他同学一起讨论。如果你觉得有所收获，也欢迎把文章分享给你的朋友。

思维巡航（深圳）web前端内推（0～3年工作经验）！如果你对技术充满热...#掘金沸点# juejin.cn/pin/6957665…