前端的開發規範

前端的開發規範

版權聲明：本文爲CSDN博主「weixin_41640944」的原創文章，遵循CC 4.0 by-sa版權協議，附上本聲明。 原文連接：https://blog.csdn.net/weixin_41640944/article/details/89462053

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

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命名規範
  • BEM規範
  • OOCSS規範
• javaScript編寫規範
  • jslint
  • 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編寫代碼規範

jslint eslint

3. 前端工做規範

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

3.1 日報內容以下

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

3.2 週報內容以下：

2016.07.25-2016.07.29週報： 本週工做主要內容： 完成了宏視雲h5播放器升級及大數據上報； 修復xk-h5播放器bug：在三星手機自帶瀏覽器沒法進行滑動seek; admin-console後臺管理系統初步完成終端訪問頁面和數據統計概覽頁面的製做； 工做中存在的主要問題： - webserver大數據展現頁面移植到admin-console後臺管理系統存在bootstrap與jquery.easyui衝突等幾個兼容性問題； - 解決這個問題的思路可能不是最有效的方法，可能使用iframe會快些；使用iframe存在如何在easyui頁面控制iframe頁面及如何在瀏覽器窗口改變時，iframe也跟着改變等問題； 下週工做計劃： 完成上週未完成的admin-console大數據展現頁面的製做； 完成工做之後，若是有時間的話嘗試下用iframe解決； 詢問師兄有沒有能夠幫忙作的工做；

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

明確郵件發送誰？
    參與者： 必定要想清楚， 若是不清楚， 記得問一下你直接上司（同事）

郵件的主題：
    主題必須有且僅有一個
    必要時， 能夠添加： 【請批閱】 、 等字眼

郵件正文

    稱呼要明確：

    條理分明
    舉例：

      各位領導好：
          如下內容是xxx 請熟知/請批閱
        1 2 署名： 什麼部分 什麼職位 什麼姓名 什麼時間 附件 須要說明附件是作什麼的？ 轉發; 須要對原郵件進行說明。，而後寫清楚本身的意圖

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. 註釋規範(最好用英文)

   <div class="container"> <!-- header--start --> <header></header> <!-- header--end --> <!-- content--start --> <div class="content"> </div> <!-- content--end --> <!-- footer--start --> <footer> </footer> <!-- footer--end --> </div>

4.2 css規範

1. 屬性順序

   1. 位置屬性 ( position top right z-index display float etc.)
   2. 大小 ( width height padding margin etc.)
   3. 文字系列 ( font line-height letter-spacing color text-align ect.)
   4. 背景 ( background border etc.)
   5. 其餘 ( animation transition etc.)
   6. 以及註釋的寫法

   <!-- 舉例： --> .go--top{ position: fixed; right:20px; bottom: 50px; z-index: 1000; display:block; width: 50px; height: 200px; font-size: 16px; background: #ccc; opactiy: 0.5; transition: all 0.5s; <!-- 註釋 --> } 

2. 儘可能不使用選擇器 （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> 

3. 屬性使用縮寫：

<!-- 舉例： --> body{ margin: 10px 0; background: url('./img.png') center; } 

4. 去掉小數點前面的 0

body{ margin: 10px .8px; background: url('./img.png') center; } 

4.3 Js規範

1. 語言規範

   1. 聲明變量必須加上 let 關鍵字.不要再使用 var
   2. 優先使用箭頭函數
   3. 使用模板字符串取代鏈接字符串

2. 使用分號

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

3. 塊內函數聲明

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

   if (x) { function zxm() {} } 

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

   if (x) { let foo = function() {} } 

4. 循環注意

   • forEach
   • map
   • filter
   • every
   • some
   • for…in
   • for…of
   • for循環 while
   • do…while

5. 命名規範：

   • camel 表示駝峯命名法 pascal表示 首字母大寫
   • 變量名: 必須使用 camel 命名法
   • 參數名: 必須使用 camel 命名法
   • 函數名: 必須使用 camel 命名法
   • 方法/屬性: 必須使用 camel 命名法
   • 私有 ( 保護 ) 成員: 必須如下劃線開頭
   • 常量名: 必須使用所有大寫的下劃線命名法,e.g. XTEP_HOST_API
   • 類名: 必須使用 pascal 命名法
   • 枚舉名: 必須使用 pascal 命名法
   • 枚舉的屬性: 必須使用所有大寫的下劃線命名法,e.g. XTEP_HOST_API
   • 命名空間: 必須使用 camel 命名法
   • 語義: 命名同時還須要關注語義

6. 聲明：

   • var let const 應該放在function 已進入函數的時候
   • 註釋變量的功能及表明的含義,且應以字母順序排序.每一個變量單獨佔一行以便添加註釋

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

7. 回調函數規範：

   回調函數統一使用 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); }); 

8. 標點規範

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

9. 函數默認值

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

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