開發(fā)規(guī)范

前端代碼規(guī)范

Front Standard Guide

前端 JS 項(xiàng)目開發(fā)規(guī)范

規(guī)范的目的是為了編寫高質(zhì)量的代碼，讓你的團(tuán)隊(duì)成員每天得心情都是愉悅的，大家在一起是快樂的。

引自《阿里規(guī)約》的開頭片段：

----現(xiàn)代軟件架構(gòu)的復(fù)雜性需要協(xié)同開發(fā)完成，如何高效地協(xié)同呢？無規(guī)矩不成方圓，無規(guī)范難以協(xié)同，比如，制訂交通法規(guī)表面上是要限制行車權(quán)，實(shí)際上是保障公眾的人身安全，試想如果沒有限速，沒有紅綠燈，誰還敢上路行駛。對(duì)軟件來說，適當(dāng)?shù)囊?guī)范和標(biāo)準(zhǔn)絕不是消滅代碼內(nèi)容的創(chuàng)造性、優(yōu)雅性，而是限制過度個(gè)性化，以一種普遍認(rèn)可的統(tǒng)一方式一起做事，提升協(xié)作效率，降低溝通成本。代碼的字里行間流淌的是軟件系統(tǒng)的血液，質(zhì)量的提升是盡可能少踩坑，杜絕踩重復(fù)的坑，切實(shí)提升系統(tǒng)穩(wěn)定性，碼出質(zhì)量。

一、編程規(guī)約

(一)命名規(guī)范

1.1.1 項(xiàng)目命名

全部采用小寫方式， 以中劃線分隔。

正例：mall-management-system

反例：mall_management-system / mallManagementSystem

1.1.2 目錄命名

全部采用小寫方式， 以中劃線分隔，有復(fù)數(shù)結(jié)構(gòu)時(shí)，要采用復(fù)數(shù)命名法， 縮寫不用復(fù)數(shù)

正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

反例： script / style / demo_scripts / demoStyles / imgs / docs

【特殊】VUE 的項(xiàng)目中的 components 中的組件目錄，使用 kebab-case 命名

正例： head-search / page-loading / authorized / notice-icon

反例： HeadSearch / PageLoading

【特殊】VUE 的項(xiàng)目中的除 components 組件目錄外的所有目錄也使用 kebab-case 命名
正例： page-one / shopping-car / user-management

反例： ShoppingCar / UserManagement

1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名

全部采用小寫方式， 以中劃線分隔

正例： render-dom.js / signup.css / index.html / company-logo.png

反例： renderDom.js / UserManagement.html

1.1.4 命名嚴(yán)謹(jǐn)性

代碼中的命名嚴(yán)禁使用拼音與英文混合的方式，更不允許直接使用中文的方式。 說明：正確的英文拼寫和語法可以讓閱讀者易于理解，避免歧義。注意，即使純拼音命名方式也要避免采用

正例：henan / luoyang / rmb 等國(guó)際通用的名稱，可視同英文。

反例：DaZhePromotion [打折] / getPingfenByName() [評(píng)分] / int 某變量 = 3

杜絕完全不規(guī)范的縮寫，避免望文不知義：

反例：AbstractClass“縮寫”命名成 AbsClass；condition“縮寫”命名成 condi，此類隨意縮寫嚴(yán)重降低了代碼的可閱讀性。

(二)HTML 規(guī)范 （Vue Template 同樣適用）

1.2.1 HTML 類型

推薦使用 HTML5 的文檔類型申明： .
（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限）。

  • 規(guī)定字符編碼
  • IE 兼容模式
  • 規(guī)定字符編碼
  • doctype 大寫

正例：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
  </body>
</html>

1.2.2 縮進(jìn)

縮進(jìn)使用 2 個(gè)空格（一個(gè) tab）

嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)。

1.2.3 分塊注釋

在每一個(gè)塊狀元素，列表元素和表格元素后，加上一對(duì) HTML 注釋。注釋格式

