肉联帮团队前端代码规范

本文主要是介绍肉联帮团队前端代码规范，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

代码规范参考借鉴自各个团队规范，提供肉联帮前端团队规范。

基本规范

命名规范

命名分类

camelCase（驼峰式，也叫小驼峰命名，e.g. userInfo）
PascalCase（帕斯卡命名式，也叫大驼峰命名，e.g. UserInfo）
kebab-case（短横线连接式，e.g. user-info）
snake_case（下划线连接式，e.g. user_info）

项目命名

全部采用小写方式，以下划线分隔。例：snake_case

目录命名

组件目录使用PascalCase，其他目录统一使用kebab-case风格

HTML命名

单数复数使用kebab_case.js风格

CSS命名

统一使用snake_case.css

HTML命名

统一使用snake_case.html

HTML 规范

语法标准

缩进使用 tab（2 个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线（-）做分隔符；
要在自动闭合标签结尾处使用斜线；

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/image.png" alt="Image" />

    <!-- 属性名全小写，用中划线（-）做分隔符 -->
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>
复制代码

规定字符编码

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  ...
</html>
复制代码

减少标签数量

<!-- bad -->
<span class="avatar">
  <img src="..." />
</span>

<!-- good -->
<img class="avatar" src="..." />
复制代码

语义化标签

html 的标签能使用语义化的，尽量使用语义化标签，避免一个页面都是 div 或者 p 标签

<!-- bad -->
<div>
  <p></p>
</div>

<!-- good -->
<header></header>
<footer></footer>
复制代码

CSS规范

缩进

使用 tab 缩进（2 个空格）

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}
复制代码

分号

每个声明结束都要加分号

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}
复制代码

注释

注释统一使用 /* */

/* 这里是注释 */
.element {
  width: 50px;
  height: 50px;
}
复制代码

引号

url 的内容要用引号
属性选择器中的属性值需要引号

.element:after {
  content: "";
  background-image: url("logo.png");
}

li[data-type="single"] {
  ...;
}
复制代码

命名

类名使用小写字母，以中划线分隔
id 采用驼峰式命名

/* class */
.element-content {
  ...;
}

/* id */
#myDialog {
  ...;
}
复制代码

JavaScript 规范

缩进

使用 tab 缩进（2 个空格）

if (x < y) {
  x += 10;
} else {
  x += 1;
}
复制代码

变量命名

变量采用驼峰式命名camelCase
常量使用全大写，用下划线连接
构造函数和Class采用PascalCase

var thisIsMyName;

var MAX_COUNT = 10;

function Person(name) {
  this.name = name;
}

Class Person {
    
}
复制代码

变量声明

一个函数作用域中所有的变量声明尽量提到函数首部。优先使用块级变量let 和 const，如无需修改的常量使用const

单行长度

单行长度不得超过 100，超过部分需要换行

分号

统一要加分号。

空格

三元运算符'?:'前后
逗号后必须要有空格
代码块'{'前
下列关键字前：else, while, catch, finally
下列关键字后：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
单行注释'//'后（若单行注释和代码同行，则'//'前也需要），多行注释'*'后
对象的属性值前
for 循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格
无论是函数声明还是函数表达式，'{'前一定要有空格
函数的参数之间

例：

// not good
var a = {
  b : 1
};

// good
var a = {
  b: 1
};

// not good
++x;
y++;
z = x ? 1:2;

// good
++x;
y++;
z = x ? 1 : 2;

// not good
var a = [ 1, 2 ];

// good
var a = [1, 2];

// good
var doSomething = function(a, b, c) {
  // do something
};

// good
doSomething(item);

// not good
for (let i = 0;i < 6;i++) {
  x++;
}

// good
for (let i = 0; i < 6; i++) {
  x++;
}
复制代码

空行

变量声明后（当变量声明在代码块的最后一行时，则无需空行）
注释前（当注释在代码块的第一行时，则无需空行）
定义函数前
文件最后保留一个空行

var x = 1;

// 注释前要有空行
if (x >= 1) {
  var y = x + 1;
}

function test () {
  ...
}
复制代码

换行

代码块'{'后和'}'前
变量赋值后

// good
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;

// good
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}



// good
function test() {
    ...
}


// good
var a,foo = 7,
    b, c, bar = 8;
复制代码

注释

单行注释

