【前端】开发规范-Vue

一、前言

​ 现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。
——引自《阿里规约》的开头片段

二、命名规范

1. 项目命名

• 全部采用小写方式，以横线分隔

正例：

demo-pc

反例：

demoPC

2. 文件夹命名

• 除 vue 工程的 components 下的文件夹外，全部采用kebab-case风格，有复数结构时，要采用复数命名法，缩写不用复数

正例：

scripts / styles / components / images / utils /layouts / demo-styles / demo-scripts / 

反例：

demoStyles

3. 文件命名（除.vue文件）

• 全部采用kebab-case风格

正例：

render-dom.js / nav-index.css

反例：

renderDom.js / navIndex.css

4. JavaScript变量命名

• 由字母、数字、下划线、$符号组成，不能以数字开头
• 不能是关键字和保留字，例如：for,while,this,name
• 变量名必须有意义，禁止使用英语+拼音的结合，不建议使用描述不清楚的缩写
• 命名分隔采用 lowerCamelCase (小驼峰)命名法

正例：

javaScript

反例：

shenfenNo // 身份证号

5. JavaScript函数命名

• 采用 lowerCamelCase (小驼峰)命名法
• 前缀尽可能的使用动词描述

动词	描述
can	判断是否可以执行某些动作
has	判断是否含有某个值
is	判断是否为某个值
set	设置某个值
get	获取某个值
load	加载某些值
do	执行某些动作
go	跳转目标动作
init	初始化动作

正例：

// 是否是NaN
function isNaN(){
}
// 获取列表
function getAppList(){
}
// 跳转首页
function goIndex(){
}

6. class命名规范

• 全部采用小写，横线分隔方式
• 以下为一些常用的class命名关键词

布局类：header, footer, container, main, content,aside, page, section
包裹类：wrap, inner
区块类：region, block, box
结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类：list, item, field
主次类：primary, secondary, sub, minor
大小类：s, m, l, xl, large, small
状态类：active, current, checked, hover, fail, success, warn, error, on, off
导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
星级类：rate, star
分割类：group, seperate, divider
等分类：full, half, third, quarter
表格类：table, tr, td, cell, row
图片类：img, thumbnail, original, album, gallery
语言类：cn, en
论坛类：forum, bbs, topic, post
方向类：up, down, left, right
其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…

7. sass、less全局变量命名

• 全局css变量采用 kebab-case 风格，首字母使用$符号

正例：

$default-text-color: #333; // 默认全局文字颜色

8. 命名严谨性

• 代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式
• 说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义
• 注意：即使纯拼音命名方式也要避免采用

正例：

henan / luoyang / rmb 等国际通用的名称，可视同英文。

反例：

DaZhePromotion [打折] 、 getPingfenByName() [评分] 、int 某变量 = 3

三、其他规范

1. js字符串引号

• js 中出现的字符串一律使用 ’ ’ 单引号

const name = '张三'

2. 判断对象相等

• js 判断两个对象相等一律使用恒等 ===

if(name === '张三'){

}
if(name !== null){

}

3. undefined、null判断

• 不兼容 ie 8, 直接 === !

if(name === undefined || name === null){
    
}

4. ES6变量声明

• 简单类型的值不变、或者Object，Array 等复杂对象的引入不变时使用 const 声明变量
• 简单类型的值可变，或者Object，Array 等复杂对象的引入可变时使用 let 声明变量

// 值或者引入不会被改变
const age = 15 
const user = {
    name:'hanzh',
    age:15
}
user.age = 16

// 值或者引入会改变
let age = 15
age = 16
let user = {
    name:'hanzh',
    age:16
}
user = xxx

• 对象声明： 统一使用字面值创建对象

正例

const user = {
  name:'hanzh'
}
user.name = 'hanzh

反例

const user = new Object()
user.name = 'hanzh

5. 不允许省略大括号

正例

if (condition) {
  doSomething();
}

反例

if (condition) doSomething();

四、Vue相关规范

查看Vue官方提供的规范 风格指南

1. Vue组件命名

• 组件文件名 采用 CamelCase（大驼峰）
• 组件name与组件文件名保持一致

2. prop定义

• prop 的定义应该尽量详细，至少需要指定其类型
• 细致的 prop 定义有两个好处：
  • 它们写明了组件的 API，所以很容易看懂组件的用法；
  • 在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。

正例

props: {
 // 必填并且带枚举校验
 status: {
   type: String,
   required: true,
   validator: function (value) {
     return [
       'syncing',
       'synced',
       'version-conflict',
       'error'
     ].indexOf(value) !== -1
   }
 }，
 // 非必填
 rowData: {
    type: Object,
    default() {
      return {}
    }
  }
}

反例

props: ['status']

3. v-for设置键值

• 在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。

详解：假设你有一个待办事项列表然后你把它们按照字母顺序排序。在更新 DOM 的时候，Vue 将会优化渲染把可能的 DOM 变更降到最低，即可能删掉第一个待办事项元素，然后把它重新加回到列表的最末尾。这里的问题在于，不要删除仍然会留在 DOM 中的元素。比如你想使用 给列表加过渡动画，或想在被渲染元素是 时保持聚焦。在这些情况下，为每一个项目添加一个唯一的键值 (比如 :key=“todo.id”) 将会让 Vue 知道如何使行为更容易预测。根据我们的经验，最好始终添加一个唯一的键值，以便你和你的团队永远不必担心这些极端情况。也在少数对性能有严格要求的情况下，为了避免对象固化，你可以刻意做一些非常规的处理。

data: function () {
  return {
    todos: [
      {
        id: 1,
        text: '学习使用 v-for'
      },
      {
        id: 2,
        text: '学习使用 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>

4. 组件/标签上所有的v-if逻辑判断都需要加注释

• 在开发过程中 用于控制组件/标签 创建/销毁 的 逻辑控制 v-if 需要增加注释, 详细说明 创建/销毁的 逻辑场景

<!-- 只有管理员可以操作日志和订阅任务-->
<el-menu-item v-if="user.role === 'admin'" :index="path.AuditLog">
	操作日志
</el-menu-item>

5. 路由path命名规范

• 路由的path 代表浏览器地址栏的访问路径，应全部采用 kebab-case风格，
• 原则上使用 /模块/视图文件名称

正例

/member/member-list

反例

/member/memberList

五、 IDE代码格式规范检测插件

前端项目采用的代码检测插件为 eslint + prettier 组合，webStorm集成方式如下，其他工具请自行百度