<header>
<div class="container">
<a href="#">

<img src="images/header.jpg" />
</a>
</div>
</header>

</body>


### 1.2.4 語義化標(biāo)簽

HTML5 中新增很多語義化標(biāo)簽，所以優(yōu)先使用語義化標(biāo)簽，避免一個(gè)頁面都是 div 或者 p 標(biāo)簽

正例

<header></header>
<footer></footer>


反例

<div>
<p></p>
</div>


#### 1.2.5 引號(hào)

使用雙引號(hào)(" ") 而不是單引號(hào)(’ ') 。

正例： ``

反例： ``

### (三) CSS 規(guī)范

#### 1.3.1 命名

- 類名使用小寫字母，以中劃線分隔
- id 采用駝峰式命名
- scss 中的變量、函數(shù)、混合、placeholder 采用駝峰式命名

ID 和 class 的名稱總是使用可以反應(yīng)元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱

不推薦：

.fw-800 {
font-weight: 800;
}

.red {
color: red;
}


推薦:

.heavy {
font-weight: 800;
}

.important {
color: red;
}


#### 1.3.2 選擇器

1)css 選擇器中避免使用標(biāo)簽名
從結(jié)構(gòu)、表現(xiàn)、行為分離的原則來看，應(yīng)該盡量避免 css 中出現(xiàn) HTML 標(biāo)簽，并且在 css 選擇器中出現(xiàn)標(biāo)簽名會(huì)存在潛在的問題。

2)很多前端開發(fā)人員寫選擇器鏈的時(shí)候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）。有時(shí)，這可能會(huì)導(dǎo)致疼痛的設(shè)計(jì)問題并且有時(shí)候可能會(huì)很耗性能。然而，在任何情況下，這是一個(gè)非常不好的做法。如果你不寫很通用的，需要匹配到 DOM 末端的選擇器， 你應(yīng)該總是考慮直接子選擇器。

不推薦:

.content .title {
font-size: 2rem;
}


推薦:

.content > .title {
font-size: 2rem;
}


#### 1.3.3 盡量使用縮寫屬性

不推薦：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;


推薦：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;


#### 1.3.4 每個(gè)選擇器及屬性獨(dú)占一行

不推薦：

button{
width:100px;height:50px;color:#fff;background:#00a0e9;
}


推薦：

button{
width:100px;
height:50px;
color:#fff;
background:#00a0e9;
}


#### 1.3.5 省略0后面的單位

不推薦：

div{
padding-bottom: 0px;
margin: 0em;
}


推薦：

div{
padding-bottom: 0;
margin: 0;
}


#### 1.3.6 避免使用ID選擇器及全局標(biāo)簽選擇器防止污染全局樣式

不推薦：

header{

padding-bottom: 0px;
margin: 0em;
}


推薦：

.header{
padding-bottom: 0px;
margin: 0em;
}


### (四) LESS 規(guī)范

#### 1.4.1 代碼組織

##### 1)將公共less文件放置在style/less/common文件夾

例:// color.less,common.less

##### 2)按以下順序組織

1、@import;
2、變量聲明;
3、樣式聲明;

@import "mixins/size.less";

@default-text-color: #333;

.page {
width: 960px;
margin: 0 auto;
}


#### 1.4.2 避免嵌套層級(jí)過多

將嵌套深度限制在3級(jí)。對(duì)于超過4級(jí)的嵌套，給予重新評(píng)估。這可以避免出現(xiàn)過于詳實(shí)的CSS選擇器。
避免大量的嵌套規(guī)則。當(dāng)可讀性受到影響時(shí)，將之打斷。推薦避免出現(xiàn)多于20行的嵌套規(guī)則出現(xiàn)

不推薦：

.main{
.title{
.name{
color:#fff
}
}
}


推薦：

.main-title{
.name{
color:#fff
}
}


### (五) Javascript 規(guī)范

#### 1.5.1 命名

