命名规范

原则：

Your code must be easily understandable for humans

通用规范

• 函数使用动词/动宾/主动宾结构。避免太短、神秘或者大段注释

// bad
function inv (user) { /* implementation */ }
// good
function inviteUser (emailAddress) { /* implementation */ }

• 名字需要能表明具体功能，不要过于抽象（比如 type / category）。不必担心过长的变量名，但是也不推荐太长的命名(超过50个字符)

let elapsed // bad
let daysSinceModification // good

let type, kind, variant, classification, subcategory  // bad
let packagingType, AgeGroup                           // good

function addDate(date, month) {// ...} // bad
function addMonthToDate(date, month) {// ... } // good

• 使用有意义、可读性好的字符，不要增加额外的、不必要的定语 (不推荐匈牙利命名法)

let nameString //bad
let name       // good

• 除了常用简写其他单词不简写，减少人脑处理的时间

let fName, lName // bad
let firstName, lastName // good

// bad
var locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach((l) => {
  ...
  // l是什么？
  dispatch(l);
});

// good
var locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach((location) => {
  ...
  dispatch(location);
});

• 避免重复描述, 当类/对象名已经有意义时，对其变量进行命名不需要再次重复。

// bad
var Car = {
  carMake: 'Honda',
  carModel: 'Accord',
  carColor: 'Blue'
};
// good
var Car = {
  make: 'Honda',
  model: 'Accord',
  color: 'Blue'
};

• 对功能类似的变量名采用统一的命名风格

// bad
getUserInfo()
getClientData()
getCustomerRecord()
//good
getUser()

命名约定(变量、函数、类)

• 变量，名词，使用小驼峰命名

let loadingModules // good

• 常量，名词，全部使用大写，多个单词可以用_分割

let LOADINGMODULES // good

• 类名，名词，使用大驼峰命名

class Engine {} // good

• 函数名，动词、动宾短语，使用小驼峰命名

let hasCommands = false // good

• Promise 对象，动宾短语的进行时

let loadingData = ajax.get('url'); // good

• 私有属性、变量和方法以下划线 _ 开头

let _loadingModules // good

• 函数命名拥有固定前缀

前缀	作用	返回值
can	判断是否可执行某个动作 ( 权限 )	函数返回一个布尔值。true：可执行；false：不可执行
has	判断是否含有某个值	函数返回一个布尔值。true：含有此值；false：不含有此值
is	判断是否为某个值	函数返回一个布尔值。true：为某个值；false：不为某个值
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象

• 复数变量加上s

let userList = [] // bad
let users = []    // good

文件规范（建议）

文件名规范

文件导出的内容与文件名保持一致，所见即所得

React 组件文件名：

(取自 airbnb )

• 文件命名采用帕斯卡命名法(大驼峰)

// bad
reservation-card.js
// good
ReservationCard.js

• 文件名与导出的组件名保持一致

高阶组件文件名：

(取自 airbnb )

• 文件命名：with + 功能(名词)

//bad 
leaveHookHoc.js
//good
withLeaveHook.js

markdown 等说明性文件名

• 文件命名采用全大写，多个单词使用 _ 分割

  // bad
  readme.md
  // good
  README.md

函数文件名：

• 文件名与导出的函数名保持一致

  // bad
  escape-test-for-browser.js
  // good
  escapeTextForBrowser.js

文件夹名规范

• 文件夹名要使用小写英文字符，使用 - 来区分单词

参考文献

clean code #强烈推荐
15个最佳实践
通用规范
vue 开发规范
前端开发规范
程序命名的一些提示