（個人）項目基本規範

項目基本規範

• HTML 規範

  1. 模塊註釋（儘可能標記模塊）

  <template>
    <!-- 訂單管理 -->
    <div class="inner-content order-manage-content">
    ...
    </div>
  </template>
  複製代碼

  2. 標籤屬性順序

     • class
     • id、name
     • data-*
     • src、for、type、href
     • title、alt
     • aria-*、role

  3. 編寫 HTML 代碼時，儘可能避免多餘的無心義的父元素。

• CSS 規範

  1. 命名規範

     一概小寫英文 命名短且語義化 多單詞鏈接（建議使用 BEM 命名原理）
     我的推薦能夠按照
     父組件：文件名稱-元素–修飾符來進行命名
     子組件：文件名稱-組件名稱-元素–修飾符來進行命名

  2. 數值：小於 1 的小數，可省略 0，opacity: .4，爲 0 的就不要單位 margin: 0;

  3. 顏色：統一使用十六進制（小寫）

• JS 規範

  1. 命名規範

     • 全局變量以及常量, 使用所有字母大寫，單詞間下劃線分隔的命名方式。
     • 通常變量, 使用 Camel（駝峯） 命名法。
     • 私有屬性、變量和方法如下劃線 _ 開頭
     • 構造函數和類以大寫字母開頭

  2. 函數註釋：簡單描述函數做用以及參數

  3. 三元操做符和 switch 用於替代 if 條件判斷語句

  4. 善用&& 和 ||（二元布爾操做符是可短路的, 只有在必要時纔會計算到最後一項）

  5. 特殊語法

     • 解構賦值

       // 數組解構賦值
       const arr = [1, 2, 3, 4];
       // 推薦
       const [first, second] = arr;
       // 不推薦
       const first = arr[0];
       const second = arr[1];
       
       // 對象解構賦值
       // 推薦
       function getFullName(obj) {
         const { firstName, lastName } = obj;
       }
       // best
       function getFullName({ firstName, lastName }) {}
       // 不推薦
       function getFullName(user) {
         const firstName = user.firstName;
         const lastName = user.lastName;
       }
       複製代碼

     • 拷貝數組
       使用擴展運算符（...）拷貝數組。

       const items = [1, 2, 3, 4, 5];
       // 推薦
       const itemsCopy = [...items];
       // 不推薦
       const itemsCopy = items;
       複製代碼

     • 箭頭函數
       須要使用函數表達式的場合，儘可能用箭頭函數代替。由於這樣更簡潔，並且綁定了 this

       // 推薦
       const boundMethod = (...params) => method.apply(this, params);
       // 不推薦
       const self = this;
       const boundMethod = function(...params) {
         return method.apply(self, params);
       };
       複製代碼

     • 模塊
       • 若是模塊只有一個輸出值，就使用 export default，若是模塊有多個輸出值，就不使用 export default，export default 與普通的 export 不要同時使用

       // 推薦
       import myObject from './importModule';
       // 不推薦
       import * as myObject from './importModule';
       複製代碼

       • 若是模塊默認輸出一個函數，函數名的首字母應該小寫

       function makeStyleGuide() {}
       export default makeStyleGuide;
       複製代碼

       • 若是模塊默認輸出一個對象，對象名的首字母應該大寫

       const StyleGuide = {
         es6: {}
       };
       export default StyleGuide;
       複製代碼

• VUE 規範

  • 組件命名規範

    1. 組件名應該始終是多個單詞的，根組件 App 以及 <transition>、<component> 之類的 Vue 內置組件除外。能夠避免跟現有的以及將來的 HTML 元素衝突，由於全部的 HTML 元素名稱都是單個單詞的。
    2. 單文件組件的文件名應該以單詞大寫開頭 (PascalCase)
       • 頁面模塊命名方式（如：訂單管理 --> OrderManage.vue）
       • 彈窗組件命名方式(業務名-dialog)（如：退款審覈 -- > RefundAuditDialog.vue）
    3. 在單文件組件、字符串模板和 JSX 中沒有內容的組件應該是自閉合的——但自定義組件永遠不要這樣作
    4. 在單文件組件和字符串模板中組件名應該老是 PascalCase（大寫字母開頭） 的——可是在 DOM 模板中老是 kebab-case（短橫線鏈接） 的。

  • 標籤屬性自動換行

  <a 
    :href="item.onestore_url"
     target="_blank"
     @click="onToDownload()"
  />
  複製代碼

  • props 命名規範

    1. prop 的定義應該儘可能詳細
       細緻的 prop 定義有兩個好處：
       • 它們寫明瞭組件的 API，因此很容易看懂組件的用法；
       • 在開發環境下，若是向一個組件提供格式不正確的 prop，Vue 將會告警，以幫助你捕獲潛在的錯誤來源。
       • 組件 props 原子化、提供默認值、使用 type 屬性校驗類型、使用 props 以前先檢查該 prop 是否存在

       // 不推薦 這樣作只有開發原型系統時能夠接受
          props: ['status']
          
       // 推薦
          props: {
            status: {
              type: String,
              required: true,
              validator: function (value) {
                return [
                  'syncing',
                  'synced',
                  'version-conflict',
                  'error'
                ].indexOf(value) !== -1
              }
            }
          }
       複製代碼

    2. prop名大小寫

       在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板和 JSX 中應該始終使用 kebab-case。

  • vue 文件

    1. 組件/實例的選項應該有統一的順序
       • components
       • props
       • data
       • created
       • mounted
       • activited
       • update
       • beforeRouteUpdate
       • metods
       • filter
       • computed
       • watch
    2. v-if和v-show按照場景使用

    1. v-if 切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件 適合運營條件不大可能改變
       
    2. v-show 只是簡單的基於css切換 適合頻繁切換

    9. 框架事件與自定義事件

    框架事件必須以on開頭（如：@click="onTabSwitch"）
    自定義事件必須以handle開頭（如：@click="handleTabSwitch"）
    

• 註釋規範
  代碼註釋在一個項目的後期維護中顯的尤其重要，因此咱們要爲每個被複用的組件編寫組件使用說明，爲組件中每個方法編寫方法說明。

如下狀況，務必添加註釋

1.公共組件使用說明
2.各組件中重要函數或者類說明
3.複雜的業務邏輯處理說明
4.特殊狀況的代碼處理說明,對於代碼中特殊用途的變量、存在臨界值、函數中使用的hack、使用了某種算法或思路等須要進行註釋描述
5.註釋塊必須以/**（至少兩個星號）開頭**/；
6.單行註釋使用//；
7.多重 if 判斷語句
複製代碼