開發(fā)規(guī)范（前端）

版本：v1.0

日期：2022-01-15

一：命名規(guī)范

命名統(tǒng)一使用英文單詞，要求簡單，通俗易懂。

項目命名

使用小寫字母，多單詞采用 “ – ” 中劃線拼接。

例如：my-world / world

文件夾命名

使用小寫字母，多單詞采用 “ – ” 中劃線拼接。

例如：home-page / home

文件命名

使用小寫字母，多單詞采用 “ – ” 中劃線拼接。

例如：home-page / home

變量命名

使用小駝峰命名。如果單文件中變量過多，可能會出現(xiàn)重名的情況，建議增加前綴來區(qū)分不同功能的變量?；蛘甙炎兞坎鸱值讲煌奈募小?/p>

例如：maxHeight / userMaxHeight / homeMaxHeight

常量命名

全部使用大寫字母。多單詞采用 “ _ ” 下劃線隔開。

例如：const USER_TYPE = “9001”；

函數(shù)命名

規(guī)范一：使用小駝峰命名。被繼承的父類的私有函數(shù)需要增加下劃線前綴 “ _getPrice() ”。

例如：showToast / _getPrice

規(guī)范二：根據(jù)函數(shù)作用，適當添加動詞前綴。

例如：getSize / setSize / hasNumber

前綴請查看文檔最底部“附件一：（函數(shù)命名動詞前綴整合）”

二：注釋規(guī)范

簡單易懂的變量方法，盡量編寫注釋。復雜難懂的變量方法，必須編寫注釋

單行注釋 //

在代碼上一行編寫單行注釋，簡單介紹下方代碼用途、注意事項等內(nèi)容。

多行注釋 /* */ 或 /** */

方法必須使用多行注釋。當變量或代碼塊復雜，單行注釋不足以解釋清楚的時候，也需要使用多行注釋。

例如：

// 商品名稱

goodsName: ‘獼猴桃’,

/**

* 傳入人員姓名，從數(shù)據(jù)庫中查詢該人員的手機號碼

* @param {String} userName 姓名

* @return {Number} 手機號

*/

getUserMobile(userName){

……

return mobile;

},

三：CSS規(guī)范

1. class類名使用小寫字母，多單詞采用 “ – ” 中劃線拼接。

2. id采用小駝峰命名。

3. scss、less中變量、函數(shù)、mixin統(tǒng)一采用小駝峰命名。

4. 縮進整潔有序。

四：項目規(guī)范

項目結(jié)構(gòu)建議規(guī)范（實際根據(jù)具體需求邏輯進行調(diào)整）

src

api 所有接口封裝

asstes 資源文件

– images 圖片

– videos

components 所有組件

router 路由

store 狀態(tài)管理

styles 公共樣式

utils 公共函數(shù)庫

view 視圖

– home 視圖文件需要分模塊分文件夾存放

home.vue

home-detail.view

– user

五：附件

附件一：（函數(shù)命名動詞前綴整合）