前端 代码规范
阿里设计规范
!!! 项目中除注释之外 不要出现汉字情况！！！
代码格式化问题
vscode安装 Prettier插件 将其设为默认格式化
这个工具能够使输出代码保持风格一致。
注释与命名
样式命名
- class、id都需小写
- 命名使用英文，禁止使用特殊字符
- 名称间隔使用 - 符号
- 类名命名需要语义化，参考下面的示例：
.wrap{} //外层容器
.mod-box{} //模块容器
.btn-start{} //开始
.btn-download-ios{} //ios下载
.btn-download-andriod{} //安卓下载
.btn-head-nav1{} //头部导航链接1
.btn-news-more{} //更多新闻
.btn-play{} //播放视频
.btn-ico{} //按钮ico
.btn-lottery{} //开始抽奖
.side-nav{} //侧栏导航
.side-nav-btn1{} //侧栏导航-链接1
.btn-more{} //更多
图片命名
- 图片名称必须小写，禁止使用特殊字符、中文
- 使用英文或拼音缩写，禁止特殊字符
- 名称间隔使用 - 符号
- 命名需要能体现图片的大概用途
常用示例：
bg.jpg //背景图片
mod-bg.jpg //模块背景
sprites.png //精灵图
btn-start.png //开始按钮
ico-play.png //修饰性图片
禁止文件名和实际图片内容不符。反面例子：图片名为’weixin-qrcode’，图片内容却是头像。
文件命名
所有文件名统一使用小写，首页命名为index.html html内页，有明显分类的，参考使用以下示例命名，无明确意义的，可用page01.html、page02.html，禁止使用特殊字符，统一使用小写字母
常用命名：
专题名称 描述
index.html 引导页&首页
main.html 首页
news.html 资讯页
newsdetail.html 资讯详情页
raiders.html 攻略页
raidersdetail.html 攻略页详情页
download.html 下载页面
actlist.html 活动列表页面
video.html 视频
cdkey.html CDKEY 兑换页
wallpaper.html 壁纸页面
按照小驼峰命令，英文单词过长或超出2个以上，可缩略至前四位，如
// 业务统计
approvalStatistical
// 缩略
approvalStat
有复数含义，采用复数命名，如
pages, componets, filters, mixins ，images
组件进行目录划分，目录命名为小驼峰，公用组件加上gd前缀，如
|components
|-- gdCustomCheck
| |-- index.vue
|-- gdCustomTable
| |-- index.vue
目录命名
按照小驼峰命名，首字母小写
- 项目文件夹：projectName
- 样式文件夹：css / scss
- 脚本文件夹：js
css规范
颜色
除特殊情况 如echarts图或特殊要求，请勿直接在本页面写入color、background-color 等颜色相关的样式
字体
如需对字体大小进行调整 可以采用如下方式
--size 为 14px
font-size: calc(var(--size) - 2px); 表示在14的基础上 -2px
font-size: calc(var(--size) + 2px); 表示在14的基础上 +2px
font-size: var(--size) 表示 字体大小为 14px
选择器
非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；
非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；
非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；
！！！避免！！！
- 避免使用标签选择器。因为在 Vue 中，特别是在局部组件，使用标签选择器效率特别低，损耗性能，建议需要的情况，直接定义 class；
- 非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；
- 避免使用important选择器；
- 避免大量的嵌套规则，控制在3级之内，对于超过4级的嵌套，考虑重写或新建子项；
- 避免使用ID选择器及全局标签选择器防止污染全局样式；
推荐使用
- 提取公用样式进assets文件styles里，按模块/功能区分；
|assets
|-- styles
| |-- common 放置公用样式，如重置，混合，复写element样式等
| |-- modules 放置模块样式
``**加粗样式**`
2. 推荐使用直接子选择器；
```css
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推荐 */
*{}
#jdc {}
.jdc div{}
!!! 使用 scoped 关键字，约束样式生效的范围 !!!
使用变量
可复用属性尽量抽离为页面变量，易于统一维护
// CSS
.class-name {
color: red;
border-color: red;
}
// SCSS
$color: red;
.class-name {
color: $color;
border-color: $color;
}
使用混合（mixin）
根据功能定义模块，然后在需要使用的地方通过 @include 调用，避免编码时重复输入代码段
// CSS
.jdc_1 {
-webkit-border-radius: 5px;
border-radius: 5px;
}
.jdc_2 {
-webkit-border-radius: 10px;
border-radius: 10px;
}
// SCSS
@mixin radius($radius:5px) { // 当前代码可写入公用样式库mixin文件中
-webkit-border-radius: $radius;
border-radius: $radius;
}
.jdc_1 {
@include radius; //参数使用默认值
}
.jdc_2 {
@include radius(10px);
}
注释规范
以/ 注释内容 /格式注释，前后空格，嵌套子类需要一个回车分割开
/* 注释内容 */
.pha-element {
width: 20px;
/* 这里需要换行 */
.pha-element-l {
color: blue
}
}
函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识，它的作者, 依赖关系和兼容性信息
- 单行注释：双斜线后应跟空格，且缩进与上下文的代码保持一致；或在行尾注释，在行尾依然需要左右空格；
// 一些说明...
const userID = 24;
const userID = 12; // 一些说明
- 多行注释：一般用于注释难以理解的、可能存在错误的、逻辑强的代码，且缩进一致；
/*
* 针对下方代码的说明
* 第一行太长写第二行
*/
const a = 1；
!!! 如果注释掉一些还肯能有用的代码 标注其用处 和什么时候要打开 !!!
- 函数注释：写明传入参数名称，类型，推荐完整注释以下格式；
/**
* @Description 加入购物车
* @Author lint
* @Date 2020-09-08
* @param {Number} goodId 商品id
* @param {Array} specs sku规格
* @param {Number} amount 数量
* @param {String} remarks 备注
* @returns 购物车信息
*/
apiProductAddCard = (goodId, specs, amount, remarks) => {
return axios.post('***', { goodId, specs, amount, remarks })
}
/**
* @Description 根据字典编码获取选项名称
* @Author lint
* @Date 2020-09-08
* @param {String} key 编码
* @param {String} val 值
* @returns {String} 字典名称
*/
getDictText(key, val) {
const item = this.dictData[key].find(k => k.dictKey === val)
return item ? item.dictValue : ''
}
- 文件注释
/**
* @Description: 文件名称
* @Author: lint
* @Date: 2020-09-08
*
*/
这里可以注释一下 文件的路由地址 和菜单名称 方便查找和修改
JS规范
- 在vue-cli 脚手架使用架自带的指向 src 开发目录的 ‘@’ 符号引入文件资源；
- 使用计算属性规避 v-if 和 v-for 用在一起；
- 统一使用单引号；
- 坚持单一原则，函数内仅做该函数应该做的，尽量避免通过传入标记控制不同行为；
- 优先考虑三目运算符，但谨记不要写超过3层的三目运算符；
- 对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码，如在开发分支可提交打印代码，但要注意打印格式，如下：
// 推荐
console.log('路由': 文件路由, '打印简述': 打印数据)
// 不推荐
console.log(打印数据, '1111')
- 条件语句避免负面条件，特指调用某一函数；
// 推荐
function isUserNotBlocked(user) {
// ...
}
// 不推荐
if (!isUserNotBlocked(user)) {
// ...
}
请求数据的方法，使用try catch 错误捕捉，注意执行回调；!!!
/**
* 接口请求
* @param req 接口api
* @param params 参数
*/
async httpInterface(req, params) {
try {
this.loading = true
const res = await req(params)
return Promise.resolve(res)
} catch (e) {
return Promise.reject(e)
} finally {
this.loading = false
}
}
// 使用
this.httpInterface(req, {}).then((resove, reject) => {
console.log(resove, reject)
})
finally ！！！！！！！ 很重要