##### 1) 采用小寫駝峰命名 lowerCamelCase，代碼中的命名均不能以下劃線，也不能以下劃線或美元符號(hào)結(jié)束

反例： `_name / name_ / name$`

##### 2) 方法名、參數(shù)名、成員變量、局部變量都統(tǒng)一使用 lowerCamelCase 風(fēng)格，必須遵從駝峰形式。

正例： `localValue / getHttpMessage() / inputUserId`

****其中 method 方法命名必須是 動(dòng)詞 或者 動(dòng)詞+名詞 形式\****

正例：`saveShopCarData /openShopCarInfoDialog`

反例：`save / open / show / go`

****特此說明，增刪查改，詳情統(tǒng)一使用如下 5 個(gè)單詞，不得使用其他（目的是為了統(tǒng)一各個(gè)端）\****

add / update / delete / detail / get


**附： 函數(shù)方法常用的動(dòng)詞:**

get 獲取/set 設(shè)置,
add 增加/remove 刪除
create 創(chuàng)建/destory 移除
start 啟動(dòng)/stop 停止
open 打開/close 關(guān)閉,
read 讀取/write 寫入
load 載入/save 保存,
create 創(chuàng)建/destroy 銷毀
begin 開始/end 結(jié)束,
backup 備份/restore 恢復(fù)
import 導(dǎo)入/export 導(dǎo)出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附著/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標(biāo)記
copy 復(fù)制/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啟動(dòng)/run 運(yùn)行
compile 編譯/execute 執(zhí)行,
debug 調(diào)試/trace 跟蹤
observe 觀察/listen 監(jiān)聽,
build 構(gòu)建/publish 發(fā)布
input 輸入/output 輸出,
encode 編碼/decode 解碼
encrypt 加密/decrypt 解密,
compress 壓縮/decompress 解壓縮
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 連接/disconnect 斷開,
send 發(fā)送/receive 接收
download 下載/upload 上傳,
refresh 刷新/synchronize 同步
update 更新/revert 復(fù)原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展開/collapse 折疊
begin 起始/end 結(jié)束,
start 開始/finish 完成
enter 進(jìn)入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集


##### 3) 常量命名全部大寫，單詞間用下劃線隔開，力求語義表達(dá)完整清楚，不要嫌名字長(zhǎng)。

正例： `MAX_STOCK_COUNT`

反例： `MAX_COUNT`

#### 1.5.2 代碼格式

##### 1) 使用 2 個(gè)空格進(jìn)行縮進(jìn)

正例：

if (x < y) {
x += 10;
} else {
x += 1;
}


##### 2) 不同邏輯、不同語義、不同業(yè)務(wù)的代碼之間插入一個(gè)空行分隔開來以提升可讀性。

> 說明：任何情形，沒有必要插入多個(gè)空行進(jìn)行隔開。

#### 1.5.3 字符串

統(tǒng)一使用單引號(hào)(‘)，不使用雙引號(hào)(“)。這在創(chuàng)建 HTML 字符串非常有好處：

正例:

let str = 'foo';
let testDiv = '<div id="test"></div>';


反例:

let str = 'foo';
let testDiv = "<div id='test'></div>";


#### 1.5.4 對(duì)象聲明

##### 1)使用字面值創(chuàng)建對(duì)象

正例： `let user = {};`

反例： `let user = new Object();`

##### 2) 使用字面量來代替對(duì)象構(gòu)造器

正例：

var user = {
age: 0,
name: 1,
city: 3
};


反例：

var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;


#### 1.5.5 使用 ES6,7

必須優(yōu)先使用 ES6,7 中新增的語法糖和函數(shù)。這將簡(jiǎn)化你的程序，并讓你的代碼更加靈活和可復(fù)用。

> 必須強(qiáng)制使用 ES6, ES7 的新語法，比如箭頭函數(shù)、await/async ， 解構(gòu)， let ， for…of 等等

#### 1.5.6 括號(hào)

下列關(guān)鍵字后必須有大括號(hào)（即使代碼塊的內(nèi)容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

