前端規範

前端規範

• CSS命名規範
  • BEM規範
  • OOCSS規範
• javaScript編寫規範
  • jslint
  • eslint

1.CSS命名規範

1.1BEM規範

• 概念：
  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;
  }

1.2OOCSS規範

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

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

    <!-- 舉例：  -->
    .list{
      background: #fff;
    }
    .list--width{
      width: 300px;
    }
  

書寫規範

2.1html規範

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>

2.2css規範

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選擇器）
3. 屬性使用縮寫：

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

4.去掉小數點前面的 0

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

2.3Js規範

1. 語言規範
   1.聲明變量使用let或const。不要使用var
   2.優先使用箭頭函數
   3.使用模板字符串取代連接字符串
2. 使用分號
3. 塊內函數聲明
   1.不要在塊內聲明一個函數

     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.命名規範：

1.camel 表示駝峯命名法 pascal表示 首字母大寫
2.變量名: 必須使用 camel 命名法
3.參數名: 必須使用 camel 命名法
4.函數名: 必須使用 camel 命名法
5.方法/屬性: 必須使用 camel 命名法
6.私有 ( 保護 ) 成員: 必須以下劃線開頭
7.常量名: 必須使用全部大寫的下劃線命名法,e.g. XTEP_HOST_API
8.類名: 必須使用 pascal 命名法
9.枚舉名: 必須使用 pascal 命名法
10.枚舉的屬性: 必須使用全部大寫的下劃線命名法,e.g. XTEP_HOST_API
11.命名空間: 必須使用 camel 命名法
12.語義: 命名同時還需要關注語義

6.聲明：

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

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);
 }