前端的開發規範

時間 2019-11-12

標籤前端開發規範简体版

原文原文鏈接

前端的開發規範

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

目錄構建規範
前端命名規範
前端工做規範
開發文檔的書寫規範

1. 前端目錄構建規範

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

1.1 命名原則：

- 簡潔明瞭（以下：）
  * src 源代碼   
  * img  圖片資源    image images
  * js  JavaScript腳本  
  * dep 第三方依賴包     development package
- 不使用複數（以下：）
  * 不使用 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. 前端命名規範

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

CSS命名規範

BEM規範

OOCSS規範

javaScript編寫規範

jslint

eslint

2.1 css命名規範

2.1.1 BEM規範

```前端

概念：
Block Element Modifier，它是一種前端命名方法，旨在幫助開發者實現模塊化、可複用、高可維護性和結構化的CSS代碼。java
BEM是定義了一種css class的命名規範，每一個名稱及其組成部分都是存在必定的含義。jquery
由拉丁字母, 數字, - 組成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.
Namingwebpack

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

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

.header

.site-search
```
```

Element

使用_(兩個)鏈接符來鏈接Block 和 Element。

<!-- e.g. -->

  .block__element

  .header__title

      <div class = "header">
          <h3 class = "header__title"></h3>
      </div>

  .site-search__field

Modifier

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

<!-- e.g. -->

  .block--modifier

  .block__element--modifier

  .header--hide

  .header__title--color-red

  .site-search__field--disabled

  <form class = "user">
      <input type = "text" class = "username"/>
      <input type = "text"/>
      <input type = "text"/>
      <input type = "button" class = "user__submit"/>
  </form>
  .user__submit--disabled: {
      background: #ccc;
  }

實例

```html

css

.form {}

.form--theme-xmas {}

.form--simple {}

.form__input { }

.form__submit {}

.form__submit--disabled {}
- Buttons實例 html

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

最典型的oocss規範使用案例： bootstrap

- 概念
     Object Oriented CSS，面向對象的CSS，旨在編寫高可複用、低耦合和高擴展的CSS代碼。
     OOCSS是以面向對象的思想去定義樣式，將抽象和實現分離，抽離公共代碼。

 - 總結： 
     將重用的東西當作一個對象來看， 而後將不一樣的屬性 放到另外一個類名去
     ```css
       <!-- 舉例：  -->
       .list{
         background: #fff;
       }
       .list-width{
         width: 300px;
       }
       .list-height{
           
       }
       .list-color{
           
       }

ul>li
ul.list
li.list-item
li a.list-link
li h3.list-title
li p.list-text
li button.list-btn-success
li button.list-btn-danger
```

注意：以上css命名規範：解決命名衝突

2.2 js編寫代碼規範

3. 前端工做規範

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

3.1 日報內容以下

- 上午你作什麼
 - 下午你作了什麼
 - 遇到什麼問題？是否有解決？
 - 明天的計劃？（明天準備作什麼）
 - 最後在內容最後面跟上日期
 
 舉例： 
    親愛的老大： 
    
        上午工做內容以下：
            項目首頁佈局完成，首頁邏輯和交互代碼還差2個輪播未完成
            
        下午工做內容以下： 
            項目首頁邏輯和交互代碼所有完成
            
        遇到的困難以下：
            首頁輪播書寫實現防抖有些困難，可是已經解決
            遇到了xxx問題，是否已經解決
            
        明天工做計劃以下： 
            項目分類頁完成
            項目詳情頁完成
            
         請老大熟知！
         
         謝謝
         
                                            技術部 - 前端 - 朱曉航
                                            2019/06/18

3.2 週報內容以下：

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

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

明確郵件發送誰？
- 參與者：必定要想清楚，若是不清楚，記得問一下你直接上司（同事）
郵件的主題：
- 主題必須有且僅有一個
- 必要時，能夠添加：【請批閱】、等字眼

郵件正文

稱呼要明確：

條理分明
舉例：

各位領導好：
    如下內容是xxx 請熟知/請批閱

署名：
- 什麼部門什麼職位什麼姓名什麼時間
附件
- 須要說明附件是作什麼的？
轉發;
- 須要對原郵件進行說明。，而後寫清楚本身的意圖

4. 開發文檔的書寫規範

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

html規範

css規範

js規範

4.1 html規範

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

註釋規範(最好用英文)

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

屬性順序

位置屬性 ( 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.)

以及註釋的寫法

<!-- 舉例：  -->
      .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;

        <!-- 註釋 -->
      }

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

.content ul.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>

屬性使用縮寫：

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

去掉小數點前面的 0

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

4.3 Js規範

語言規範
- 聲明變量必須加上 let 關鍵字.不要再使用 var
- 優先使用箭頭函數
- 使用模板字符串取代鏈接字符串 `` ''+''
使用分號

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

塊內函數聲明
- 不要在塊內聲明一個函數,e.g.
```
if (x) {
      function zxm() {}
  }
```
- 若是確實須要,使用函數表達式來初始化變量
```
if (x) {
      let foo = function() {}
  }
```
循環注意
- forEach
- map
- filter
- every
- some
- for..in
- for...of
- for循環 while
- do...while
命名規範：
- camel 表示駝峯命名法 pascal表示首字母大寫 FatherTitle backgroundColor
- 變量名: 必須使用 camel 命名法
- 參數名: 必須使用 camel 命名法
- 函數名: 必須使用 camel 命名法
- 方法/屬性: 必須使用 camel 命名法
- 私有 ( 保護 ) 成員: 必須如下劃線開頭
- 常量名: 必須使用所有大寫的下劃線命名法,e.g. XTEP_HOST_API
- 類名: 必須使用 pascal 命名法
- 枚舉名: 必須使用 pascal 命名法
- 枚舉的屬性: 必須使用所有大寫的下劃線命名法,e.g. XTEP_HOST_API
- 命名空間: 必須使用 camel 命名法
- 語義: 命名同時還須要關注語義
聲明：
- var let const 應該放在function 已進入函數的時候
- 註釋變量的功能及表明的含義,且應以字母順序排序.每一個變量單獨佔一行以便添加註釋
```

  var totalPrice = 1; //totalPrice表示商品購物車的總價   √
  var num = 10,totalNum = 100 ;           不建議
```

回調函數規範：

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

標點規範

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

函數默認值

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。