前端命名规则总结

2024-10-29 18:54:52

引言

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

不要嫌弃函数名过长

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

以上就是前端命名规则总结的详细内容，更多关于前端命名规则的资料请关注我们其它相关文章！

Pytest之测试命名规则的使用

背景: pytest以特定规则搜索测试用例,所以测试用例文件.测试类以及类中的方法.测试函数这些命名都必须符合规则,才能被pytest搜索到并加入测试运行队列中. 默认搜索规则: 如果pytest命令行有指定目录,则从该目录中开始查找测试用例文件,如果没有指定,则从当前运行目录开始查找文件.注意,该查找是递归查找,子目录中的文件也会被查找到. 并不是能够查找到目录下的所有文件,只有符合命名规则的文件才会被查找.默认规则是以test_开头或者以_test结尾的.py文件. 在测试文件中查找Test
解决Mybatis-plus找不到对应表及默认表名命名规则的问题

错误截图在测试使用Mybatis-plus查询数据库时报错报错信息大概意思时在数据库中没有user这张表而实际上确实没有尝试我这里application.ymml没有与Mybatis-plus的相关配置为探究在没有配置的情况下时Mybatis-plus默认时按照什么来定义表名的猜想有两个地方有可能(因为只有这两个地方是user) 先测试第一个可以看到和之前的错误一样没有效果测试第二个点虽然报错,但是证明了在没有配置表名的情况下mybatis-plus是默认按照实体类名去查询数
.Net中控件的命名规则

一.基本数据类型前缀数据类型数据类型简写 Array arr Boolean bln Byte byt Char chr DateTime dtm Decimal dec Double dbl Integer int Long lng Object obj Short shr Single sng String str 二.ADO.NET对象前缀控件类型控件类型简写 Command cmd Connection conn DataAdapter da DataColumn dcol Da
Python 变量命名规则和定义变量详解

目录一.定义变量二.定义变量的规则总结一.定义变量语法规则: 变量名 = 值定义变量的语法规则中间的'=',并不是数学中等于号的意思,在编程语言中而是赋值的意思.赋值:其实程序在执行的时候,先计算等号('=')右边的值,然后把右边的值赋值给等号左边的变量名中. 注意点:变量名自定义,要满足标识符的命名规则. 二.定义变量的规则标识符: 变量命名规范 - 标识符命名规则是Python中定义各种名字的时候的统一规范,具体规范如下: 1.由数字.字母.下划线组成 2.不能以数字开头 3.
一文轻松掌握python语言命名规范规则

和C/C++.Java等语言一样,python在命名上也有一套约定俗成的规则,符合规范的命名可以让程序的可读性大大增加,从而使得代码的逻辑性增强,易于自己和其他协作者在以后的拓展中理解代码的意义,从而提高编写代码的效率. 我们在平常编写程序的时候需要注意以下几点: 一.python变量名命名的硬性规则 1.1. 变量名大小写敏感 python变量名区分大小写,也就是Student和student在python语言中代表两个不同的名字. 1.2. python的变量名字中可以包含英文.下划线.数字
解决mybatis plus 驼峰式命名规则问题

在我们使用mybatis plus 时, mybatis plus 可以帮我们自动封装我们的实体类用来查询添加,当我们遇见我们的尸体类名与我们的表字段是驼峰写法时: 我们在数据库的字段名也是 userCode 但是如果我们不设置mybstis plus 默认的驼峰式编码在mybatis plus 则会默认把驼峰式编码写成 user_code, 这种下划线格式的字段, 这时你会发现你的代码会出错,它会提示你user_code字段不存在解决方案: springboot : 1. applictio
基于pycharm 项目和项目文件命名规则的介绍

01命名规则: 项目名前面一数字编号,随着知识点递增,编号递增例如: 01_python基础.02_分支.03_循环每个项目下的文件名建议使用小写字母,数字和下划线文件名不能以数字开始例如: lile_01_hello.py 02.单行注释 1.以#开头,#右边的所有东西都被当作说明文字,而不是真正执行的程序,只起到辅助说明作用 2.在程序开发时,同样可以使用#在代码后面(旁边)增加说明性的文字注意:为了保证代码的可读性,注释和代码之间至少要有两个空格实例如下: 3.多行注释(块注释
前端命名规则总结

目录引言不要嫌弃函数名过长变量 / 函数命名头部什么时候用 has , 什么时候用 is 一个好的命名需要遵循的规则函数变量使用缩写比较通用的缩写常量命名单词拼接加深语义化引入自定义组件文件命名的风格引言自己总结的一些常用的命名规范,好的命名不仅可以使代码看起来简洁,并且维护起来也方便了许多.作为初级程序员,不给他人增加负担也是需要学习的不要嫌弃函数名过长 const getLocationPermission = () => {} 这是一个用来获取定位权限的函数
Angular.JS中指令的命名规则详解

