前端代码规范，vue 代码规范

shengjon

已于 2022-04-29 14:55:37 修改

阅读量2.7k

点赞数

分类专栏： web 文章标签：前端前端代码规范 vue 代码规范

于 2022-04-19 16:41:55 首次发布

本文链接：https://blog.csdn.net/shengjon/article/details/124277517

版权

web 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

一、规范目的

对于一个团队来说，制定统一的规范是有必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码的工作效率，使代码保持统一的代码风格，以便于代码整合和后期维护。

二、HTML/CSS 规范

2.1 浏览器兼容性

根据公司业务要求而定，一般：

主流程测试：chrome 30 +、IE9+；

完整测试：chrome 30 +、IE9+、360浏览器、微信 webView、手机浏览器。

2.2 html 代码规范

2.2.1 声明与编码

html 头部声明统一
```
<!DOCTYPE html>
```

页面编码统一

<meta charset="UTF-8"> <!-- ie6也支持，无须担心 -->

2.2.2 格式缩进

html 编码统一格式化显示，使用一个 Tab 键进行分层缩进（2个空格宽度），使整个页面结构层次清晰，方便阅读和修改。

2.2.3 模块注释

html 独立模块之间注释格式统一使用：

<!-- start: XXX模块 -->
  …
<!-- end: XXX模块 -->

或者：

<!-- XXX模块 -->
  …
<!-- /XXX模块 -->

2.2.4 标签与属性

由于 html 标签和属性不区别大小写，所以我们约定都采用小写，尤其是自定义标签和属性名，否则 js 中取不到，如：
```
<div data-bgColor="green"></div>
$('div').data('bgColor');  // 取不到，已自动被浏览器转成了data-bgcolor
```

不需要为 css、js 指定类型，HTML5 中默认已包含

// 错误
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

// 正确
<link rel="stylesheet" href="" >
<script src=""></script>

所有 html 属性必须添加双引号（非单引号）

// 错误
<div id=mainframe> 或 <div id='mainframe'>

// 正确
<div id="mainframe">

元素嵌套规范，每个块状元素独立一行，内联元素可选

// 错误
<div>
    <h1></h1><p></p>
</div>	
<p> 
    <span></span>
    <span></span>
</p>

// 正确
<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>

段落元素与标题元素只能嵌套内联元素

// 错误
<h1><div></div></h1>
<p><div></div><div></div></p>

//正确
<h1><span></span></h1>
<p><span></span><span></span></p>

在 html 中不能使用小于号 “<” 和大于号 “>” 特殊字符，浏览器会将他们作为标签解析，若要正确显示，在 html 源代码中使用字符实体
```
// 错误
<a href="#">more>></a>

// 正确
<a href="#">more&gt;&gt;</a>
```
img 标签中必须添加 alt 属性，如：
```
<img src="…" alt="logo" />
```
标签在运用时，应精良使用语义化标签，在语义不明显，即可用 div 也可用 p 时，应优先使用 p 标签，如：
```
<h1>标题<h1>
<lable for="user">用户名：</lable>
<input name="username" id="user">
```

2.3 CSS 代码规范

2.3.1 样式表编码

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”

字符 @charset “”; 都用小写字母，不能出现转义符，编码名允许大小混写

/* 错误 */

/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";
.lx {}

/* 正确 */

@charset "UTF-8";
.lx {}

2.3.2 css 引用规范

所有 css 均为外部调用，不得在页面书写任何内部样式或行内样式，vue 文件要添加 scoped 属性，避免样式污染。

2.3.3 css 注释规范

单行注释：注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行

错误

/*Comment Text*/
.lx{
	display: block;
}
.lx{
	display: block;/*Comment Text*/
}

正确

/* Comment Text */
.lx {}

/* Comment Text */
.lx {}

模块注释：注释内容第一个字符和最后一个字符都是一个空格字符，/* 与模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行

错误

/* Module A ---------------------------------------------------- */
.mod_a {}
/* Module B ---------------------------------------------------- */
.mod_b {}

正确

/* Module A
---------------------------------------------------------------- */
.mod_a {}


/* Module B
---------------------------------------------------------------- */
.mod_b {}

文件信息注释：在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息
```
@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2016-10-10
 */
```

2.3.4 书写规范

代码格式化：应统一使用展开格式书写样式
- 样式书写一般有两种，一种是紧凑格式：
```
.lx{ display: block;width: 50px;}
```
- 一种是展开格式：
```
.lx {
    display: block;
    width: 50px;
}
```

