超詳細(xì)的Web前端開(kāi)發(fā)規(guī)范手冊(cè)

時(shí)間：2023-08-29 19:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-29 19:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

超詳細(xì)的Web前端開(kāi)發(fā)規(guī)范手冊(cè)：本文主要從以下幾個(gè)方面來(lái)概述前端的開(kāi)發(fā)規(guī)范

1. 目錄構(gòu)建規(guī)范

2. 前端命名規(guī)范

3. 前端工作規(guī)范

4. 開(kāi)發(fā)文檔的書寫規(guī)范

---

1. 前端目錄構(gòu)建規(guī)范

我們從命名原則、根目錄、業(yè)務(wù)邏輯等方面進(jìn)行目錄構(gòu)建

1.1 命名原則：

- 簡(jiǎn)潔明了（如下：）
* src 源代碼
* img 圖片資源
* js JavaScript腳本
* dep 第三方依賴包
- 不使用復(fù)數(shù)（如下：）
* 不使用 imgs docs

1.2 根目錄（root）結(jié)構(gòu)按職能劃分（如下：）

- src 源代碼（邏輯）
- doc 文檔
- dep 第三方依賴包
- test 測(cè)試

1.3 根據(jù)業(yè)務(wù)邏輯進(jìn)行文件夾的劃分（如下：）

- src目錄名詞解釋：
- common 公共資源
- public/static 靜態(tài)資源
- component 組件
- view/tpl 模板文件
```
src
common 公共資源
img
logo.png
sprites.png
css
reset.css
js
conf.js 項(xiàng)目的配置文件
public/static 靜態(tài)資源
js
css
tpl
index.html
shopcar.html
img
component 組件
home
shopcar
login
register
user
list
detail
view/tpl 項(xiàng)目模板 tpl 是 template的縮寫
```

1.4 總結(jié)：

以上目錄開(kāi)發(fā)規(guī)范有兩種使用途徑
1. 使用前端工程化工具如webpack、gulp等進(jìn)行手動(dòng)打造
2. 利用框架提供的腳手架工具進(jìn)行修改

2. 前端命名規(guī)范

這部分內(nèi)容我從以下兩個(gè)方面來(lái)進(jìn)行講解

· CSS命名規(guī)范

BEM規(guī)范

OOCSS規(guī)范

· javaScript編寫規(guī)范

jslint

eslint

2.1 css命名規(guī)范

2.1.1 BEM規(guī)范

- 概念：
Block Element Modifier，它是一種前端命名方法，旨在幫助開(kāi)發(fā)者實(shí)現(xiàn)模塊化、可復(fù)用、高可維護(hù)性和結(jié)構(gòu)化的CSS代碼。
- BEM是定義了一種css class的命名規(guī)范，每個(gè)名稱及其組成部分都是存在一定的含義。
- 由拉丁字母, 數(shù)字, -組成css的單個(gè)名稱.
- Block Element Modifier
- 獨(dú)立且有意義的實(shí)體, e.g. header, container, menu, checkbox, etc.
- Block的一部分且沒(méi)有獨(dú)立的意義, e.g. header title, menu item, list item, etc.
- Blocks或Elements的一種標(biāo)志，可以用它改變其表現(xiàn)形式、行為、狀態(tài). e.g. disabled, checked, fixed, etc.
- Naming
由拉丁字母, 數(shù)字, -組成css的單個(gè)名稱.
- Block
使用簡(jiǎn)潔的前綴名字來(lái)命名一個(gè)獨(dú)立且有意義的抽象塊或組件。
```css
<!-- e.g. -->
.block
.header
.site-search
```
- Element
使用__連接符來(lái)連接Block 和 Element。
```css
<!-- e.g. -->
.block__element
.header__title
.site-search__field
```
- Modifier
使用--連接符來(lái)連接Block 或 Element 和 Modifier。
```css
<!-- e.g. -->
.block--modifier
.block__element--modifier
.header--hide
.header__title--color-red
.site-search__field--disabled
```
- 實(shí)例
```html
<!-- HTML文件 -->
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>
```
```css
<!-- CSS -->
.form {}
.form--theme-xmas {}
.form--simple {}
.form__input { }
.form__submit {}
.form__submit--disabled {}
```
- Buttons實(shí)例
``` html
<!-- HTML文件 -->
<button class="button">
Normal button
</button>
<button class="button button--state-success">
Success button
</button>
<button class="button button--state-danger">
Danger button
</button>
```
```css
<!-- CSS文件中 -->
.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.button--state-danger {
color: #900;
}
```

