前端开发怎么给变量起名

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

命名注意事项

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].citysfor (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].citysfor (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/

参考：代码大全