正例：

if (condition) {
doSomething();
}


反例：

if (condition) doSomething();


#### 1.5.7 undefined 判斷

永遠(yuǎn)不要直接使用 undefined 進(jìn)行變量判斷；使用 typeof 和字符串’undefined’對(duì)變量進(jìn)行判斷。

正例：

if (typeof person === 'undefined') {
...
}


反例：

if (person === undefined) {
...
}


#### 1.5.8 條件判斷和循環(huán)最多三層

條件判斷能使用三目運(yùn)算符和邏輯運(yùn)算符解決的，就不要使用條件判斷，但是謹(jǐn)記不要寫太長(zhǎng)的三目運(yùn)算符。如果超過 3 層請(qǐng)抽成函數(shù)，并寫清楚注釋。

#### 1.5.9 this 的轉(zhuǎn)換命名

對(duì)上下文 this 的引用只能使用’self’來命名

#### 1.5.10 慎用 console.log

因 console.log 大量使用會(huì)有性能問題，所以在非 webpack 項(xiàng)目中謹(jǐn)慎使用 log 功能

# 二、Vue 項(xiàng)目規(guī)范

### (一) Vue 編碼基礎(chǔ)

vue 項(xiàng)目規(guī)范以 Vue 官方規(guī)范 （https://cn.vuejs.org/v2/style-guide/） 中的 A 規(guī)范為基礎(chǔ)，在其上面進(jìn)行項(xiàng)目開發(fā)，故所有代碼均遵守該規(guī)范。

> 請(qǐng)仔仔細(xì)細(xì)閱讀 Vue 官方規(guī)范，切記，此為第一步。

#### 2.1.1. 組件規(guī)范

##### 1) 組件名為多個(gè)單詞。

組件名應(yīng)該始終是多個(gè)單詞組成（大于等于 2），且命名規(guī)范為`KebabCase`格式。
這樣做可以避免跟現(xiàn)有的以及未來的 HTML 元素相沖突，因?yàn)樗械?HTML 元素名稱都是單個(gè)單詞的。

正例：

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


反例：

export default {
name: 'Todo',
// ...
}
export default {
name: 'todo-item',
// ...
}


##### 2) 組件文件名為 pascal-case 格式

正例：

components/
|- my-component.vue


反例：

components/
|- myComponent.vue
|- MyComponent.vue


##### 3) 基礎(chǔ)組件文件名為 base 開頭，使用完整單詞而不是縮寫。

正例：

components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue


反例：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue


##### 4) 和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名

正例：

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整單詞）


反例：

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了縮寫）


##### 5) 在 Template 模版中使用組件，應(yīng)使用 PascalCase 模式，并且使用自閉合組件。

正例：


<MyComponent />
<Row><table :column="data"/></Row>


反例：

<my-component /> <row><table :column="data"/></row>


##### 6) 組件的 data 必須是一個(gè)函數(shù)

當(dāng)在組件中使用 data 屬性的時(shí)候 (除了 new Vue 外的任何地方)，它的值必須是返回一個(gè)對(duì)象的函數(shù)。 因?yàn)槿绻苯邮且粋€(gè)對(duì)象的話，子組件之間的屬性值會(huì)互相影響。

正例：

export default {
data () {
return {
name: 'jack'
}
}
}


反例：

export default {
data: {
name: 'jack'
}
}


##### 7) Prop 定義應(yīng)該盡量詳細(xì)

- 必須使用 camelCase 駝峰命名
- 必須指定類型
- 必須加上注釋，表明其含義
- 必須加上 required 或者 default，兩者二選其一
- 如果有業(yè)務(wù)需要，必須加上 validator 驗(yàn)證

正例：

props: {
// 組件狀態(tài)，用于控制組件的顏色
status: {
type: String,
required: true,
validator: function (value) {
return [
'succ',
'info',
'error'
].indexOf(value) !== -1
}
},
// 用戶級(jí)別，用于顯示皇冠個(gè)數(shù)
userLevel：{
type: String,
required: true
}
}