2.1.2 OOCSS規(guī)范

- 概念
Object Oriented CSS，面向?qū)ο蟮腃SS，旨在編寫高可復(fù)用、低耦合和高擴(kuò)展的CSS代碼。
OOCSS是以面向?qū)ο蟮乃枷肴ザx樣式，將抽象和實(shí)現(xiàn)分離，抽離公共代碼。
- 總結(jié)：
將重用的東西當(dāng)做一個(gè)對(duì)象來(lái)看， 然后將不同的屬性 放到另一個(gè)類名去
```css
<!-- 舉例： -->
.list{
background: #fff;
}
.list--width{
width: 300px;
}
```

2.2 js編寫代碼規(guī)范

· jslint
· eslint

3. 前端工作規(guī)范

我們從 日?qǐng)?bào) 、 周報(bào)以及郵件格式三個(gè)方面來(lái)了解

3.1 日?qǐng)?bào)內(nèi)容如下

- 上午你做什么
- 下午你做了什么
- 遇到什么問(wèn)題？是否有解決？
- 明天的計(jì)劃？（明天準(zhǔn)備做什么）
- 最后在內(nèi)容最后面跟上日期

3.2 周報(bào)內(nèi)容如下：

· 2016.07.25-2016.07.29周報(bào)：

i. 本周工作主要內(nèi)容：

§ 完成了宏視云h5播放器升級(jí)及大數(shù)據(jù)上報(bào)；

§ 修復(fù)xk-h5播放器bug：在三星手機(jī)自帶瀏覽器無(wú)法進(jìn)行滑動(dòng)seek;

§ admin-console后臺(tái)管理系統(tǒng)初步完成終端訪問(wèn)頁(yè)面和數(shù)據(jù)統(tǒng)計(jì)概覽頁(yè)面的制作；

ii. 工作中存在的主要問(wèn)題：

iii. - webserver大數(shù)據(jù)展示頁(yè)面移植到admin-console后臺(tái)管理系統(tǒng)存在bootstrap與jquery.easyui沖突等幾個(gè)兼容性問(wèn)題；

iv. - 解決這個(gè)問(wèn)題的思路可能不是最有效的方法，可能使用iframe會(huì)快些；使用iframe存在如何在easyui頁(yè)面控制iframe頁(yè)面及如何在瀏覽器窗口改變時(shí)，iframe也跟著改變等問(wèn)題；

v. 下周工作計(jì)劃：

§ 完成上周未完成的admin-console大數(shù)據(jù)展示頁(yè)面的制作；

§ 完成工作以后，如果有時(shí)間的話嘗試下用iframe解決；

§ 詢問(wèn)師兄有沒(méi)有可以幫忙做的工作；

3.3 常用郵件格式如下：

1. 明確郵件發(fā)送誰(shuí)？

參與者： 一定要想清楚， 如果不清楚， 記得問(wèn)一下你直接上司（同事）

2. 郵件的主題：

主題必須有且僅有一個(gè)

必要時(shí)， 可以添加： 【請(qǐng)批閱】 、 等字眼

3. 郵件正文

稱呼要明確：

條理分明 舉例：

各位領(lǐng)導(dǎo)好：

以下內(nèi)容是xxx 請(qǐng)熟知/請(qǐng)批閱

4. 署名：

什么部分 什么職位 什么姓名 什么時(shí)間

5. 附件

需要說(shuō)明附件是做什么的？

6. 轉(zhuǎn)發(fā);

需要對(duì)原郵件進(jìn)行說(shuō)明。，然后寫清楚自己的意圖

4. 開(kāi)發(fā)文檔的書寫規(guī)范

