前端的開發規范

本文轉載自查看原文 2019-06-21 19:35 688 Vue/ js

前端的開發規范

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

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

1. 前端目錄構建規范

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

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. 前端命名規范

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

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

  使用簡潔的前綴名字來命名一個獨立且有意義的抽象塊或組件。
    ```css
      <!-- e.g. -->

      .block

      .header

      .site-search
    
    ```

- Element

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

  ```css
    <!-- 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是以面向對象的思想去定義樣式，將抽象和實現分離，抽離公共代碼。

總結：
將重用的東西當做一個對象來看，然后將不同的屬性放到另一個類名去

  <!-- 舉例：  -->
  .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編寫代碼規范

- [jslint](https://www.jslint.com/)
- [eslint](https://cn.eslint.org/)       

## 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 常用郵件格式如下：

1. 明確郵件發送誰？

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

2. 郵件的主題： 

   - 主題必須有且僅有一個
   - 必要時， 可以添加： 【請批閱】 、 等字眼

3. 郵件正文

   - 稱呼要明確： 

   - 條理分明
     舉例：

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

4. 署名： 

   - 什么部門 什么職位  什么姓名 什么時間

5. 附件

   - 需要說明附件是做什么的？

6. 轉發; 

   - 需要對原郵件進行說明。，然后寫清楚自己的意圖

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

   <div class="" id =""></div>

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

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

   ```html
       <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)
  }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Web前端開發規范（一）網頁前端開發規范基於gulp的前端框架開發規范團隊開發前端VUE項目代碼規范 Web前端開發規范 : 文件命名規則 web前端開發_文件/目錄/樣式/函數等命名規范前端開發進階：推薦的 CSS 書寫規范 Web前端開發標准規范總結【規范】前端編碼規范——css 規范 Web前端代碼規范