前端 代码规范

阿里设计规范

!!! 项目中除注释之外 不要出现汉字情况！！！

代码格式化问题

vscode安装 Prettier插件 将其设为默认格式化

这个工具能够使输出代码保持风格一致。

注释与命名

样式命名

1. class、id都需小写
2. 命名使用英文，禁止使用特殊字符
3. 名称间隔使用 - 符号
4. 类名命名需要语义化，参考下面的示例：

.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{}             //更多

图片命名

1. 图片名称必须小写，禁止使用特殊字符、中文
2. 使用英文或拼音缩写，禁止特殊字符
3. 名称间隔使用 - 符号
4. 命名需要能体现图片的大概用途

常用示例：

 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 逻辑的情况除外；

！！！避免！！！

1. 避免使用标签选择器。因为在 Vue 中，特别是在局部组件，使用标签选择器效率特别低，损耗性能，建议需要的情况，直接定义 class；
2. 非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外；
3. 避免使用important选择器；
4. 避免大量的嵌套规则，控制在3级之内，对于超过4级的嵌套，考虑重写或新建子项；
5. 避免使用ID选择器及全局标签选择器防止污染全局样式；

推荐使用

1. 提取公用样式进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
    }
}

函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识，它的作者, 依赖关系和兼容性信息

1. 单行注释：双斜线后应跟空格，且缩进与上下文的代码保持一致；或在行尾注释，在行尾依然需要左右空格；

// 一些说明...
const userID = 24;
const userID = 12; // 一些说明

2. 多行注释：一般用于注释难以理解的、可能存在错误的、逻辑强的代码，且缩进一致；

/*
 * 针对下方代码的说明
 * 第一行太长写第二行
 */
const a = 1；

!!! 如果注释掉一些还肯能有用的代码 标注其用处 和什么时候要打开 !!!

3. 函数注释：写明传入参数名称，类型，推荐完整注释以下格式；

/**
 * @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 : ''
}

4. 文件注释

/**
 * @Description: 文件名称
 * @Author:	lint
 * @Date: 2020-09-08
 * 
 */

这里可以注释一下 文件的路由地址 和菜单名称 方便查找和修改

JS规范

1. 在vue-cli 脚手架使用架自带的指向 src 开发目录的 ‘@’ 符号引入文件资源；
2. 使用计算属性规避 v-if 和 v-for 用在一起；
3. 统一使用单引号；
4. 坚持单一原则，函数内仅做该函数应该做的，尽量避免通过传入标记控制不同行为；
5. 优先考虑三目运算符，但谨记不要写超过3层的三目运算符；
6. 对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码，如在开发分支可提交打印代码，但要注意打印格式，如下：

// 推荐
console.log('路由': 文件路由, '打印简述': 打印数据)

// 不推荐
console.log(打印数据, '1111')

1. 条件语句避免负面条件，特指调用某一函数；

// 推荐
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 ！！！！！！！ 很重要