命名规范同一个AngularJS指令,在js文件和html文件中有着不同的命名规范:在js文件中使用标准的小驼峰命名法,在html文件中使用"小写字母+连接符"的命名法.如下表所示在js文件中在html文件中 ngApp ng-app myDirective my-directive 处理机制 AngularJS之所以选择这样的命名方式,是因为html文件不区分大小写,而js文件则对大小写敏感(myDir和mydir在js文件中是不同的指令,但html看来是同一个指令),为了避免
MFC命名规则汇总

本文汇总了MFC中消息.控件.对话框等等的命名规则,作为初学者应详细了解并遵守这类规则.详细规则如下所示: 一.MFC中ID 编号原则: IDC_:控件的ID命名前缀(Control) IDM_:菜单的ID命名前缀(Menu) IDD_:对话框的ID命名前缀(Dialog) IDR_:资源的ID命名前缀(Resource) IDS_:字符串的ID命名前缀(String) IDB_:位图资源的ID命名前缀(Bitmap) 二.MFC系统消息前缀小集 ABM 应用程序桌面工具条appl
Java命名规则详细总结

1. JAVA源文件的命名 JAVA源文件名必须和源文件中所定义的类的类名相同. 2. Package的命名 Package名的第一部分应是小写ASCII字符,并且是顶级域名之一,通常是com.edu.gov.mil.net.org或由ISO标准3166.1981定义的国家唯一标志码.Package名的后续部分由各组织内部命名规则决定,内部命名规则指定了各组件的目录名,所属部门名.项目名等. 3. Class/Interface的命名 Class名应是首字母大写的名词.命名时应该使其简洁而又具有
C#常用的命名规则汇总

本文详细汇总了C#常用的命名规则.分享给大家供大家参考.具体如下: Pascal 规则每个单词开头的字母大写(如 TestCounter). Camel 规则除了第一个单词外的其他单词的开头字母大写. 如. testCounter. Upper 规则仅用于一两个字符长的常量的缩写命名,超过三个字符长度应该应用Pascal规则. 例如: 复制代码代码如下: public class Math { public const PI = ... public const E = ... pu
超全面的javascript中变量命名规则

前言变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的规则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的.良好的书写规范可以让你的JavaScript代码更上一个台阶,也更有利于团队的再次开发和阅读代码. 全名原则变量名区分大小写,允许包含字母.数字.美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型尽量避免使用没有意义的命
你必须知道的JavaScript 变量命名规则详解

变量命名还应遵守以下某条著名的命名规则: 著名的变量命名规则Camel 标记法首字母是小写的,接下来的字母都以大写字符开头.例如: 复制代码代码如下: var testValue = 0, secondValue = "hi";Pascal 标记法首字母是大写的,接下来的字母都以大写字符开头.例如: 复制代码代码如下: var TestValue = 0, SecondValue = "hi";匈牙利类型标记法在以 Pascal 标记法命名的变量前附加一个小
C++代码规范之命名规则

一.命名的两个基本原则1.含义清晰,不易混淆:2.不和其它模块.系统API的命名空间相冲突. 二.命名通则1.在所有命名中,都应使用标准的英文单词或缩写:不得使用拼音或拼音缩写,除非该名字描述的是文特有的内容(如半角.全角.声母.韵母等):除非必要,不要用数字或较奇怪的字符来定义标识符.2.所有命名都应遵循达意原则,即名称应含义清晰.明确.3.所有命名都不易过长,应控制在规定的最大长度以内.4.所有命名都应尽量使用全称.5.命名中若使用特殊约定或缩写,则要有注释说明. 6.自己特有的命名风格,要
基于JavaScript中标识符的命名规则介绍

JavaScript中的标识符的命名有以下规则: 由字母.数字.$._组成以字母.$._开头不可以使用保留字!!! 要有意义!!!!!!! 标识符的命名规范: 1.驼峰命名法除标识符的第一个单词外,其余单词的首字母大写,例如:trueName 2.蛇型命名法单词之间用_隔开,例如:true_name (注:大多数情况下,以1~2个下划线开始的标识符,代表特殊变量或内部变量,我们在自己定义的时候,尽量避免使用以下划线开头的变量) (粗浅的见解,望批评指正) 以上这篇基于JavaScript
python的命名规则知识点总结

python命名规则命名风格 python几种不同命名风格驼峰式命名法(WjW) 混合式命名法(wjWj) 大写(WJWJWJ)或大写加下划线(WJWJWJ) 前缀(wjing)或后缀(ingwj)下划线,有时双下划线变量 python变量分为: (1)常量 (2)公有和私有变量 1.常量常量全局变量,使用大写加下划线.指定的变量表示一个常数值. BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(file))) 2.命名