每个前端开发都应该知道的10个命名规范

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

相信大家都接手过老项目，一些初级开发者的随意命名，实在是接手的人看到想吐。遵循标准命名约定可以提高代码可读性，让项目的可维护性更高。然而，许多开发人员并不知道如何正确使用命名约定，尤其是多个开发者经手后，随意的命名让项目变得难以维护。

让我们一起看下什么是好的命名方式。

1.变量命名

JavaScript的变量名是区分大小写的。小写和大写字母是不同的。例如，你可以定义三个独特的变量来存储一只狗的名字，示例如下：

var DogName = 'Scooby-Doo';
var dogName = 'Droopy';
var DOGNAME = 'Odie';
console.log(DogName); // "Scooby-Doo"
console.log(dogName); // "Droopy"
console.log(DOGNAME); // "Odie"

然而，最值得推荐的声明JavaScript变量的方式是驼峰命名。可以对JavaScript中所有类型的变量使用驼峰命名，以确保不会出现多个同名的变量。

// bad
var dogname = 'Droopy'; 
// bad
var dog_name = 'Droopy'; 
// bad
var DOGNAME = ‘Droopy’; 
// bad
var DOG_NAME = 'Droopy'; 
// good
var dogName = 'Droopy';

变量语义化，变量的名字应该描述存储的值。例如，如果需要一个变量来存储狗的名字，应该使用 dogName 而不是只使用 Name。

// bad
var d = 'Scooby-Doo';
// bad
var name = 'Scooby-Doo';
// good
var dogName = 'Scooby-Doo';

2.布尔值命名

当涉及到布尔变量时，应该使用 is 或 has 作为前缀。例如，一个布尔变量来检查狗是否有主人，应该使用 hasOwner 作为变量名。

// bad
var bark = false;
// good
var isBark = false;
// bad
var ideal = true;
// good
var areIdeal = true;
// bad
var owner = true;
// good
var hasOwner = true;

3. 函数命名

JavaScript 函数名称也区分大小写。因此，与变量类似，推荐使用驼峰命名。

除此之外，还应该使用描述性名词和动词作为前缀。例如，声明一个函数来查询名字，函数名应该是 getName。

// bad
function name(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

// good
function getName(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

4. 常量命名

JavaScript 常量也区分大小写。但是，常量应该大写，因为它们是不变的变量。

var LEG = 4;
var TAIL = 1;
var MOVABLE = LEG + TAIL;

如果变量声明名称包含多个单词，使用下划线分隔。

var DAYS_UNTIL_TOMORROW = 1;

5. 类命名

JavaScript类的命名规则与函数一样。必须使用描述性的标题来解释这个类的功能。

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
  }
}

var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

6. 组件命名

JavaScript组件在React、Vue等前端框架中被广泛使用。建议使用Pascal命名法（大驼峰式命名法）。

// bad
function dogCartoon(roles) { 
  return ( 
    < div > 
      < span > Dog Name: { roles.dogName } < /span> 
      < span > Owner Name: { roles.ownerName } < /span> 
    < /div> 
  );
} 

// good
function DogCartoon(roles) { 
  return ( 
    < div > 
      < span > Dog Name: { roles.dogName } < /span> 
      < span > Owner Name: { roles.ownerName } < /span> 
    < /div> 
  );
}

由于首字母总是大写，因此组件在使用时会很容易被看到。

<div> 
  <DogCartoon 
    roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }} 
  />
</div>

7. 方法命名

JavaScript 函数和方法的结构非常相似，命名约定规则也是相同的。推荐使用驼峰命名，并使用动词作为前缀。

class DogCartoon {
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
  }

  getName() { 
    return '${this.dogName} ${this.ownerName}'; 
  }
}

var cartoon= new DogCartoon('Scooby-Doo', 'Shaggy');

console.log(cartoon.getName());
// "Scooby-Doo Shaggy"

8. 私有函数命名

下划线 _在 MySQL 和 PHP 等语言中广泛用于定义变量、函数和方法。但在 JavaScript 中，下划线用于表示私有变量或函数。

例如，如果您有一个私有函数名称，如 toonName，则可以通过添加下划线作为前缀 (_toonName) 将其表示为私有函数。

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
    this.name = _toonName(dogName, ownerName); 
  } 
  _toonName(dogName, ownerName) { 
    return `${dogName} ${ownerName}`; 
  } 
}

var cartoon = new DodCartoon('Scooby-Doo', 'Shaggy'); 

// good
var name = cartoon.name;
console.log(name);
// "Scooby-Doo Shaggy" 

// bad
name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
console.log(name);
// "Scooby-Doo Shaggy"

9. 全局变量命名

对于全局 JavaScript 变量，没有特定的命名标准。建议对可变全局变量使用驼峰式大小写，对不可变全局变量使用大写。

10. 文件名命名

大多数 Web 服务器（Apache、Unix）在处理文件时都区分大小写。例如，flower.jpg 不是 Flower.jpg。

但是，如果从不区分大小写的服务器切换到区分大小写的服务器，可能会出现问题。所以，建议在所有服务器中使用小写文件名，尽管它们支持区分大小写。