##### 8) 為組件樣式設(shè)置作用域

正例：

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


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


反例：

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

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


##### 9) 如果特性元素較多，應(yīng)該主動(dòng)換行。

正例：

<MyComponent foo="a" bar="b" baz="c"
foo="a" bar="b" baz="c"
foo="a" bar="b" baz="c"
/>


反例：

<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c"/>


#### 2.1.2. 模板中使用簡(jiǎn)單的表達(dá)式

組件模板應(yīng)該只包含簡(jiǎn)單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法。復(fù)雜表達(dá)式會(huì)讓你的模板變得不那么聲明式。我們應(yīng)該盡量描述應(yīng)該出現(xiàn)的是什么，而非如何計(jì)算那個(gè)值。而且計(jì)算屬性和方法使得代碼可以重用。

正例：

<template>
<p>{{ normalizedFullName }}</p>
</template>

// 復(fù)雜表達(dá)式已經(jīng)移入一個(gè)計(jì)算屬性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}


反例：

<template>
<p>
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
</p>
</template>


#### 2.1.3 指令都使用縮寫形式

指令推薦都使用縮寫形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)

正例：

<input
@input="onInput"
@focus="onFocus"


反例：

<input
v-on:input="onInput"
@focus="onFocus"


#### 2.1.4 標(biāo)簽順序保持一致