注释单独一行的情况下，注释的//后面要跟一个空格
注释如果和代码同一行，代码分号结束后，要跟一个空格，注释的//后也要跟一个空格

// 调用函数
foo();

var maxCount = 10; // 这是一个变量
复制代码

多行注释

多行注释使用下面这种形式：

/**
 * 代码注释1
 * 代码注释2
 */
复制代码

多行注释建议在以下几种情况使用：

难于理解的代码段
可能存在错误的代码段
业务逻辑强相关的代码

函数注释

复杂的函数，所有类，都必须进行函数注释，函数注释使用业界统一的规范，方便后续使用 jsdoc 生成文档。最好配置VSCode自动生成模板

例：

/**
 * @description 函数描述的 必填
 * @param id {Number} 传入需要获取名称的人物id 参数必填
 * @return {String} 返回的姓名 返回值必填，空为void
 * @author shi 2015/07/21 作者可选
 * @version 1.1.0 可以不写 版本可选
 * @example 示例代码，可选
 */
function getTaskName(id) {
  let name = "test";
  return name;
}
复制代码

引号

最外层统一使用单引号，除非字符串嵌套的情况使用双引号。

var y = 'foo',
  z = '<div id="test"></div>';
复制代码

对象，数组

对象属性名不需要加引号，如对象属性名是中划线命名的需要加引号（eslint 的 rules）
对象以缩进的形式书写，不要写在一行（单个属性可以写一行，es6 导入方法时可以使用单行）；
数组、对象最后不要有逗号。

// good
var a = {
  b: 1,
  c: 2
};
复制代码

括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

// not good
if (condition) doSomething();

// good
if (condition) {
  doSomething();
}
复制代码

undefined

永远不要直接使用 undefined 进行变量判断；

使用 typeof 和字符串'undefined'对变量进行判断。

// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}
复制代码

不允许存在多层嵌套的条件判断和循环（最多三层）（重点强调⭐）

条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。

// bad
if (x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

// good
return x === 10 ? 'valid' : 'invalid';

// bad
if (!x) {
  if (!y) {
    x = 1;
  } else {
    x = y;
  }
}

// good
x = x || y || 1;
复制代码

Vue规范

目录、文件、组件命名规范

1. 目录

目录统一使用kebab-case风格

2. views下的文件

js类文件使用PascalCase，如UserInfo.js
其他资源文件统一使用kebab-case风格，如user-detail.js, user-detail.css, user-avatar.png

3. 组件文件

命名遵循PascalCase约定。组件文件名除index.vue之外，一律采用PascalCase(大驼峰)写法。原因是引入组件时，组件的变量通常用PascalCase格式，以区别于一般变量。组件文件名与变量名一致，方便对应。

import UserBook from './user/UserBook'
复制代码

组件名应该始终是多个单词的，根组件 App 除外 html元素都是单个单词的（如<article>,<header>)，为了区分组件和一般html元素，组件由多个单词组成，如BookItem.vue，单独的Book.vue不推荐。
组件使用遵循kebab-case 约定在页面中使用组件需要前后闭合，并以短线分隔，如：

<user-book></user-book>

<user-book />
复制代码

开发规范

文件结构

基本结构

顺序：template -> script -> style。一个组件尽量不要超过200行，页面包含独立部分时尽量分离成子组件。页面应该由各个小组件组成

<template>
  <div>
    <component-a />
    <component-b />
    <component-c />
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {};
    },
    created(){},
    methods: {},
  };
</script>
<!-- 声明语言，并且添加scoped -->
<style lang="scss" scoped>...</style>
复制代码

组件/实例的选项顺序

- name          (全局引用)
- components    (模板依赖)
- directives    ...
- filters       ...
- mixins        (组合)
- props         (接口)
- data          (本地状态属性)
- computed      ...
- watch         (响应回调)
- created       (生命周期函数)
- mounted       ...
- methods       (实例属性)
复制代码

Vue Router 规范

router path采用kebab-case格式。

用下划线（如：/user_info）或camelCase（如：/userInfo)的单词被当成一个单词，搜索引擎无法区分语义。

router name采用kebabCase格式。

// bad
{
    path: '/user_info', // user_info当成一个单词
    name: 'UserInfo',
    component: UserInfo,
    meta: {
    title: ' - 用户',
    desc: ''
    }
},

