艾思软件-开发规范（前端）

 

版本：v1.0

日期：2022-01-15

一：命名规范

命名统一使用英文单词，要求简单，通俗易懂。

项目命名

使用小写字母，多单词采用 “ - ” 中划线拼接。

例如：my-world / world

文件夹命名

使用小写字母，多单词采用 “ - ” 中划线拼接。

例如：home-page / home

文件命名

使用小写字母，多单词采用 “ - ” 中划线拼接。

例如：home-page / home

变量命名

使用小驼峰命名。如果单文件中变量过多，可能会出现重名的情况，建议增加前缀来区分不同功能的变量。或者把变量拆分到不同的文件之中。

例如：maxHeight / userMaxHeight / homeMaxHeight

常量命名

全部使用大写字母。多单词采用 “ _ ” 下划线隔开。

例如：const USER_TYPE = “9001”；

函数命名

规范一：使用小驼峰命名。被继承的父类的私有函数需要增加下划线前缀 “ _getPrice() ”。

例如：showToast / _getPrice

规范二：根据函数作用，适当添加动词前缀。

例如：getSize / setSize / hasNumber

前缀请查看文档最底部“附件一：（函数命名动词前缀整合）”

二：注释规范

简单易懂的变量方法，尽量编写注释。复杂难懂的变量方法，必须编写注释

单行注释 //

在代码上一行编写单行注释，简单介绍下方代码用途、注意事项等内容。

多行注释 /* */ 或 /** */

方法必须使用多行注释。当变量或代码块复杂，单行注释不足以解释清楚的时候，也需要使用多行注释。

例如：

// 商品名称

goodsName: '猕猴桃',

 

/**

* 传入人员姓名，从数据库中查询该人员的手机号码

* @param {String} userName 姓名

* @return {Number} 手机号

*/

getUserMobile(userName){

......

return mobile;

},

三：CSS规范

1. class类名使用小写字母，多单词采用 “ - ” 中划线拼接。

2. id采用小驼峰命名。

3. scss、less中变量、函数、mixin统一采用小驼峰命名。

4. 缩进整洁有序。

四：项目规范

项目结构建议规范（实际根据具体需求逻辑进行调整）

src

api                           所有接口封装

asstes                        资源文件

- images                  图片

- videos

components                   所有组件

router                         路由

store                          状态管理

styles                         公共样式

utils                           公共函数库

view                          视图

- home                    视图文件需要分模块分文件夹存放

home.vue

home-detail.view

- user

五：附件

附件一：（函数命名动词前缀整合）

get获取/set设置	add增加/remove删除	create创建/destory移除
start启动/stop停止	open打开/close关闭	read读取/write写入
load载入/save保存	create创建/destroy销毁	submit 提交/commit 交付
backup备份/restore恢复	import导入/export导出	split分割/merge合并
inject注入/extract提取	attach附着/detach脱离	bind绑定/separate分离
view查看/browse浏览	edit 编辑/modify修改	select选取/mark标记
copy复制/paste粘贴	undo撤销/redo重做	insert插入/delete移除
add加入/append添加	clean清理/clear清除	index索引/sort排序
find查找/search搜索	increase增加/decrease减少	play播放/pause暂停
observe观察/listen监听	build 构建/publish发布	input输入/output输出
encode 编码/decode解码	encrypt 加密/decrypt 解密	send 发送/receive接收
pack 打包/unpack解包	parse 解析/emit 生成	connect连接/disconnect断开
download下载/upload上传	update更新/revert复原	refresh刷新/synchronize同步
lock锁定/unlock解锁	checkOut签出/checkIn签入	begin开始/end结束
push推/pull拉	expand展开/collapse折叠	begin起始/end结束
start开始/finish 完成	enter进入/exit退出	abort放弃/quit离开
debug调试/trace跟踪	collect收集/aggregate聚集	obsolete废弃/depreciate废旧
launch启动/run运行	compile编译/execute执行