语义化的变量名和方法名有利于阅读、理解和后期维护。笔者根据自己的工作经验小小总结一些变量和方法命名的技巧
不管是变量命名还是方法命名,语义必须与业务内容完全匹配,这是非常重要的前提
变量名尽可能简短、语义化
变量命名
在 JavaScript 中,有七种基本数据类型(null
、undefined
、string
、boolean
、number
、symbol和bigint
)和一种复杂数据类型(object
)。
变量命名主要以名词为主,其中要注意名词的单复数,该名词需要与业务保持一致
比如用户,可以写成 users
, 比如雇员,可以写成 employees
,这两个例子是名词复数形式,其值大概率是数组
const users = [] // or const employees = []
另一种变量是对象,比如用户资料,写成 userProfile
在实际项目中,对象和对象数组是最常用的数据结构,写好这两种变量的命名就成功一半
方法命名
方法(函数)代表用户操作,是一种用户行为。命名主要以动词为主,主要是动词+名词的形式,表示用户做了交互,改变了什么状态。
比如从服务器中获取用户,可以写成 getUsers
或者 fetchUsers
。
如果指定从哪个服务器里获取用户数,我们可以在动词+名词+定语,可以写成 getUsersFromServiceName
或者 fetchUsersFromServiceName
增删改查是前端的业务核心,以用户为例:
- 获取用户写成
getUsers
或者fetchUsers
- 更新用户信息写成
updateUser
- 删除用户写成
deleteUser
从所有用户中找出匹配的用户,可以写成 getUserById
/getUserByName
, 使用by+
查询条件
React
在 React 中声明组件时,组件名的第一个字母必须是大写。
// tooltip 组件
const Tooltip = () => {}
比如实现一个tooltip
组件,组件名是Tooltip
不是tooltip
由于 React 使用合成事件和JSX
语法,事件的使用形式如下所示
const App = () => {
return <button onClick={() => {}}>click</button>
}
笔者推荐方案是在事件前面加 on
,这只是一个建议。比如表单的提交,可以写成 onSubmit
、按钮点击可以写成onClick
/onBtnClick
等等
对于React Hooks的命名,官方推荐遵循useXXX
的形式,比如计数器叫useCounter
、防抖叫useDebounce