成语大全网 - 经典成语 - 艾思软件:前端开发规范文档

艾思软件:前端开发规范文档

开发规范(前端)

版本: 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

五:附件

附件一:(函数命名动词前缀整合)