前端（内部）-编程规约

概述

● 提高团队之间的协作能力
● 提高代码的复用利用率
● 写出质量更高，效率更好的代码
● 为后期维护提供更好的支持

项目代码风格

● JS 使用 ES6/7 语法
● 使用 2 个 Space 缩进
● 方法括号前要有一个空格
● 代码行后要空一行
● 用 UTF-8 编码
● 换行符是 LF

GIt提交规约

● 不要上传不相关的文件和文件夹，请使用 .gitignore进行设置
● 提交代码前请先拉取，然后再按需提交
● 不要直接上传配置文件，采用替换
● 工作目录要及时更新，不要和GIT服务器有太大的差别
● 提交代码时，如果出现冲突，必须仔细分析解决，不可以强行提交
● 提交代码之前先在本地进行测试，确保项目能编译通过，且能够正常运行，不可盲目提交
● 必须保证GIT上的版本是正确的，项目有错误时，不要进行提交
● 提交时注意不要提交本地自动生成的文件
● 提交必须写注释（查看git注释）

命名规约

项目基本结构

├── README.md                   帮助文件
├── config                      配置示例文件
├── package.json                package 配置文件
├── postcss.config.js           postcss 配置文件
├── resource                    资源文件夹
│   ├── img                     图片
│   └── pdf                     pdf
└── src                         项目目录├── assets                  静态资源文件├── components              组件├── layouts                 布局├── middleware              中间件├── pages                   页面├── plugins                 插件├── static                  静态文件└── store                   数据状态控制

文件命名规约

● components内使用驼峰命名法，例如：Footer，CourserList
● page内使用首字母小写，第二个单词大写，例如：addList
● view内的文件夹命名全部小写，例如：courserlist
● 文件夹内第一个默认文件，一般为index.vue。

变量和方法命名规则

● 使用小驼峰式命名法（camelCase），允许字母和数字，第一个字符不能是数字，首字母小写，动词在前。
● 命名要遵循编程语言规范
● 命名只能是字母(a-z A-Z)，数字(0-9)，下划线(_)的组合，并且之间不能包含空格，数字不能放在变量名首位。
● 命名不能使用编程语言的保留字
● 命名要使用英文，不要使用中文或者拼音形式的变量名
● 命名要使用有意义的名称，通过变量名能大概反映出其具体的用途
● 命名不要使用太长的名称，例如50个字符，影响阅读
● 方法名要以动词开始，例如addUser、deleteUser
● 在相关业务代码中保持命名规则的一致性

规范的动词：

can    是否可执行
has    是否含有
is     是否为
get    获取
set    设置
del    删除
post   提交
load   加载

文件规范

注释

页面头部添加开发时间等作者信息


<!--* @Author: xxx.xx* @Date: 2021-03-25 14:24:01* @LastEditors: xuhui.ma* @LastEditTime: 2021-03-26 14:40:21* @FilePath: /air-app/src/pages/login/login.vue* @PageTitle: 登陆页面-->

vue或者html代码区域注释

注释格式, 代码结构每段div或者段落必须明确，标注代码开始和代码结束，以便后期维护和修改；每个功能和字段必须注释清楚；;
html代码注释示例：

<!--实名认证开始--><div class="pay_explain"><div><span>实名认证:</span><b>请先扫码或者使用：“ABOUTCG学院”APP完成实名认证，可能需要花费1分钟的时间。不用担心隐私泄露，这个过程是加密的，由人工智能完成。</b></div></div><!--实名认证结束-->

Git提交必须写注释（对提交的信息采用明晰的标注）

● 使用前缀注释标示，标示后面保留一个空格
注释示例：

[A] 增加 xxx
[M] 更新 xxx
[M] 修改 xxx
[D] 删除 xxx

配置注释koroFileHeader - 头部注释和函数注释的插件

● 配置