這部分內(nèi)容從以下幾個(gè)部分進(jìn)行說(shuō)明

· html規(guī)范

· css規(guī)范

· js規(guī)范

4.1 html規(guī)范

1. 標(biāo)簽上屬性的順序建議如下： class ( class 是為高可復(fù)用組件設(shè)計(jì)的,所以應(yīng)處在第一位) id name (id 更加具體且應(yīng)該盡量少使用,所以將它放在第二位) data-* src for type href value placeholder title alt aria-* role required readonly disabled

2. id/class 命名規(guī)則: BEM OOCSS SMACSS(擴(kuò)展)

3. 注釋規(guī)范(最好用英文)

4.2 css規(guī)范

1. 屬性順序

位置屬性 ( position top right z-index display float etc.)

大小 ( width height padding margin etc.)

文字系列 ( font line-height letter-spacing color text-align ect.)

背景 ( background border etc.)

其他 ( animation transition etc.)

以及注釋的寫法







2. 盡量不使用選擇器 （css3選擇器）

.content.first-child

3. 屬性使用縮寫：

4.3 Js規(guī)范

1. 語(yǔ)言規(guī)范

聲明變量必須加上 let 關(guān)鍵字.不要再使用 var

優(yōu)先使用箭頭函數(shù)

使用模板字符串取代連接字符串

2. 使用分號(hào)

如果僅依靠語(yǔ)句間的隱式分隔,有時(shí)會(huì)很麻煩,使用分號(hào)更能清楚哪里是語(yǔ)句的起止,而且有些情況下,漏掉分號(hào)會(huì)出 BUG

3. 塊內(nèi)函數(shù)聲明

不要在塊內(nèi)聲明一個(gè)函數(shù),e.g.

if (x) {

function zxm() {}

}

如果確實(shí)需要,使用函數(shù)表達(dá)式來(lái)初始化變量

if (x) {

let foo = function() {}

}

4. 循環(huán)注意

forEach

map

filter

every

some

for..in

for...of

for循環(huán) while

do...while

5. 命名規(guī)范：

camel 表示駝峰命名法 pascal表示 首字母大寫

變量名: 必須使用 camel 命名法

參數(shù)名: 必須使用 camel 命名法

函數(shù)名: 必須使用 camel 命名法

方法/屬性: 必須使用 camel 命名法

私有 ( 保護(hù) ) 成員: 必須以下劃線開(kāi)頭

常量名: 必須使用全部大寫的下劃線命名法,e.g. XTEP_HOST_API

類名: 必須使用 pascal 命名法

枚舉名: 必須使用 pascal 命名法

枚舉的屬性: 必須使用全部大寫的下劃線命名法,e.g. XTEP_HOST_API

命名空間: 必須使用 camel 命名法

語(yǔ)義: 命名同時(shí)還需要關(guān)注語(yǔ)義

6. 聲明：

var let const 應(yīng)該放在function 已進(jìn)入函數(shù)的時(shí)候

注釋變量的功能及代表的含義,且應(yīng)以字母順序排序.每個(gè)變量單獨(dú)占一行以便添加注釋

<!-- 舉例： -->
var totalPrice = 1; //totalPrice表示商品購(gòu)物車的總價(jià) √
var num = 10,totalNum = 100 ; 不建議

7. 回調(diào)函數(shù)規(guī)范：

回調(diào)函數(shù)統(tǒng)一使用 Promise 函數(shù),回調(diào)成功的參數(shù)統(tǒng)一為 res,錯(cuò)誤參數(shù)為 err

let callback = new Promise((resolve, reject) => {
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(err);
}
});
callback.then((res) => {
console.log('成功回調(diào)！', res);
}).catch((err) => {
console.log('失敗回調(diào)！', err);
});

8. 標(biāo)點(diǎn)規(guī)范

js中統(tǒng)一使用反引號(hào)（）或是單引號(hào)('')， 不使用雙引號(hào)("")

9. 函數(shù)默認(rèn)值

函數(shù)默認(rèn)值寫在其他參數(shù)后面

function zxm(a,b,name = 'zxm'){
console.log(name)
}