样式选择器、属性名、属性值关键字全部使用小写字母书写

/* 错误 */
.LX{
	DISPLAY:BLOCK;
}

/* 正确 */
.lx {
	display:block;
}

属性书写建议遵循以下顺序

   A.）布局定位属性：display / position / float / clear / visibility / overflow
   B.）自身属性：width / height / margin / padding / border / background
   C.）文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
   D.）其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

css 背景图片

/* 不推荐 */
.canbox{
    background-color: #ff6600;
    background-image: url("/img/xxx.png");
}

/* 推荐(合并、css 图片引入不需要引号) */
.canbox {
    background: #f60 url(/img/xxx.png); 
}

属性值为 0 时，去除单位

/* 错误 */
.wrap{
    margin: 0px 0px 5px 8px;
}

/* 正确 */
.wrap {
    margin: 0 0 5px 8px;
}

用来显示动态文本输入的地方，样式里需加上英文强制换行
```
word-break: break-all;
```
上下相邻的两个模块应避免混用 margin-top 、margin-bottom ，否则会产生重叠现象

2.3.5 重置样式

移动端

* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; vertical-align: top; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

pc 端

html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }
ul, ol { list-style: none; }
img { border: 0 none; vertical-align: top; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, em, i { font-style: normal; font-weight: normal; }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
mark { background: none; }
input::-ms-clear { display: none !important; }
body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; }

三、JavaScript 代码规范

3.1 js 文件引入

引入位置：body 标签内最后部（非 body 外面），减少因载入脚本而造成其他页面内容阻塞的问题，因为 js 是单线程的
```
<html>
<body>
    <div>页面内容…</div>
    <script src="model.js"></script>
</body>
</html>
```
引入方式：html 页面中禁止直接编写 js 代码，统一使用 <script> 外部引用的方式，一遍打包压缩和缓存

3.2 代码缩进

3.2.1 整体层次

使用 Tab 键进行代码缩进，（2个空格宽度）

(function() {
  const i = 0;
  function innerFun() {
    const j = 0;
      ……
  }
});

3.2.2 局部间隔

// 错误
let arr=[1,2],str='hello'+'Lucy';

let myfun=function(arg){
  //todo…
}

// 正确
let arr = [1,2], 
    str = 'hello' + 'Lucy';

let myfun = function(arg) {
    //todo…
}

3.3 JS 注释

3.3.1 文件头部注释

/*
 * @Author: TJ.
 * @Date: 2022-03-24 13:37:38
 * @LastEditors: TJ.
 * @LastEditTime: 2022-03-26 11:36:08
 * @Description: 品牌相关接口
 * @FilePath: \cei-saas-platform\src\api\brand.js
 */

3.3.2 方法注释

/**
 * @Author: TJ
 * 当内容超出指定行数显示 Tooltip
 * @param {Object} obj 事件对象
 * @param {Object} item 数据对象
 * @param {String} val 提示内容
 * @param {Number} num 超出几行显示 Tooltip 
 * @param {String} tooltipModel el-tooltip 的 v-model
 */

3.3.3 单行注释

let funName = function(arg1, arg2) {
  this.arg1 = arg1;

  // 单行注释说明(上面添加一空行, //与说明之间空一格)
  this.arg2 = arg2;
};

3.4 命名规则

变量名应由 26 个大小写字母（A…Z，a…z），10 个数字（0…9），和 “_” （下划线）组成

通常，使用驼峰写法，对象、函数、实例时尤其如此

// 错误
let is_my_object = {};
let is-my-object = {};

// 正确
let isMyObject = {};

构造函数或类使用驼峰式大写

// 错误
let bad = new user({
  name: 'nope'
});

// 正确
let good = new User({
  name: 'nope'
});

常量大写，并用下划线分割，如：
```
NAMES_LIKE_THIS
```

3.5 编码规范

3.5.1 逗号

不要加多余的逗号，这可能会在 IE 下引起错误，同事如果多一个逗号某些 ES3 的实现会计算多数组的长度

// 错误
let hero = {
  firstName: 'Kevin',
  lastName: 'Flynn',
};

// 正确
let hero = {
  firstName: 'Kevin',
  lastName: 'Flynn'
};

3.5.2 分号

本规范遵循 Standard 的规范，不使用分号。

关于应不应该使用分号的讨论有很多，本规范认为非必要的时候，应该不使用分号，好的 JS 程序员应该清楚场景下是一定要加分号的，相信你也是名好的开发者。
```
// 错误
const test = 'good';
(function () {
  const str = 'hahaha';
})()

// 正确
const test = 'good'
;(() => {
  const str = 'hahaha'
})();
```

