前端起名规范

前端起名规范

基本原则

• 变量名:

参照 restful, 总体为一个名词, 尽量不要出现动词 ( redux 中的 action 除外 ) , 只用于描述资源或资源状态, 不描述动作.

一般要遵循名词放最前, 定语后置

如果用于描述状态, 前面可以加 is

选中的课程 (❌)select_course/selected_course (✅) course_selected

是否选中 (❌)check (✅)is_checked/checked/is_xxx_checked

某个元素是否显示 (❌) show_xxx (✅) is_xxx_show

• 方法名: (下述 xxx 的命名请参考变量名, 尽量不要有动词)

方法名应尽量使用动宾结构描述清楚方法能做的事情, 若有返回值, 应带上相应动词.

一个方法名应只有一个动词.

若觉得描述清楚后感觉方法名过长, 请思考是不是方法包含内容过多或者方法抽象不到位(这会导致方法难以扩展, 请重视)

以下按照返回值给出一些例子:

返回布尔值: check_xxx(_xxx)

检查是否为一个正确的手机号码: check_phone_number_correct

返回字符串/数组/对象: get_xxx

获取老师列表: get_teacher_list

返回jsx: genarate_xxx (一般返回 jsx 的都是根据数据生成 element, 所以定义为 genarate)

根据老师信息生成一个jsx: genarate_by_teacher_info

返回一个请求: fetch_xxx

返回一个 promise(非请求): xxx(某动作)_async

无返回值的常见例子:

事件绑定: handle_xxx

antd 组件props 的 onxxx 事件: 建议命名法为 handle_${element_name}_${event_name}

Select 中的 onchange: handle_(xxx_,有需要的话)select_change,

更新 redux : update_store_of_xxx

定时器的回调函数: add_xxx_timer/remove_xxx_timer

跳转到某某页面: redirect_to_${route_name}

• 单复数形式：

复数形式为了避免单复数同形与看少了一个 s，统一用 xxx_list表示

课程(一堆) (❌)courses (✅)course_list

• 表明物体状态时, 命名倾向于物体的常见状态为 true(参考数据库设计)

如某弹窗的显示状态, is_modal_show 与 is_modal_hide 都可以表达, 那应该用哪一个呢

答案是后者, 因为弹窗多数情况下是隐藏的 (你弄个一直置顶的弹窗是要做甚??)

如用户的是否冻结状态, 倾向于使用 is_user_active (因为大多数用户应该是激活的)

如用户男女性别, 倾向于使用 is_user_male (跟男女权没有关系拉> <)

• 注意时态

loaded/loading/will_load: 已加载/加载中/将要加载

• 区分字典( dictionary )与常量 ( constant ) 与 映射表 ( map )

常用词术语表

中文	英文(括号中为被替代词)	备注
图片	pic (picture image img)	image 与 dom 重名 所以比较倾向<br />用 picture 但是全称太长了
课程	course
一节课	lesson	lesson 指的是课时 不能用于指一类课
手机号码	phone_number
文件(资源)	file
文档	doc	document 的简称, 复数为 docs, 请注意与file 的区别
(本地)路径	path
网页地址	url
移去	remove	注意与 delete 的区别, 移去一般可以再加回来<br />(即可以有相应的 add 方法), 而 delete 不能
添加	add(create)
上传/下载	upload/download
导入/导出	import/export	注意这两个词是保留词, 不能单用
属性(对象的)	prop(key)	两个都挺像 但是倾向于与 object 的<br />方法名一致(setproperty 等)
属性(元素的)	attr	attribute 的全称
元素	element	dom 是文档对象模型. 不要用于描述一个具体的元素
按钮	btn	button 的缩写, 用缩写是为了避免总有人打成 botton
更新编辑	update(edit/modify)	感觉 update 的词义比较广, 一般用 edit/modify 的, 都能替换成 update
转换	transform(trans/convert/change)
暂时的	temp
统计	statistics
计数	count	注意 count 的意思偏向于计数, 统计数据等用上面的
确认/取消	confirm/cancel
提交	submit(save/refer)	虽然很多编辑页的按钮上写的都是<br />保存, 但是前端这边执行的应该是<br />提交, 所以感觉用 save 不是很妥当?
某某的数量	n_xxx	抄后端的, 意思是n(umber_of)_xxx, <br />替换掉 xxx_number 这种说法
前进/后退	forward/backward
清空	empty(clear)	clear 似乎更偏向于移除(remove)
(组件之间)发送消息	emit(send)
男/女性	male/female(man/woman)	male/femele 比较正式
字段(名)	field(key/prop)
(输入等)合法的	validated
正则	pattern(regexp/reg)	业界一般都用 pattern, 向业界看齐吧
容器	container(wrap)	这个一般用在 css 上