前言

规范目的

为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的代码及文档

命名规范

为了让大家书写可维护的代码，而不是一次性的代码，让团队当中其他人看你的代码能一目了然

普通变量命名规范

命名方法：驼峰命名法
命名规范：

命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的业务，那么我们可以这样定义const mySchool = "我的业务";

命名是复数的时候需要加s,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义const names = new Array();

常量命名

命名方法 : 小驼峰
命名规范 : 使用小驼峰命名。

组件命名规范

官方文档推荐及使用遵循规则：

PascalCase (单词首字母大写命名)是最通用的声明约定
组件名应该始终是多个单词的，根组件 App 除外
有意义的名词、简短、具有可读性
命名遵循 PascalCase 约定
公用组件以 Abcd (公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable）
页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem,StaffBenchAppNotArrItem）
导入及注册组件时，遵循 PascalCase 约定
同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。

method 方法命名命名规范

驼峰式命名，统一使用动词或者动词+名词形式，请求数据方法，以 data 结尾，尽量使用常用单词开头（set、get、go、can、has、is）

get 获取/set 设置,add 增加/remove 删除create 创建/destory 移除start 启动/stop 停止open 打开/close 关闭,read 读取/write 写入load 载入/save 保存,create 创建/destroy 销毁begin 开始/end 结束,backup 备份/restore 恢复import 导入/export 导出,split 分割/merge 合并inject 注入/extract 提取,attach 附着/detach 脱离bind 绑定/separate 分离,view 查看/browse 浏览edit 编辑/modify 修改,select 选取/mark 标记copy 复制/paste 粘贴,undo 撤销/redo 重做insert 插入/delete 移除,add 加入/append 添加clean 清理/clear 清除,index 索引/sort 排序find 查找/search 搜索,increase 增加/decrease 减少play 播放/pause 暂停,launch 启动/run 运行compile 编译/execute 执行,debug 调试/trace 跟踪observe 观察/listen 监听,build 构建/publish 发布input 输入/output 输出,encode 编码/decode 解码encrypt 加密/decrypt 解密,compress 压缩/decompress 解压缩pack 打包/unpack 解包,parse 解析/emit 生成connect 连接/disconnect 断开,send 发送/receive 接收download 下载/upload 上传,refresh 刷新/synchronize 同步update 更新/revert 复原,lock 锁定/unlock 解锁check out 签出/check in 签入,submit 提交/commit 交付push 推/pull 拉,expand 展开/collapse 折叠begin 起始/end 结束,start 开始/finish 完成enter 进入/exit 退出,abort 放弃/quit 离开obsolete 废弃/depreciate 废旧,collect 收集/aggregate 聚集

views 下的文件命名

只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 index.vue
尽量是名词,且使用驼峰命名法
开头的单词就是所属模块名字（workbenchIndex、workbenchList、workbenchEdit）
名字至少两个单词（good: workbenchIndex）（bad:workbench）

props 命名

在声明 prop 的时候，其命名应该始终使用 key-name的形式，而在模板中应该始终使用keyName的形式

目录文件夹及子文件规范

views文件夹内每个子文件夹包含若干vue文件与unit单元文件夹，单元文件夹放置该单元的常量数据，或者当前模块可复用的js逻辑

多个特性的元素规范

多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)

<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>
<!-- good -->
<img  
    src="https://vuejs.org/images/logo.png"  
    alt="Vue Logo"
>
<my-component  
    foo="a" 
    bar="b"  
    baz="c"
>
</my-component>

注释规范

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

务必添加注释列表

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

编码规范

优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照 ESLint 格式要求编写代码

源码风格

使用 ES6 风格编码

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

// bad
const a = 'foobar'
const b = 'foo' + a + 'bar'
// acceptable
const c = `foobar`
// good
const a = 'foobar'
const b = `foo${a}bar`
const c = 'foobar'

解构赋值 数组成员对变量赋值时，优先使用解构赋值

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

函数的参数如果是对象的成员，优先使用解构赋值

// 对象解构赋值
// bad
function getFullName(user) {
    const firstName = user.firstName
    const lastName = user.lastName
}
// good
function getFullName(obj) {    
    const { firstName, lastName } = obj
}
// best
function getFullName({ firstName, lastName }) {}

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

const items = [1, 2, 3, 4, 5]
// bad
const itemsCopy = items
// good
const itemsCopy = [...items]

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

// bad
const self = this;
const boundMethod = function(...params) {
    return method.apply(self, params);
}
// acceptable
const boundMethod = method.bind(this);
// best
const boundMethod = (...params) => method.apply(this, params);

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

// bad
import * as myObject from './importModule'
// good
import myObject from './importModule'

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

const StyleGuide = {
    es6: {}
};
export default StyleGuide;

指令规范

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

// bad
v-bind:class="{'show-left'：true}"
v-on:click="getListData"
// good
:class="{'show-left'：true}"
@click="getListData"

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

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

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

避免 v-if 和 v-for 同时用在一个元素上（性能问题）以下为两种解决方案：

将数据替换为一个计算属性，让其返回过滤后的列表

  <!-- bad -->
  <ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <!-- good -->
  <ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
  <script>
  computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isActive
      })
    }
  }
  </script>

将 v-if 移动至容器元素上 (比如 ul, ol)

<!-- bad -->
<ul>
    <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
        {{ user.name }}
    </li>
</ul>
<!-- good -->
<ul v-if="shouldShowUsers">
    <li v-for="user in users" :key="user.id">
        {{ user.name }}
    </li>
</ul>

为学日益 | 前端规范总结

前言