單文件組件應(yīng)該總是讓標(biāo)簽順序保持為 `

正例：

<template>...</template>
<script>...</script>
<style>...</style>


反例：

<template>...</template>
<style>...</style>
<script>...</script>


#### 2.1.5 必須為 v-for 設(shè)置鍵值 key

#### 2.1.6 v-show 與 v-if 選擇

如果運(yùn)行時(shí)，需要非常頻繁地切換，使用 v-show ；如果在運(yùn)行時(shí)，條件很少改變，使用 v-if。

#### 2.1.7 script 標(biāo)簽內(nèi)部結(jié)構(gòu)順序

components > props > data > computed > watch > filter > 鉤子函數(shù)（鉤子函數(shù)按其執(zhí)行順序） > methods

#### 2.1.8 Vue Router 規(guī)范

##### 1) 頁面跳轉(zhuǎn)數(shù)據(jù)傳遞使用路由參數(shù)

頁面跳轉(zhuǎn)，例如 A 頁面跳轉(zhuǎn)到 B 頁面，需要將 A 頁面的數(shù)據(jù)傳遞到 B 頁面，推薦使用 路由參數(shù)進(jìn)行傳參，而不是將需要傳遞的數(shù)據(jù)保存 vuex，然后在 B 頁面取出 vuex 的數(shù)據(jù)，因?yàn)槿绻?B 頁面刷新會(huì)導(dǎo)致 vuex 數(shù)據(jù)丟失，導(dǎo)致 B 頁面無法正常顯示數(shù)據(jù)。

正例：

let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });


##### 2) 使用路由懶加載（延遲加載）機(jī)制


{
    path: '/uploadAttachment',
    name: 'uploadAttachment',
    meta: {
      title: '上傳附件'
    },
    component: () => import('@/view/components/uploadAttachment/index.vue')
  },


##### 3) router 中的命名規(guī)范

path、childrenPoints 命名規(guī)范采用`kebab-case`命名規(guī)范（盡量vue文件的目錄結(jié)構(gòu)保持一致，因?yàn)槟夸?、文件名都是`kebab-case`，這樣很方便找到對(duì)應(yīng)的文件）

name 命名規(guī)范采用`KebabCase`命名規(guī)范且和component組件名保持一致?。ㄒ?yàn)橐３謐eep-alive特性，keep-alive按照component的name進(jìn)行緩存，所以兩者必須高度保持一致）

// 動(dòng)態(tài)加載
export const reload = [
{
path: '/reload',
name: 'reload',
component: Main,
meta: {
title: '動(dòng)態(tài)加載',
icon: 'icon iconfont'
},

children: [
  {
    path: '/reload/smart-reload-list',
    name: 'SmartReloadList',
    meta: {
      title: 'SmartReload',
      childrenPoints: [
        {
          title: '查詢',
          name: 'smart-reload-search'
        },
        {
          title: '執(zhí)行reload',
          name: 'smart-reload-update'
        },
        {
          title: '查看執(zhí)行結(jié)果',
          name: 'smart-reload-result'
        }
      ]
    },
    component: () =>
      import('@/views/reload/smart-reload/smart-reload-list.vue')
  }
]

}
];


##### 4) router 中的 path 命名規(guī)范

path除了采用`kebab-case`命名規(guī)范以外，必須以 / 開頭，即使是children里的path也要以 / 開頭。如下示例

- 

目的：

經(jīng)常有這樣的場(chǎng)景：某個(gè)頁面有問題，要立刻找到這個(gè)vue文件，如果不用以/開頭，path為parent和children組成的，可能經(jīng)常需要在router文件里搜索多次才能找到，而如果以/開頭，則能立刻搜索到對(duì)應(yīng)的組件
*

{
path: '/file',
name: 'File',
component: Main,
meta: {
title: '文件服務(wù)',
icon: 'ios-cloud-upload'
},
children: [
{
path: '/file/file-list',
name: 'FileList',
component: () => import('@/views/file/file-list.vue')
},
{
path: '/file/file-add',
name: 'FileAdd',
component: () => import('@/views/file/file-add.vue')
},
{
path: '/file/file-update',
name: 'FileUpdate',
component: () => import('@/views/file/file-update.vue')
}
]
}


### (二) Vue 項(xiàng)目目錄規(guī)范

#### 2.2.1 基礎(chǔ)

vue 項(xiàng)目中的所有命名一定要與后端命名統(tǒng)一。

比如權(quán)限：后端 privilege, 前端無論 router , store, api 等都必須使用 privielege 單詞！

#### 2.2.2 使用 Vue-cli 腳手架

使用 vue-cli3 來初始化項(xiàng)目，項(xiàng)目名按照上面的命名規(guī)范。

#### 2.2.3 目錄說明

目錄名按照上面的命名規(guī)范，其中 components 組件用大寫駝峰，其余除 components 組件目錄外的所有目錄均使用 kebab-case 命名。

src 源碼目錄
|-- api 所有api接口
|-- assets 靜態(tài)資源，images, icons, styles等
|-- components 公用組件
|-- config 配置信息
|-- constants 常量信息，項(xiàng)目所有Enum, 全局常量等
|-- directives 自定義指令
|-- filters 過濾器，全局工具
|-- datas 模擬數(shù)據(jù)，臨時(shí)存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模擬接口，臨時(shí)存放
|-- plugins 插件，全局使用
|-- router 路由，統(tǒng)一管理
|-- store vuex, 統(tǒng)一管理
|-- themes 自定義樣式主題
|-- views 視圖目錄
| |-- role role模塊名
| |-- |-- role-list.vue role列表頁面
| |-- |-- role-add.vue role新建頁面
| |-- |-- role-update.vue role更新頁面
| |-- |-- index.less role模塊樣式
| |-- |-- components role模塊通用組件文件夾
| |-- employee employee模塊


##### 1) api 目錄

- 文件、變量命名要與后端保持一致。
- 此目錄對(duì)應(yīng)后端 API 接口，按照后端一個(gè) controller 一個(gè) api js 文件。若項(xiàng)目較大時(shí)，可以按照業(yè)務(wù)劃分子目錄，并與后端保持一致。
- api 中的方法名字要與后端 api url 盡量保持語義高度一致性。
- 對(duì)于 api 中的每個(gè)方法要添加注釋，注釋與后端 swagger 文檔保持一致。

正例：

后端 url： EmployeeController.java

/employee/add
/employee/delete/{id}
/employee/update


前端： employee.js

// 添加員工
addEmployee: (data) => {
return postAxios('/employee/add', data)
},
// 更新員工信息
updateEmployee: (data) => {
return postAxios('/employee/update', data)
},
// 刪除員工
deleteEmployee: (employeeId) => {
return postAxios('/employee/delete/' + employeeId)
},


##### 2) assets 目錄

assets 為靜態(tài)資源，里面存放 images, styles, icons 等靜態(tài)資源，靜態(tài)資源命名格式為 kebab-case

|assets
|-- icons
|-- images
| |-- background-color.png
| |-- upload-header.png
|-- styles


##### 3) components 目錄

此目錄應(yīng)按照組件進(jìn)行目錄劃分，目錄命名為 KebabCase，組件命名規(guī)則也為 KebabCase

|components
|-- error-log
| |-- index.vue
| |-- index.less
|-- markdown-editor
| |-- index.vue
| |-- index.js
|-- kebab-case


##### 4) constants 目錄

此目錄存放項(xiàng)目所有常量，如果常量在 vue 中使用，請(qǐng)使用 vue-enum 插件(https://www.npmjs.com/package/vue-enum)

目錄結(jié)構(gòu)：

|constants
|-- index.js
|-- role.js
|-- employee.js


例子： employee.js

export const EMPLOYEE_STATUS = {
NORMAL: {
value: 1,
desc: '正常'
},
DISABLED: {
value: 1,
desc: '禁用'
},
DELETED: {
value: 2,
desc: '已刪除'
}
};

export const EMPLOYEE_ACCOUNT_TYPE = {
QQ: {
value: 1,
desc: 'QQ登錄'
},
WECHAT: {
value: 2,
desc: '微信登錄'
},
DINGDING: {
value: 3,
desc: '釘釘?shù)卿?
},
USERNAME: {
value: 4,
desc: '用戶名密碼登錄'
}
};

export default {
EMPLOYEE_STATUS,
EMPLOYEE_ACCOUNT_TYPE
};


##### 5) router 與 store 目錄

這兩個(gè)目錄一定要將業(yè)務(wù)進(jìn)行拆分，不能放到一個(gè) js 文件里。

router 盡量按照 views 中的結(jié)構(gòu)保持一致

store 按照業(yè)務(wù)進(jìn)行拆分不同的 js 文件

##### 6) views 目錄

- 命名要與后端、router、api 等保持一致
- components 中組件要使用 PascalCase 規(guī)則

|-- views 視圖目錄
| |-- role role模塊名
| | |-- role-list.vue role列表頁面
| | |-- role-add.vue role新建頁面
| | |-- role-update.vue role更新頁面
| | |-- index.less role模塊樣式
| | |-- components role模塊通用組件文件夾
| | | |-- role-header.vue role頭部組件
| | | |-- role-modal.vue role彈出框組件
| |-- employee employee模塊
| |-- behavior-log 行為日志log模塊
| |-- code-generator 代碼生成器模塊


#### 2.2.4 注釋說明

整理必須加注釋的地方

- 公共組件使用說明
- api 目錄的接口 js 文件必須加注釋
- store 中的 state, mutation, action 等必須加注釋
- vue 文件中的 template 必須加注釋，若文件較大添加 start end 注釋
- vue 文件的 methods，每個(gè) method 必須添加注釋
- vue 文件的 data, 非常見單詞要加注釋

#### 2.2.5 其他

##### 1) 盡量不要手動(dòng)操作 DOM

因使用 vue 框架，所以在項(xiàng)目開發(fā)中盡量使用 vue 的數(shù)據(jù)驅(qū)動(dòng)更新 DOM，盡量（不到萬不得已）不要手動(dòng)操作 DOM，包括：增刪改 dom 元素、以及更改樣式、添加事件等。

##### 2) 刪除無用代碼

因使用了 git/svn 等代碼版本工具，對(duì)于無用代碼必須及時(shí)刪除，例如：一些調(diào)試的 console 語句、無用的棄用功能代碼。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容