为变量命名最重要的考虑事项是，该名字要完全、准确地描述出该变量所代表的事物。通常，对变量的描述就是最佳的变量名。

命名注意事项

1. 使用有意义的变量名

变量名应该能够清晰地描述变量的用途和含义，使其易于理解和使用。避免使用无意义的缩写、单个字母或数字来命名变量。

例如：计算机病毒事件总数

// 错误写法
const total=100
// 错误写法
const virusTotal=100
// 正确写法
const computerVirusEventsTotal=100

2. 遵循驼峰命名法

在 JavaScript 中，通常使用驼峰命名法（Camel case）来命名变量。首字母小写，每个单词的首字母大写。 例如：

const myVariable='xxx'
const firstName='xxx'

ps：如果在接口请求中，后端使用下划线定义，前后端尽量统一

const params={
  start_time:'xx',
  end_time:'xx'
}
await api.xxx(params)

3. 区分大小写

在 JavaScript 中，变量名是区分大小写的，因此变量名中的大小写字母是不同的。例如，myVariable 和 myvariable 是两个不同的变量。

let myVariable=1111
myvariable=2222//报错

4. 不要使用关键字和保留字

避免使用 JavaScript 的保留关键字（例如，var、function、if 等）作为变量名，以避免产生冲突。

const var=aa //Uncaught SyntaxError: Unexpected token 'var'

JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

* 标记的关键字是 ECMAScript5 中新添加的。

5. 一致性

保持变量命名的一致性是很重要的，使用相似的命名约定可以提高代码的可读性。例如，如果使用驼峰命名法，则在整个项目中都应该使用该命名规范。

// 错误写法
const studentCount=100
const student_age=18

// 正确写法
// 驼峰
const studentCount=100
const studentAge=18
// 下划线
const student_count=100
const student_age=18

6. 变量长度适中

尽量避免过长的变量名。过长的变量名可能会导致代码难以阅读和维护，太短的变量名无法传达足够的信息，通常8-20位字符长度是容易调试的。

例如：计算机病毒事件总数

// 太短
const total=100
// 太长
const totalNumberOfComputerVirusEvents=100
// 适中
const computerVirusTotal=100

7. 拼写正确

变量名一定要拼写正确，否则会增加出错的概率，建议安装 vscode 插件 Code Spell Checker

//  Form 写成了 From
submitFrom(){}
// data date分不清
date data
// main mian分不清
main mian

8. 计算值限定词置后

表示计算结果的变量：总额，平均值，最大值，等等，使用Total，Sum，Min，Max

// 员工总数
const staffTotal=11
// 最大宽度
const widthMax=100

9. 变量常用的对仗词

对仗词的使用要准确，这样可以提高代码可读性。

注意：像unlocked，invisible，这种是完整单词，有时候我们会误解用驼峰。

begin/end

first/last

locked/unlocked

min/max

next/previous

old/new

visible/invisible

source/target

up/down

const timeBegin=''
const timeEnd=''

10. 可读性的缩写

通过消除冗余的单词，使用简单的同义词和其他缩写策略来创建更好的端变量名。

一些指导原则

1、使用标准创建的缩写，如下

• len：数组或字符串长度
• el：元素
• obj：对象
• arr：数组
• str：字符串
• num：数字
• res：结果
• ctx：上下文
• e：事件
• cb：回调函数
• err：错误
• req：请求
• res：响应
• doc：文档
• win：窗口
• url：网址
• id：元素id
• cls：元素class

2、去掉and，or，the等虚词

3、缩写要一致，例如 数字，要么全部用Num，要么No，不能混用

特定类型命名

循环变量

通常我们会使用i，j，k来作为循环变量，如果逻辑简单，代码量少还行。

如果一个变量要在循环之外使用，或者多层循环，代码较多的情况下，建议使用更有意义的名字，因为代码经常会修改，扩充或者复制到其他程序中，使用i，j这样的变量很容易让我们忘记它本身代表的含义。让人误写的几率也会变大。

例：

// 传统写法
for (let i=0; j < provinceArr.length; i++) {
  let cityArr=provinceArr[i].citys
  for (let j=0; j < cityArr.length; j++) {
      if (cityArr[j]) {
        provinceArr[i].name='xxx'
        cityArr[j].xxxx='xxx'
        // xxx
      }
    }
 }
// 推荐写法
for (let provinceIndex=0; provinceIndex < provinceArr.length; provinceIndex++) {
  let cityArr=provinceArr[provinceIndex].citys
	for (let cityIndex=0; cityIndex < cityArr.length; cityIndex++) {
      if (cityArr[cityIndex]) {
         provinceArr[provinceIndex].name='xxx'
         cityArr[cityIndex].xxxx='xxx'
        // xxx
      }
    }
 }

