前端入門必知開發規範

本文主要從如下幾個方面來概述前端的開發規範

1. 目錄構建規範

2. 前端命名規範

3. 前端工做規範

4. 開發文檔的書寫規範

1. 前端目錄構建規範

咱們從命名原則、根目錄、業務邏輯等方面進行目錄構建

1.1 命名原則：

• 簡潔明瞭（以下：）
• src 源代碼
• img 圖片資源
• js JavaScript腳本
• dep 第三方依賴包
• 不使用複數（以下：）
• 不使用 imgs docs

1.2 根目錄（root）結構按職能劃分（以下：）

• src 源代碼（邏輯）
• doc 文檔
• dep 第三方依賴包
• test 測試

1.3 根據業務邏輯進行文件夾的劃分（以下：）

• src目錄名詞解釋：
• common 公共資源
• public/static 靜態資源
• component 組件
• view/tpl 模板文件

src

common 公共資源

img

logo.png

sprites.png

css

reset.css

js

conf.js 項目的配置文件

public/static 靜態資源

js

css

tpl

index.html

shopcar.html

img

component 組件

home

shopcar

login

register

user

list

detail

view/tpl 項目模板 tpl 是 template的縮寫

1.4 總結：

以上目錄開發規範有兩種使用途徑

1. 使用前端工程化工具如webpack、gulp等進行手動打造

2. 利用框架提供的腳手架工具進行修改

2. 前端命名規範

這部份內容我從如下兩個方面來進行講解

· CSS命名規範

o BEM規範

o OOCSS規範

· javaScript編寫規範

o jslint

o eslint

2.1 css命名規範

2.1.1 BEM規範

• 概念：

Block Element Modifier，它是一種前端命名方法，旨在幫助開發者實現模塊化、可複用、高可維護性和結構化的CSS代碼。

• BEM是定義了一種css class的命名規範，每一個名稱及其組成部分都是存在必定的含義。
• 由拉丁字母, 數字, -組成css的單個名稱.
• Block Element Modifier
• 獨立且有意義的實體, e.g. header, container, menu, checkbox, etc.
• Block的一部分且沒有獨立的意義, e.g. header title, menu item, list item, etc.
• Blocks或Elements的一種標誌，能夠用它改變其表現形式、行爲、狀態. e.g. disabled, checked, fixed, etc.
• Naming

由拉丁字母, 數字, -組成css的單個名稱.

• Block

使用簡潔的前綴名字來命名一個獨立且有意義的抽象塊或組件。

<!-- e.g. -->

.block

.header

.site-search

• Element

使用__鏈接符來鏈接Block 和 Element。

<!-- e.g. -->

.block__element

.header__title

.site-search__field

• Modifier

使用--鏈接符來鏈接Block 或 Element 和 Modifier。

<!-- e.g. -->

.block--modifier

.block__element--modifier

.header--hide

.header__title--color-red

.site-search__field--disabled

• 實例

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

.form {}

.form--theme-xmas {}

.form--simple {}

.form__input { }

.form__submit {}

.form__submit--disabled {}

• Buttons實例

<!-- 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文件中 -->

.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規範

• 概念

Object Oriented CSS，面向對象的CSS，旨在編寫高可複用、低耦合和高擴展的CSS代碼。

OOCSS是以面向對象的思想去定義樣式，將抽象和實現分離，抽離公共代碼。

• 總結：

將重用的東西當作一個對象來看， 而後將不一樣的屬性 放到另外一個類名去

<!-- 舉例： -->

.list{

background: #fff;

}

.list--width{

width: 300px;

}

2.2 js編寫代碼規範

· <u>jslint</u>

· <u>eslint</u>

3. 前端工做規範

咱們從 日報 、 週報以及郵件格式三個方面來了解

3.1 日報內容以下

• 上午你作什麼
• 下午你作了什麼
• 遇到什麼問題？是否有解決？
• 明天的計劃？（明天準備作什麼）
• 最後在內容最後面跟上日期

3.2 週報內容以下：

· 2019.05.25-2019.06.2週報：

i. 本週工做主要內容：

§ 完成了宏視雲h5播放器升級及大數據上報；

§ 修復xk-h5播放器bug：在三星手機自帶瀏覽器沒法進行滑動seek;

§ admin-console後臺管理系統初步完成終端訪問頁面和數據統計概覽頁面的製做；

ii. 工做中存在的主要問題：

iii. - webserver大數據展現頁面移植到admin-console後臺管理系統存在bootstrap與jquery.easyui衝突等幾個兼容性問題；

iv. - 解決這個問題的思路可能不是最有效的方法，可能使用iframe會快些；使用iframe存在如何在easyui頁面控制iframe頁面及如何在瀏覽器窗口改變時，iframe也跟着改變等問題；

v. 下週工做計劃：

§ 完成上週未完成的admin-console大數據展現頁面的製做；

§ 完成工做之後，若是有時間的話嘗試下用iframe解決；

§ 詢問師兄有沒有能夠幫忙作的工做；

3.3 經常使用郵件格式以下：

1\. 明確郵件發送誰？

o 參與者： 必定要想清楚， 若是不清楚， 記得問一下你直接上司（同事）

2\. 郵件的主題：

o 主題必須有且僅有一個

