为变量命名最重要的考虑事项是,该名字要完全、准确地描述出该变量所代表的事物。通常,对变量的描述就是最佳的变量名。
命名注意事项
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 以后扩展使用。
abstract | arguments | boolean | break | byte |
---|---|---|---|---|
case | catch | char | class* | const |
continue | debugger | default | delete | do |
double | else | enum* | eval | export* |
extends* | false | final | finally | float |
for | function | goto | if | implements |
import* | in | instanceof | int | interface |
let | long | native | new | null |
package | private | protected | public | return |
short | static | super* | switch | synchronized |
this | throw | throws | transient | true |
try | typeof | var | void | volatile |
while | with | yield |
- 标记的关键字是 ECMAScript5 中新添加的。
5. 一致性
保持变量命名的一致性是很重要的,使用相似的命名约定可以提高代码的可读性。例如,如果使用驼峰命名法,则在整个项目中都应该使用该命名规范。
// 错误写法
const studentCount = 100
const student_age = 18
// 正确写法
// 驼峰
const studentCount = 100
const studentAge = 18
// 下划线
const student_count = 100
const student_age = 18
6. 变量长度适中
尽量避免过长的变量名,特别是在 HTML 和 CSS 中。过长的变量名可能会导致代码难以阅读和维护,太短的变量名无法传达足够的信息。
例如:计算机病毒事件总数
// 太短
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/
参考:代码大全