前端JavaScript命名规范初稿01版（2022）

一、命名规则

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。

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

二、简单示例

1.命名使用准确含义（通常是业务上）的单词

data、info、flag、process、handle、manage、modify这些词汇的范围都太宽泛了，几乎适合每个业务，并不能让我们理解业务的逻辑。

// bad
getInfo
handleChapter
flag

// good
getBooks
approveChapter
isNumber

2.最能表达业务含义的单词前置

为什么要前置呢？我们习惯的阅读方式是从左往右，人通常对映入眼帘的第一个东西印象深刻。

// bad
totalUser

// good
userTotal

3.禁止自己创造缩写，可以使用常见的缩写（行业或团队内广泛使用）

我看到太多人在创建缩写，不仅变量的缩写，还有很多产品名的缩写。如果你很了解这些缩写，那么不会对你造成困扰，但如今的工作情况是，公司人员流动频繁，跨团队合作很多，当你参加一个会议，其他人的话语中夹杂着各种缩写，“我们刚在bpm里加上了qx”，试用你能明白他们在聊什么吗？

4.禁止使用拼音，除非是项目或产品名

5.不要拼错单词

现代的编辑器，如果单词拼错，一般都有智能的波浪线提醒，然而很多人还是视而不见。如果英语能力提高了，对拼写错误也挺敏感的。

6.优先从业务词汇表中获取

7.使用对仗词

add/remove
increment/decrement
open/close
begin/end
insert/delete

show/hide
create/destroy
lock/unlock
source/target
first/last

min/max
start/stop
get/set
next/previous
up/down
old/new

 * 总结规范

1.类命名是名词，表示一个对象，采用大驼峰命名法：class Account

2.方法命名是动词或动宾短语，表示一个动作，采用小驼峰命名法：function translateArticle()

3.变量命名，采用小驼峰命名法：userName

4.常量命名，采用大写蛇形命名法：MAX_NUM

5.文件模块命名是名词，采用小驼峰命名法：exportExcel.js

6.组件命名是名词，采用大驼峰命名法：UserHome.vue（index.vue除外）

7.css类命名采用串行命名法：.header-logo

8.图片命名采用串行命名法：add-plus.png

9.目录命名采用串行命名法：user-list

10.路由路径命名小驼峰命名法：/pay/payInfo

11.项目命名采用串行命名法：flow-portal

三、命名方法

1.驼峰命名法

大驼峰为首字母大写：EmployeeId 小驼峰为首字母小写：employeeId

// bad
EmployeeID
UserAPI

// good
EmployeeId
employeeId

UserApi
userApi

2.串行命名法

单词之间通过连字符“-”连接

background-color
header-logo

3.蛇形命名法

单词之间通过下划线“_”连接，比如“”

MAX_LIMIT
max_limit