o 必要時， 能夠添加： 【請批閱】 、 等字眼

3\. 郵件正文

o 稱呼要明確：

o 條理分明 舉例：

o 各位領導好：

o 如下內容是xxx 請熟知/請批閱

4\. 署名：

o 什麼部分 什麼職位 什麼姓名 什麼時間

5\. 附件

o 須要說明附件是作什麼的？

6\. 轉發;

o 須要對原郵件進行說明。，而後寫清楚本身的意圖

4. 開發文檔的書寫規範

這部份內容從如下幾個部分進行說明

· html規範

· css規範

· js規範

4.1 html規範

1\. 標籤上屬性的順序建議以下： class ( class 是爲高可複用組件設計的,因此應處在第一位) id name (id 更加具體且應該儘可能少使用,因此將它放在第二位) data-**src for type href value placeholder title alt aria-** role required readonly disabled

2\. id/class 命名規則: BEM OOCSS SMACSS(擴展)

3\. 註釋規範(最好用英文)

4\. <div class="container">

5\. <!-- header--start -->

6\. <header></header>

7\. <!-- header--end -->

8.

9\. <!-- content--start -->

10\. <div class="content">

11.

12\. </div>

13\. <!-- content--end -->

14.

15\. <!-- footer--start -->

16\. <footer>

17.

18\. </footer>

19\. <!-- footer--end -->

20\. </div>

4.2 css規範

21. 屬性順序

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

o 大小 ( width height padding margin etc.)

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

o 背景 ( background border etc.)

o 其餘 ( animation transition etc.)

o 以及註釋的寫法

o <!-- 舉例： -->

o .go--top{

o position: fixed;

o right:20px;

o bottom: 50px;

o z-index: 1000;

o display:block;

o

o width: 50px;

o height: 200px;

o

o font-size: 16px;

o

o background: #ccc;

o

o opactiy: 0.5;

o transition: all 0.5s;

o

o <!-- 註釋 -->

o }

22. 儘可能不使用選擇器 （css3選擇器）

.content.first-child

<!-- 舉例： -->

<div class="content">

<ul>

<li>

<a href=""></a>

<a href=""></a>

<a href=""></a>

</li>

</ul>

<ul>

<li>

<a href=""></a>

<a href=""></a>

<a href=""></a>

</li>

</ul>

</div>

23. 屬性使用縮寫：

24\. <!-- 舉例： -->

25\. body{

26\. margin: 10px 0;

27\. background: url('./img.png') center;

28\. }

29\. 去掉小數點前面的 0

30\. body{

31\. margin: 10px .8px;

32\. background: url('./img.png') center;

33\. }

4.3 Js規範

34. 語言規範

o 聲明變量必須加上 let 關鍵字.不要再使用 var

o 優先使用箭頭函數

o 使用模板字符串取代鏈接字符串

35. 使用分號

o 若是僅依靠語句間的隱式分隔,有時會很麻煩,使用分號更能清楚哪裏是語句的起止,並且有些狀況下,漏掉分號會出 BUG

36. 塊內函數聲明

o 不要在塊內聲明一個函數,e.g.

o if (x) {

o function zxm() {}

o }

o 若是確實須要,使用函數表達式來初始化變量

o if (x) {

o let foo = function() {}

o }

37. 循環注意

o forEach

o map

o filter

o every

o some

o for..in

o for...of

o for循環 while

o do...while

38. 命名規範：

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

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

o 參數名: 必須使用 camel 命名法

o 函數名: 必須使用 camel 命名法

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

o 私有 ( 保護 ) 成員: 必須如下劃線開頭

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

o 類名: 必須使用 pascal 命名法

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

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

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

o 語義: 命名同時還須要關注語義

39. 聲明：

o var let const 應該放在function 已進入函數的時候

o 註釋變量的功能及表明的含義,且應以字母順序排序.每一個變量單獨佔一行以便添加註釋

o 舉例：  <!--  -->

o var totalPrice = 1; //totalPrice表示商品購物車的總價 √

o var num = 10,totalNum = 100 ; 不建議

40. 回調函數規範：

回調函數統一使用 Promise 函數,回調成功的參數統一爲 res,錯誤參數爲 err

let callback = new Promise((resolve, reject) => {

if (/* 異步操做成功 */){

resolve(value);

} else {

reject(err);

}

});

callback.then((res) => {

console.log('成功回調！', res);

}).catch((err) => {

console.log('失敗回調！', err);

});

41. 標點規範

js中統一使用反引號（）或是單引號('')， 不使用雙引號("")

42. 函數默認值

函數默認值寫在其餘參數後面

function zxm(a,b,name = 'zxm'){

console.log(name)

}

最後，給你們推薦一個前端學習進階內推交流羣685910553（前端資料分享），無論你在地球哪一個方位，
無論你參加工做幾年都歡迎你的入駐！（羣內會按期免費提供一些羣主收藏的免費學習書籍資料以及整理好的面試題和答案文檔！）

若是您對這個文章有任何異議，那麼請在文章評論處寫上你的評論。

若是您以爲這個文章有意思，那麼請分享並轉發，或者也能夠關注一下表示您對咱們文章的承認與鼓勵。

願你們都能在編程這條路，越走越遠。