// good
{
    path: '/user-info', // 能解析成user info
    name: 'UserInfo',
    component: UserInfo,
    meta: {
    title: ' - 用户',
    desc: ''
}
复制代码

组件开发规范

1. 注册组件

注册组件的时候，全部使用 PascalCase 格式。

import UserBook from './user/UserBook'
复制代码

2. props 命名规范

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

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

<script>
  props: {
    greetingText: String;
  }
</script>

复制代码

prop定义应该尽量详细

1.申明类型type（必填）

2.提供默认值（必填

3.校验类型(可选)

// bad 这样做只有开发原型系统时可以接受
props: ['status']

// good
props: {
 status: {
   type: String,
   required: true,
   default: ''
   }
 }
}
复制代码

methods 命名规范

驼峰式命名camelCase，操作性函数统一使用动词或者动词+名词形式

jumpPage() {

}

openCarInfoDialog () {
    
}
复制代码

请求数据方法，以 data 结尾

getListData () {
 
}

postFormData () {
    
}
复制代码

注: 尽量使用常用单词开头（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 聚集

复制代码

多个属性的标签元素规范

<!-- bad -->
<img src="https://user-gold-cdn.xitu.io/2020/4/27/171bab9e9687bb00?w=400&h=400&f=png&s=3451" alt="Vue Logo">
<my-component foo="fooattribute" bar="barattribute" baz="bazattribute"></my-component>

<!-- good -->
<img
  src="https://user-gold-cdn.xitu.io/2020/4/27/171bab9e9687bb00?w=400&h=400&f=png&s=3451"
  alt="Vue Logo"
>
<my-component
  foo="fooattribute"
  bar="barattribute"
  baz="bazattribute"
>
</my-component>

复制代码

元素属性的顺序

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

  - 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
复制代码

指令规范

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

// bad
v-bind:code="code"
v-on:click="getUserData"

// good
:code="code"
@click="getUserData"
复制代码

v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一，添加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>
复制代码

避免 v-if 和 v-for 同时用在一个元素上（性能问题）

出现这样的需求，有两种解决方案：

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

 <!-- 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>
复制代码

2.将 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>
复制代码

SASS规范

语法选用

SASS有两种语法格式，一种是 SCSS (Sassy CSS)，另一种是缩进格式（Indented Syntax），有时称之为 Sass。

团队约定

考虑到 SCSS 语法对 CSS 语法友好的兼容性和扩展性，我们在使用 SASS 编写样式的时候，统一使用 SCSS 语法

注释

SASS支持 CSS 标准的多行注释 /* */，同时也支持单行注释 //。

多行注释在使用非 Compressed 模式进行编译后的输出文件中会保留下来，单行注释 // 侧会被移除
多行注释和单行注释在 SASS 编译后输出的压缩 CSS 文件都会被移除
当多行注释内容第一个字符是感叹号 “!” 的时候，即 /*! */，SASS 无论用哪一种编译方式编译注释都会保留
注释内容可以加入 SASS 变量

团队约定

全部遵循 CSS 注释规范
不使用 /*! */ 注释方式
注释内不放 SASS 变量

@charset "UTF-8";

/**
 * @desc File Info
 * @author liqinuo
 * @date 2015-10-10
 */

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

/* module A logo */
.mod_a_logo {}

/* module A nav */
.mod_a_nav {}


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

/* module B logo */
.mod_b_logo {}

/* module B nav */
.mod_b_nav {}
复制代码

嵌套规范

选择器嵌套

/* CSS */
.jdc {}
body .jdc {}

/* SCSS */
.jdc {
    body & {}
}
复制代码

属性嵌套

/* CSS */
.jdc {
    background-color: red;
    background-repeat: no-repeat;
    background-image: url(/img/icon.png);
    background-position: 0 0;
}

/* SCSS */
.jdc {
    background: {
        color: red;
        repeat: no-repeat;
        image: url(/img/icon.png);
        position: 0 0;
    }
}
复制代码

变量

可复用属性尽量抽离为页面变量，易于统一维护

// CSS
.jdc {
    color: red;
    border-color: red;
}

// SCSS
$color: red;
.jdc {
    color: $color;
    border-color: $color;
}
复制代码

混合(mixin)

根据功能定义模块，然后在需要使用的地方通过 @include 调用，避免编码时重复输入代码段

