前端变量函数命名规则总结

引言

自己总结的一些常用的命名规范,好的命名不仅可以使代码看起来简洁,并且维护起来也方便了许多。作为初级程序员,不给他人增加负担也是需要学习的

不要嫌弃函数名过长

const getLocationPermission = () => {}

这是一个用来获取定位权限的函数。虽然这个名称很长,但是语义化清晰,看一眼就知道他是用来做什么的。这里可以拆分成为 3 部分 get 获取的意思 location 定位的意思 permission 权限的意思, 这样一个十分具有语义化的函数命名就完成了。

变量 / 函数 命名头部

一般为动词,后面加上具体要做什么的名词

前缀 前缀 + 命名 大意
get getUserInfo 获取用户信息
del/delete delUserInfo 删除用户信息
update / add updateUserInfo / addUserInfo 修改用户信息 / 增加用户信息
is isTimeout 是否超时
has hasUserInfo 有没有用户信息
handle handleLogin 处理登录
calc calcAverageSpeed 计算平均速度

_ : 一般用于表示私有的字段,不希望外部访问

例如:_index

当然也有写在尾部的风格

例如:index_

什么时候用 has , 什么时候用 is

has 常用于表示有没有或者是否包含 / 而 is 常用于表示是不是,是否

has的使用场景,例如

const hasLocationPermission = ?
// 有没有定位权限
const hasUserInfo = ?
// 有没有用户信息
...

is 的使用场景

const isShow = ?
// 是否(展示/显示)
const isTiemout = ?
// 是否超时
...

总结一下: has 是 “有没有” 包含的关系,而 is 则是 “是不是?”这个意思

一个好的命名需要遵循的规则

首先,你要清楚知道你这个函数是用来干什么的。比如我需要写一个函数用来处理对象、数组等数据是否为空。那么我可以这样写 isEmpty 是否为空。例如我需要一个函数来获取本地保存的用户信息,另一个是需要通过网络请求来获取用户信息那么我可以这样来编写

const getLocalUserInfo = ?;
const getNetWorkUserInfo = ?;

仔细拆分,获取关键的字眼。 ‘获取本地保存的用户信息’ => get(获取)local(本地)UserInfo(用户信息) 这样,一个十分具有语义化的函数命名就完成了

函数变量

使用小驼峰命名规则 / 组件构造函数使用大驼峰 / 组件文件名使用下划线开头

小驼峰

const getUserInfo

大驼峰

const GetUserInfo

下划线

const _getUserInfo

使用缩写

注意点1: 通用性,不能随便拉出来一个单词就使用缩写,例如我想写一个 class 用于管理整个用户本地存储信息的获取、修改、删除等操作。可以这样命名这个class :LocalUserInfoManage 或者说放到 同一个 localStroage 目录下,每一个再使用 UserInfoManage / UserConfigManage 等用于区分。 但是不能够 这样命名 lum ?

l (local)u (user / userInfo)m (manage)!!?

这样就比较迷惑了, 命名本来就是让其他人看起来更加简单易懂,而不是增加阅读负担

注意点2:保证统一性 既然某个单词使用了缩写, 那么最好都用缩写,不能有的写,有的不写

注意点3:缩写是作为一个单词存在,也就是这样的规则去命名的,例如: typeScript 缩写 ts这里第一个是小写,那么就是小写,后面的 Script 不再是单独的一个单词,应该是与前面是属于一个单词。转换规则 typeScript => tscript => ts , 同理如果 TypeScript => Ts , 这是只在命名的情况下的转换

注意点4:不要通过删除单词中的字母来达到缩写的目的

一些不好的命名:

const n = ?							// 无意义的命名
const nError = ?				// 不明确的命名
const wgcComponents = ? // 不明确的命名,或者就你的团队能看懂,一旦有人员变动维护就会困难
const scid = ?					// 不能用中文,也不能用中文缩写  sc (删除)

比较通用的缩写

源单词 缩写
message msg
information info
button btn
background bg
response res
request req
image img
utility util
prroperty prop
source src
boolean bool
error err
settings set

以上有很多其实在平时已经有使用到,也还有很多没有写进去的,使用缩写命名的时候一定要注意规范,参考第六点。

常量命名

关于常量的命名,一般不会改变的变量,这类变量比较固定(例如:一天有多少毫秒,180deg 或者 xxx deg的选择角度,再就是和其他人约定好的魔鬼数字等等)他们的共同点是我们无法使其变化,也可以说我们不希望他会被改变。

这种常量的话一般是使用全大写,每一个单词使用 _ 下划线分开。 例如

一天毫秒数综合

const DAY_MILLI_SECOND_SUM = ?

单词拼接 加深语义化

by: 通过

const aid = getUserAid()

这段是获取用户 aid , 使用 get user aid, 无可厚非,但有时候我们并不需要去从用户信息中拿,而是直接从本地拿。

此时就可以加上 by 了, 并且语义表现上也会丰富

const aid = getAidByLocal(); // 通过本地获取 Aid
const aid = getAidByUserInfo(); // 通过用户信息获取 Aid

参考命名:

document.getElementById
document.getElementByClassName
...

引入自定义组件

现在你有一个组件 picker ,基于 picker 封装了一个时间选择器目录结构如下

---conponents
   --- picker
       --- index.jsx
       --- date.jsx

那么引入的命名应该是 父级文件名 + 组件名 / 或者你直接把组件的文件名命名成这样也可以的

import pickerDate from 'component/picker/date.jsx';

文件命名的风格

_ 或者 – 分割单词时,一定要统一,二者选一个就可以

--- conponents
    --- test-file1
    --- test_file2

以上就是前端命名规则总结的详细内容,更多关于前端命名规则的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:

  • .Net中控件的命名规则
  • Python 变量命名规则和定义变量详解
  • Pytest之测试命名规则的使用
  • 基于pycharm 项目和项目文件命名规则的介绍
  • 解决Mybatis-plus找不到对应表及默认表名命名规则的问题
  • 解决mybatis plus 驼峰式命名规则问题
  • 一文轻松掌握python语言命名规范规则
张贴在2