一些变量和方法命名的思考

66 阅读2分钟

语义化的变量名和方法名有利于阅读、理解和后期维护。笔者根据自己的工作经验小小总结一些变量和方法命名的技巧

不管是变量命名还是方法命名,语义必须与业务内容完全匹配,这是非常重要的前提

变量名尽可能简短、语义化

变量命名

在 JavaScript 中,有七种基本数据类型(nullundefinedstringbooleannumbersymbol和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