3.5.3 {} []

new 关键字的使用除了在需要实例化一个对象，或者罕见的需要延时加载数据的情况外，基本上不需要使用 new关键字，在 javascript里分配大量的new变量地址会有效率问题
```
// 错误
const item1 = new Object(),  item2 = new Array();

// 正确
const item1 = {},  item2 = [];
```

3.5.4 字符串

字符串统一使用单引号的形式 ''

// 错误
const department = "LXW"

// 正确
const department = 'LXW'

字符串太长的时候，请不要使用字符串换行符换行\，而是使用+

const str = '找创意，享生活 找创意，享生活' +
  '找创意，享生活 找创意，享生活 找创意，享生活' +
  '找创意，享生活'

程序化生成字符串是，请使用模板字符串

const test = 'test'

// 错误
const str = ['a', 'b', test].join()

// 错误
const str = 'a' + 'b' + test

// 正确
const str = `ab${test}`

3.5.5 比较运算符 & 相等

使用 === 和 !== 而非 == 和 !=
条件声明例如 if 会用 ToBoolean 这个抽象方法将表达式转成布尔值并遵循如下规则
- Objects 等于 true
- Undefined 等于 false
- Null 等于 false
- Booleans 等于 布尔值
- Numbers 在 +0, -0, 或者 NaN 的情况下等于 false, 其他情况是 true
- Strings 为 '' 时等于 false, 否则是 true
```
if ([0] && []) {
  // true
  // 数组(即使是空数组)也是对象，对象等于true
}
```

3.5.6 代码块

// 错误
if (test)
  return false;

// 正确
if (test) return false;

// 或
if (test) {
  return false;
}

// 错误
function() { return false; }

// 正确
function() {
  return false;
}

3.5.7 JS 常见参数命名建议

元素：ele || e
参数：arg
对象：obj
数组：arr
指令：ret
长度：len

四、vue 规范

注：本规范基于 vue 官方风格整理 vue 风格指南

4.1 命名规范

4.1.1 普通变量

命名方法：驼峰命名法
命名规范：
- 命名必须是跟需求相关的词，例如我们要声明一个变量表示 我的老师，我们可以这样定义 :
```
let myTeacher = "我的老师"
```
- 命名是复数的时候，需要加s，例如当我们想声明一个数组用来表示很多朋友，我们可以这样定义：
```
let friends = []
```

4.1.2 常量规范

使用大写字母和下划线来组合命名，下划线用以分割单词
```
const MAX_LIMIT = 150
const URL = 'https://www.taobao.com/'
```

4.1.3 组件命名规范

声明组件：组件应遵循PascalCase约定，也就是组件名应该始终是多个单词的(根组件App除外)，并且单词首字母应该大写
```
// good
export default {
 name: 'TodoItem',
 // ...
}

// bad 
export default {
 name: 'Todo',
 // ...
}
```
使用组件：使用组件应遵循kebab-case 约定，也就是在页面中使用组件，需要前后闭合，并以短线分割
```
<div id="app">
  <todo-item></todo-item>
</div>
```

4.1.4 method 命名规范

驼峰式命名，统一使用动词，或者动词+名词形式

//good：
jumpPage、openUserInfoDialog

//bad：
go、nextPage、show、open、login

请求数据方法以 data 结尾

// good
getListData   postFormData

// bad
getList  postForm

函数方法常用动词

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 聚集

4.1.5 props 命名

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

<!-- bad -->
<script>
props: {
  'greeting-text': String
}
</script>

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

<!-- good -->
<script>
props: {
  greetingText: String
}
</script>

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

4.1.6 view 下的文件命名

每个页面生成一个文件夹和一个 index.vue 文件
使用名词命名，并且使用驼峰命名法

4.2 结构化规范

4.2.1 组件选项顺序

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - metods
  - filter
  - watch

4.2.2 vue 文件基本结构

  <template>
    <div>
      <!--必须在div中编写页面-->
    </div>
  </template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
  </script>
  <!--声明语言，并且添加scoped-->
  <style lang="scss" scoped>
  </style>

4.2.3 多个特性元素规范

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

<!-- 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>

4.2.4 元素特性顺序

原生属性放前面，指令放后面

  - class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind,:
  - v-on,@
  - v-html
  - v-text

4.3 指令规范

4.3.1 指令采用缩写模式

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

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

4.3.2 v-for 必须加上 key

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

4.3.3 避免 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>