前端-代码规范

vue文件

• 基本结构

<template>
  <div></div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        name: '张三', // 用户名
        age: '18' // 年龄,所有变量均需要注释
      };
    },
    methods: {
      // 欢迎用户 所有方法均需要注释
      welcome () {
        console.log(`欢迎${this.name}先生/女士`)
      }
    },
    mounted() {}
  };
</script>
<!-- 声明语言，并且添加scoped -->
<style lang="scss" scoped></style>

---

scss样式

• 针对项目的一些主题色和通用样式需要单独设置在一个scss文件里。在其他的页面里引用样式名而非具体的色值或样式

$r: 50;
$poolblue: #1092CC;
$red: #CC101B;
$purple: #8D10CC;
$green: #07A636;
$lightred: #FCF1F2;
$clr33: #333;
$clr80: #808080;

@mixin btnRed{
  height: 44rem/$r;
  background-image: linear-gradient(135deg, #CC101B 0%, #9D0C15 100%);
  box-shadow: 0 0 8px 0 rgba(157,12,21,0.40);
  border-radius: 4rem/$r;
  font-size: 16rem/$r;
  color: white;
  text-align: center;
  text-decoration: none;
}

---

函数注释

使用插件为：koroFileHeader
配置步骤及配置内容：

"fileheader.customMade": {
    "Author": "",                  // 作者
    "Description": "",             // 文件描述
    "Date": "Do not edit",         // 文件创建时间（不变）
    "LastEditors": "",             // 文件最后编辑者
    "LastEditTime": "Do not edit", // 文件最后编辑时间
}

快捷键
函数注释：Ctrl + Atl + t

/**
 * @description: 
 * @param {*} name
 * @param {*} age
 * @return {*}
 */
welcome (name, age) {
  return 'abc'
},

文件注释：Ctrl + Atl + i

/*
 * @Author: 
 * @Description: 
 * @Date: 2020-11-05 15:54:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-11-05 16:09:25
 */

---

标签属性自动换行

• 对除第一个属性外的其他每个属性进行换行，并保持对齐

<!-- 推荐 -->
<a :href="item.onestore_url"
   target="_blank"
   @click="goToDownload()">
  <img src="../images/one_downloadbadge_red_black.png"
       alt="download-icon">
</a>

---

组件命名规范

• 组件名应该始终是多个单词的，根组件 App 除外
• 有意义的名词、简短、具有可读性
• 命名遵循 PascalCase(单词首字母大写命名) 约定
• 在页面中使用组件需要前后闭合，并以短线分隔，如

<abcd-date-picker></abcd-date-picker>
<abcd-table></abcd-table>

• 导入及注册组件时，遵循 PascalCase(单词首字母大写命名) 约定
• 同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。

---

props 命名规范

• 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case

<!-- 推荐 -->
<script>
  props: {
    greetingText: String;
  }
</script>

<welcome-message greeting-text="hi"></welcome-message>

<!-- 不推荐 -->
<script>
  props: {
    'greeting-text': String
  }
</script>

<welcome-message greetingText="hi"></welcome-message>

---

注释规范

• 代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。

• 以下情况，务必添加注释

1.公共组件使用说明
2.各组件中重要函数或者类说明
3.复杂的业务逻辑处理说明
4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
5.注释块必须以/**（至少两个星号）开头**/；
6.单行注释使用//；
7.多重 if 判断语句

---

使用 ES6 风格编码源码

• 定义变量使用 let ,定义常量使用 const
• 静态字符串一律使用单引号或反引号，动态字符串使用反引号

// 推荐
const a = 'foobar';
const b = `foo${a}bar`;
const c = 'foobar';

// 不推荐
const a = 'foobar';
const b = 'foo' + a + 'bar';

• 解构赋值

// 数组解构赋值
const arr = [1, 2, 3, 4]
// 推荐
const [first, second] = arr
// 不推荐
const first = arr[0]
const second = arr[1]

// 对象解构赋值
// 推荐
function getFullName(obj) {
  const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {}
// 不推荐
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}

• 拷贝数组

使用扩展运算符（…）拷贝数组。

const items = [1, 2, 3, 4, 5];
// 推荐
const itemsCopy = [...items];
// 不推荐
const itemsCopy = items;

• 箭头函数

需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this

// 推荐
const boundMethod = (...params) => method.apply(this, params)

// 不推荐
const self = this
const boundMethod = function(...params) {
  return method.apply(self, params)
}

• 模块

• 如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用

// 推荐
import myObject from './importModule';

// 不推荐
import * as myObject from './importModule';

• 如果模块默认输出一个函数，函数名的首字母应该小写

function makeStyleGuide() {}

export default makeStyleGuide;

• 如果模块默认输出一个对象，对象名的首字母应该大写

const StyleGuide = {
  es6: {}
};

export default StyleGuide;

---

指令规范

• 指令有缩写一律采用缩写形式

// 推荐
:class="{'show-left'：true}"
@click="getListData"

// 不推荐
v-bind:class="{'show-left'：true}"
v-on:click="getListData"

• v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

<!-- 推荐 -->
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

<!-- 不推荐 -->
<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

• 禁止 v-if 和 v-for 同时用在一个元素上

---

Props 规范

组件 props 原子化
提供默认值
使用 type 属性校验类型
使用 props 之前先检查该 prop 是否存在

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

• 避免 this.$parent

<br><hr>


# 全局变量的位置

如无特殊情况，变量统一放到 data 内，避免组件重用时代码不被执行

```js
// 推荐
export default {
  data() {
    return {
      today: new Date()
    };
  }
};
// 不推荐
const today = new Date();
export default {
  data() {
    return {
      t: today
    };
  }
};

---

其他

1. 不要使用 setTimeout() 来实现 nextTick()

2. ui组件h5端统一使用vant (https://vant-contrib.gitee.io/vant/#/zh-CN/home)，无特殊情况不要再次引用其他组件库

3. eslint编码规范

   项目根目录 需要使用eslint推荐代码规范 standard
   参考文档为：
   https://cn.eslint.org/docs/rules/
   https://juejin.im/post/6844903928241324045

以下为一些eslint说明

• 使用Tab进行缩进,每个Tab为两个空格。

function hello (name) {  console.log('hi', name)}

• 除需要转义的情况外，字符串统一使用单引号。

console.log('hello there')$("<div class='box'>")

• 不要定义未使用的变量。

function myFunction () {  
	let result = something()   // ✗ avoid
}

• 关键字后面加空格。

if (condition) { ... }   // ✓ ok
if(condition) { ... }    // ✗ avoid

• 函数声明时括号与函数名间加空格。

function name (arg) { ... }   // ✓ ok
function name(arg) { ... }    // ✗ avoid

run(function () { ... })      // ✓ ok
run(function() { ... })       // ✗ avoid

• 始终使用 === 替代 ==。 例外： obj == null 可以用来检查 null || undefined；接口返回的error_no 根据实际情况判断是否使用 ===

if (name === 'John')   // ✓ ok
if (name == 'John')    // ✗ avoid
if (name !== 'John')   // ✓ ok
if (name != 'John')    // ✗ avoid

• 字符串拼接操作符 (Infix operators) 之间要留空格。

var x = 2 // ✓ ok
var message = 'hello, ' + name + '!' // ✓ ok
var x=2 // ✗ avoid
var message = 'hello, '+name+'!' // ✗ avoid