临时变量

临时变量用户存储计算的中间结果，作为临时占位符，通常被赋予temp，x或者其他一些缺乏描述性的名字。

使用temp这样的变量，会让程序员更加随意的对待这些变量，从而增加出错的可能，因此使用准确而却具有描述性的变量名更有意义。

// 获取资产数据
async getAssetsList({ offset, limit, query='' }) {
  let temp=[];
  if (typeof this.request==='function') {
    // 原本写法
    temp=await this.request({ offset, limit, query });
    this.options=[...this.options, ...temp];
  	// 建议写法
    const assetData=await this.request({ offset, limit, query });
    this.assetOptions=[...this.assetOptions, ...assetData];
  }
}

布尔变量

给布尔变量赋予隐含“真/假”的名字

典型的布尔变量名如下

done 表示某件事情已经完成

error 表示错误已经发生

found 表示某个值已经找到

success/ok 表示一项操作是否成功

1、使用肯定的布尔变量，否定的名字如notFound，undone ,如果取反会比较难阅读。

// 难理解
if (notFound) 
if (!notFound) 
// 推荐
if (found)
if (!found)

2、我们有时候会在布尔变量前+is，isFound，isError，这样就变成了一个疑问句，可读性会更差。

// 可读性差
if (isFound)
// 建议
if (found)

常量命名

使用全大写字母和下划线（_）作为单词之间的分隔符。例如：MAX_WIDTH、DEFAULT_COLOR。

const EMPTY_VALUE='-';

const FORM_CATEGORY={
  GRID: 'grid',
  ARRAY_CARDS: 'arrayCards',
  ARRAY_ITEMS: 'arrayItems'
};

方法命名

获取值

如果函数是为了获取值(函数最后会返回一个值的)，函数前面建议带有get。

//根据 ID 获取用户信息
function getUserInfo(id){
    return xx
}

设置值

如果函数是为了设置值，函数前面建议带有set。

//设置用户信息
function setUserInfo(){
    
}

处理动作

如果函数是为了处理一些操作，比如登录，注册，渲染列表等。那么就建议命名前面带有handle。

//分页操作
handleChangeCurrent(val){
    
}
//注册操作
handleRegister(){
    
}

注意：某些相对的的方法，比如openDialog，closeDialog，open，close是一组相对的动作，用时候会出现showDialog和closeDialog的情况，尽量避免。

文件和文件夹命名

使用小写字母和连字符（-）作为单词之间的分隔符。

原因：git（可通过配置解决git config core.ignorecase false）和vscode（windows）引入文件对大小写不敏感。

|-- views
    |-- components
		|   |-- config
		|       |-- hello-world.vue
    |-- pages
	  |   |-- incident-config
	  |       |-- index.vue
   

CSS类名命名

• 使用连字符（-）作为单词之间的分隔符。例如：container、main-content。
• 使用有意义的名词或者形容词来描述元素的作用或者样式。例如：header、red-button。

.vis-edit-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  .scene-info {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    .btn{
      display: flex;
      align-items: center;
    }
  }

常用的命名

• 头：header
• 内容：content/container
• 尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 页面外围控制整体布局宽度：wrapper
• 左右中：left right center
• 登录条：loginbar
• 标志：logo
• 广告：banner
• 页面主体：main
• 热点：hot
• 新闻：news
• 下载：download
• 子导航：subnav
• 菜单：menu
• 子菜单：submenu
• 搜索：search
• 友情链接：friendlink
• 页脚：footer
• 版权：copyright
• 滚动：scroll
• 内容：content
• 标签页：tab
• 文章列表：list
• 提示信息：msg
• 小技巧：tips
• 栏目标题：title
• 加入：joinus
• 指南：guide
• 服务：service
• 注册：register
• 状态：status
• 投票：vote

总结：为什么需要这些命名规则？

命名规则可以带来以下的好处

1、让开发者更多地按规矩行事，集中精力关注代码逻辑。

2、有助于在项目之间传递知识，名字的相似性能让我们更容易理解不熟悉的变量是该做什么的。

3、有助于开发者在新项目中快速的学习代码，每个人的命名规则都是一致的。

4、有助于减少名字增生，统一的规则下，不会出现一个对象两个名字的情况，像pointTotal和totalPoints。

另外，推荐几个变量命名神器

https://unbug.github.io/codelf/

https://fanyi.phpstudyhelper.com/