// CSS
.jdc_1 {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.jdc_2 {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

// SCSS
@mixin radius($radius:5px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.jdc_1 {
    @include radius; //参数使用默认值
}
.jdc_2 {
    @include radius(10px);
}



// CSS
.jdc_1 {
    background: url(/img/icon.png) no-repeat -10px 0;
}
.jdc_2 {
    background: url(/img/icon.png) no-repeat -20px 0;
}

// SCSS
@mixin icon($x:0, $y:0) {
    background: url(/img/icon.png) no-repeat $x, $y;
}
.jdc_1 {
    @include icon(-10px, 0);
}
.jdc_2 {
    @include icon(-20px, 0);
}
复制代码

占位选择器 %

如果不调用则不会有任何多余的 css 文件，占位选择器以 % 标识定义，通过 @extend 调用

//scss
%borderbox {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jdc {
    @extend %borderbox;
}
复制代码

extend 继承

可以继承复用公共的属性

// CSS
.jdc_1 {
    font-size: 12px;
    color: red;
}
.jdc_2 {
    font-size: 12px;
    color: red;
    font-weight: bold;
}

// SCSS
.jdc_1 {
    font-size: 12px;
    color: red;
}
.jdc_2 {
    @extend .jdc_1;
    font-weight: bold;
}

// 或者
%font_red {
    font-size: 12px;
    color: red;
}
.jdc_1 {
    @extend %font_red;
}
.jdc_2 {
    @extend %font_red;
    font-weight: bold;
}
复制代码

for 循环

// CSS
.jdc_1 {background-position: 0 -20px;}
.jdc_2 {background-position: 0 -40px;}
.jdc_3 {background-position: 0 -60px;}

// SCSS
@for $i from 1 through 3 {
    .jdc_#{$i} {
        background-position: 0 (-20px) * $i;
    }
}
复制代码

注意： #{} 是连接符，变量连接使用时需要依赖

each 循环

// CSS
.jdc_list {
    background-image: url(/img/jdc_list.png);
}
.jdc_detail {
    background-image: url(/img/jdc_detail.png);
}

// SCSS
@each $name in list, detail {
    .jdc_#{$name} {
        background-image: url(/img/jdc_#{$name}.png);
    }
}


// CSS
.jdc_list {
    background-image: url(/img/jdc_list.png);
    background-color: red;
}
.jdc_detail {
    background-image: url(/img/jdc_detail.png);
    background-color: blue;
}

// SCSS
@each $name, $color in (list, red), (detail, blue) {
    .jdc_#{$name} {
        background-image: url(/img/jdc_#{$name}.png);
        background-color: $color;
    }
}
复制代码

function 函数

@function pxToRem($px) {
    @return $px / 10px * 1rem;
}
.jdc {
    font-size: pxToRem(12px);
}
复制代码

运算规范

运算符之间空出一个空格

.jdc {
    width: 100px - 50px;
    height: 30px / 5;
}
复制代码

注意: 运算单位，单位同时参与运算，所以 10px 不等于 10，乘除运算时需要特别注意

// 正确的运算格式
.jdc {
    width: 100px - 50px;
    width: 100px + 50px;
    width: 100px * 2;
    width: 100px / 2;
}
复制代码

小程序规范

目录、文件、组件命名规范

1. 目录

目录统一使用kebab-case风格

2. page下的文件

js类文件使用PascalCase，如UserInfo.js
其他资源文件统一使用kebab-case风格，如user-detail.js, user-detail.css, user-avatar.png

3. 组件文件

命名遵循PascalCase约定。组件文件名除index.vue之外，一律采用PascalCase(大驼峰)写法。原因是引入组件时，组件的变量通常用PascalCase格式，以区别于一般变量。组件文件名与变量名一致，方便对应。

"usingComponents": {
  "select-store-dialog": "../login/components/SelectStoreDialog/index"
}
复制代码

组件名应该始终是多个单词的,组件由多个单词组成，如BookItem，单独的Book不推荐。
组件使用遵循kebab-case 约定在页面中使用组件需要前后闭合，并以短线分隔，如：

<user-book></user-book>

<user-book />
复制代码

组件的选项顺序

页面组件

- data    (数据)
- 生命周期函数 （onLoad等）  
- 各类方法  （methods）   
复制代码

自定义组件

- properties    (需要传得数据)
- data    (数据)
- 组件钩子函数 （attached等）  
- 页面钩子函数 （show等）  
- 各类方法  （methods）   
复制代码