8.1 代码规范

前端代码规范

前端代码规范

命名规范

目录和文件采用“大驼峰命名法”

例：DataBaseUser：变量DataBaseUser单词首字母大写。

id: 采用“小驼峰命名法”

例：myStudentCount：变量myStudentCount第一个单词全部小写，后面的单词首字母大写。

class: 采用“中划线命名法”

例：print-employee-paychecks：函数名中的每一个逻辑断点都有一个中划线来标记。

命名尽量避免使用中文拼音，应该采用简明的英文单词进行组合

命名注意缩写，但是不能盲目缩写；
不允许通过1、2、3等序号进行命名；
避免class与id重名；
id注意用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id；
class用于标识某一个类型的对象，命名必须言简意赅；
尽可能提高代码模块的复用，样式尽量用组合的方式；
规则名称中不应该包含颜色、定位等与具体显示效果相关的信息，应该用意义命名，而不是结果名称。

排版规范

如果大括号内为空，则简洁写成{}，不需要换行。如果大括号内非空，则1）左大括号前不换行有空格；2）左大括号后换行；3）右大括号前换行；4）右大括号后还有else等代码则不换行；5）表示终止的右大括号后必须换行。
示例：
```
methods: {
  testFunc () {
      console.log("test function");
      var flag = false;
      if (this.num === 0) {
          flag = true;
      } else {
           flag = false;
      }
  }
}
```
左右小括号和中间字符之间不出现空格。
示例：
```
if (this.num === 0) {
  flag = true;
} 
```
if/for/while/switch等保留字与括号之间必须加空格。
示例：
```
if () {}
for () {}
while () {}
switch () {}
```

二目、三目运算符的左右两边必须加一个空格。
示例：

int a = 1, b = 2, z, c = 3;
z = a > b ? a : (b > c ? b : c);

注释的双斜线与注释内容之间有且只有一个空格。
示例：
```
// 我是注释
/** 我是注释 **/
```

多个参数逗号后边必须加空格。
示例：

methods: {
  testFunc (pra1, pra2, pra3) {
      console.log("test function");
      var flag = false;
      if (this.num === 0) {
          flag = true;
      } else {
           flag = false;
      }
  }
}

风格指南

组件名为多个单词

组件名应该始终为多个单词，Vue内置组件除外。这样做可以避免和现有的以及未来的HTML元素发生冲突，因为所有HTML元素的名称都是单个单词。
示例：

Vue.component('todo-item', {
  // ...
})

export default {
  name: 'TodoItem',
  // ...
}

组件数据

当在组件中使用data属性的时候，它的值必须是返回一个对象的函数。new Vue除外。
示例：

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

Prop定义

Prop定义应该尽量详细，至少需要指定其类型。
示例：

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

为`v-for`设置键值

在组件上总是必须用key配合v-for，以便维护内部组件及其子树的状态。
示例：

<ul>
  <li v-for="todo in todos" :key="todo.id">
    
  </li>
</ul>

避免`v-if`和`v-for`用在一起

示例：

<ul v-if="shouldShowUsers">
  <li v-for="user in users" :key="user.id">
    
  </li>
</ul>

为组件样式设置作用域

对于应用来说，顶级App组件和布局组件中的样式可以是全局的，但是其它组件应该是有作用域的。
示例：

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>

参考：
Vue.js风格指南
 命名规范和排版规范

Niffler

目录