// 修改位置：设置 => settings.json 配置文件中新增
{"fileheader.configObj": {"autoAdd": true, // 自动添加头部注释开启才能自动添加},//此为头部注释"fileheader.customMade": {"Author": "lijuan.sun",  // 作者信息，可改为自己的拼音缩写"Date": "Do not edit", // 文件创建时间(不变)"LastEditors": "lijuan.sun", // 文件最后编辑者"LastEditTime": "Do not edit", // 文件最后编辑时间"PageTitle": "XXX页面", // 页面标题"FilePath": "" //  文件在项目中的相对路径，自动更新},//此为函数注释"fileheader.cursorMode": {"Author": "lijuan.sun","description": "","param": "","return": ""}
}

DOM注释示例：

/*** @Author: XXXX.xx* @description: XXXX* @param {Number} XXXX* @return {Object} XXXX*/
submitEvaluate () {let res = await saveCourseEvaluation(this.submit);if (res.data) {this.$notify({title: "成功",message: "评价提交成功",type: "success"});}
}

全局api规范

api的地址全部统一在globalurl.js中，全局引入，每个模块注释清楚，以便于后期项目的维护，其他团队成员查找api也方便在一个文件中查找；
代码使用方法：global.Bsurl.uploadurl 示例代码如下：

const Bsurl = ''
// 这里定义全局url
export default {// 课程管理courseList: Bsurl + '/manage/course/pages', // 课程管理列表cgetCateGoryList: Bsurl + '/manage/course/getCateGoryList', // 搜索栏的数据getCateGoryList: Bsurl + '/manage/category/getCateGoryList',// 分类下拉列表
}

常见代码示例

DOM数据请求示例：尽量请求参数在数据对象data中定义，按照需求，如果小于3个参数的，并且参数在其他ajax请求中操作无关，可以在当前请求中写，大于3个参数的，全部在data中定义；以下是请求示例：

data () {return {// 请求内容dataForm: {name: '', // 课程名称type: 1, // 课程类型industry: null, // 行业类型skill: null // 技能类型},// 分页listQuery: {page: 1,pageSize: 30}}
},
methods: {init () {// 获取分页this.getList()},// 获取课程列表getList () {// 示例：如果有合并，请先合并再传const params = Object.assign(this.dataForm, this.listQuery);this.$GajaxPost(global.Bsurl.uploadurl, this.dataForm).then((res) => {this.list = res.data.list})}
}

请配置好拦截器，所有请求统一封装，通过拦截器返回并处理数据；处理好代码中.catch和请求超时

this.$GajaxPost(Global.Bsurl.applist, this.dataForm).then(res => {this.weatherInfo = res.data || {}
}).catch(e => {console.log(e)this.tabTip = '接口异常了，请稍后再试！'
})

公共组件模块规范

● 组件功能单一化，将使用规则，参数标注清晰，必须独立，确保在其他页面引入可直接使用，传送参数，接受参数等标注；
● 减少其他成员看代码的时间成本；建议将使用方法也注释到组件中，方便其他用户直接复制使用；
示例图如下：

和后台接口统一规约

分页规约示例

{pageNum: 1,pageSize: 30，total:3
}

post请求示例

{"name": "体验公开课","price": 100,"status": 1,"series":"1,2,3","courseStatus":1,
}

get请求示例

提示：如果可以，前端全部用post方式传值；推荐全部post,图片上传，文件上传除外；

url: http://localhost:8888/json/queryCourseById.json?id=27

文件上传示例

上传类型：
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywHjwgNCUml0Kg3D1
FormData请求参数：
file: (binary)

Http请求成功返回示例

非"0000",不成功返回的数据，如："1001"为登录超时，非"0000"的错误如果和前端没有规约，前端会统一弹出message的内容：

{"code": "0000","message": "成功","data": null
}

Input,select相关类型入参

前端input入参类型为字符串如：price: “333” ， type: “2”

{"type": "2","price": "100"
}

input,或者select多选入参

示例：software: [“8”, “16”]，里面的id是后台传什么，前端入参什么，比如后端返回的是：software: [8, 16]

ESLint规约

前端项目统一使用eslint规约，严格按照规约开发，
eslint安装方案：使用的腾讯vue规约
安装方法：https://github.com/AlloyTeam/eslint-config-alloy
本地eslint文件内容

module.exports = {extends: ['eslint-config-alloy/vue',],globals: {// 这里填入你的项目需要的全局变量// 这里值为 false 表示这个全局变量不允许被重新赋值，比如：//// Vue: false},rules: {// 这里填入你的项目需要的个性化配置，比如：'strict': 0,"no-var": 0,'no-undefined':"off","no-param-reassign":"off","no-inner-declarations": [2, "functions"],}
};

禁止出现 if(res.code == true)，二个等于号的写法；

vue项目使用的node版本

团队项目使用开发环境和node版本请保持统一，以免build后的内容不统一，或者出现的兼容问题，当前vue使用的node版本统一为：自己项目定

安装组件规范

● 个人单独安装的组件请统一标注并说明原因，并在群里面或者开发成员@并告知；请勿私自安装组件，导致项目无法运行的问题，请自行排查；
● 安装的组件需按需引入，禁止使用全局配置的方法；

全局通用校验规范

全局规则在文件 src/utils/validate.js 中，使用时，在文件中引入规则文件，然后定义rule规则，
使用：{validator:验证方法}，经常使用的校验尽量写通用规则，并在文件中注释，方便其他开发成员快速使用

// 文字长度校验
export function validatename(rule, value,callback){//这里是校验规则
}

其他注意事项

1、Vue中一般禁止引入jQuery
2、关于页面代码长度的限制：代码中页面行数不能太长，推荐页面长度不能大于400行左右，如果超出，请使用import的方式组件调用；
3、禁止出现 if(res.code == true)，二个等于号的写法；
4、团队项目中请尽量使用统一的代码风格，例：都使用sass，请勿混合多个语言开发css；