前端開發規範簡要概括

縮排多少看自己的需求。。

作者：騰訊@AlloyTeam

來源：https://alloyteam.github.io/CodeGuide/

檔案和目錄命名規則

簡單來說：都小寫，多個單詞下劃線分割

some_file

目錄：有複數結構時，要採用複數命名法。

images

HTML

• 語法 標籤內的屬性名全小寫，多個單詞用中劃線分割，值用雙引號

<img src="images/company_logo.png" alt="Company">

• 引入CSS，JS不需要指明type屬性

• 屬性的順序

  • class是為高可複用元件設計的，所以應處在第一位；

  • id更加具體且應該儘量少使用，所以將它放在第二位。

  • <a class="..." id="..." data-modal="toggle" href="#">Example link</a>
    

  • class

  • id

  • name

  • data-*

  • src, for, type, href, value , max-length, max, min, pattern

  • placeholder, title, alt

  • aria-*, role

  • required, readonly

    , disabled

• boolean屬性指不需要宣告取值的屬性 <input type="text" disabled>

• 減少標籤數量

CSS,SCSS

• 每個屬性宣告末尾都要加分號

  .element {
      width: 20px;
      height: 20px;
      
      background-color: red;
  }
  

• 需要空格的情況

  • 屬性值前 color: red;
  • 選擇器'>', '+', '~'前後 .element > .dialog
  • !important '!'前
  • 註釋'/'後和'/'前 /* good */

• 需要空行的情況

  • 檔案最後（末尾）保留一個空行
  • }後最好更一個空行
  • 屬性之間需要適當空行

• 需要換行的情況

  • '{'後和'}'前

  • 每個屬性獨佔一行

  • 多個規則的分隔符','後

    .element,
    .dialog {
        ...
    }
    

• 註釋使用/* */ ,縮排與下一行程式碼保持一致；

• 命名：類名小寫中劃線，id採用駝峰式，scss中的變數、函式、混合、placeholder採用駝峰式命名

• 屬性宣告順序：相關的屬性宣告按順序做分組處理，組之間需要有一個空行。

  .declaration-order {
      display: block;
      float: right;
  
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
  
      border: 1px solid #e5e5e5;
      border-radius: 3px;
      width: 100px;
      height: 100px;
  
      font: normal 13px "Helvetica Neue", sans-serif;
      line-height: 1.5;
      text-align: center;
  
      color: #333;
      background-color: #f5f5f5;
  
      opacity: 1;
  }
  

• 顏色推薦16進位制小寫字母 color: #abcdef;

• 屬性簡寫：margin和padding推薦使用簡寫，其他建議分開宣告更加清晰

  .element {
      transition-delay: 2s;
      transition-timing-function: linear;
      transition-duration: 1s;
      transition-property: opacity;
  }
  

• 媒體查詢推薦靠近與他們相關的規則，不單獨放或者寫在最底部

• SCSS相關

  提交的程式碼中不要有 @debug；

  宣告順序：

  • @extend
  • 不包含 @content 的 @include
  • 包含 @content 的 @include
  • 自身屬性
  • 巢狀規則

  @import 引入的檔案不需要開頭的'_'和結尾的'.scss'；

  巢狀最多不能超過5層；

  @extend 中使用placeholder選擇器；

  去掉不必要的父級引用符號'&'。

• 其他

  • 不許有空規則
  • 取消小數點前面的0 color: rgba(0, 0, 0, .5);
  • 用 border: 0; 代替 border: none;；
  • 屬性值'0'後面不要加單位；
  • 釋出的程式碼中不要有 @import； (不懂咋改)

JavaScript

• 需要空格的情況

  • 運算子前後

  • 程式碼塊'{'前

    var a = {
        b: 1
    };
    

  • 物件的屬性值前b: 1

  • for迴圈，分號後留有一個空格，前置條件如果有多個，逗號後留一個空格

    for (i = 0; i < 6; i++) {
        x++;
    }
    

  • 無論是函式宣告還是函式表示式，'{'前一定要有空格

  • 函式的引數之間 function(a, b, c) { ... }

• 需要空行的情況

  • 變數聲明後（當變數宣告在程式碼塊的最後一行時，則無需空行）
  • 註釋前（當註釋在程式碼塊的第一行時，則無需空行）
  • 程式碼塊後（在函式呼叫、陣列、物件中則無需空行）
  • 檔案最後保留一個空行

• 需要換行的情況

  • 換行的地方，行末必須有','或者運算子； (java中要帶著.換行)

  • 程式碼塊'{'後和'}'前和變數賦值後

    var a = {
        b: 1,
        c: 2
    };
    

• 單行註釋 雙斜線後必須跟一個空格 // 這樣 ，縮排與下一行程式碼保持一致，可位於一個程式碼行的末尾，與程式碼間隔一個空格。

• 多行註釋 使用情況：難於理解的程式碼段，業務邏輯強相關的程式碼，可能存在錯誤的程式碼段

  /*
   * one space after '*'
   */
  var x = 1;
  

• 文件註釋 TODO 未詳細瞭解

  /**
   * @func
   * @desc 一個帶引數的函式
   * @param {string} a - 引數a
   * @param {number} b=1 - 引數b預設值為1
   * @param {string} c=1 - 引數c有兩種支援的取值</br>1—表示x</br>2—表示xx
   * @param {object} d - 引數d為一個物件
   * @param {string} d.e - 引數d的e屬性
   * @param {string} d.f - 引數d的f屬性
   * @param {object[]} g - 引數g為一個物件陣列
   * @param {string} g.h - 引數g陣列中一項的h屬性
   * @param {string} g.i - 引數g陣列中一項的i屬性
   * @param {string} [j] - 引數j是一個可選引數
   */
  function foo(a, b, c, d, g, j) {
      ...
  }
  

• 變數命名

  • 標準變數採用駝峰式命名（除了物件的屬性外，主要是考慮到cgi返回的資料）

  • 'ID'在變數名中全大寫

  • 'URL'在變數名中全大寫

  • 'Android'在變數名中大寫第一個字母

  • 'iOS'在變數名中小寫第一個，大寫後兩個字母

  • 常量全大寫，用下劃線連線

  • 建構函式，大寫第一個字母

  • jquery物件必須以'$'開頭命名

    var thisIsMyName;
    
    var goodID;
    
    var reportURL;
    
    var AndroidVersion;
    
    var iOSVersion;
    
    var MAX_COUNT = 10;
    
    function Person(name) {
        this.name = name;
    }
    
    // not good
    var body = $('body');
    
    // good
    var $body = $('body');
    

• 函式

  • 無論是函式宣告還是函式表示式，'('前不要空格，但'{'前一定要有空格；

    函式呼叫括號前不需要空格；

    立即執行函式外必須包一層括號；

    不要給inline function命名；

    引數之間用', '分隔，注意逗號後有一個空格。

• 陣列、物件

  • 物件屬性名不需要加引號；

    物件以縮排的形式書寫，不要寫在一行；

    陣列、物件最後不要有逗號。

    var a = {
        b: 1,
        c: 2
    };
    

• null和undefined

  • 永遠不要直接使用undefined進行變數判斷；

    使用typeof和字串'undefined'對變數進行判斷。

    // not good
    if (person === undefined) {
        ...
    }
    
    // good
    if (typeof person === 'undefined') {
        ...
    }
    

    。。。

• jshint

  • 用'=', '!'代替'==', '!='；

    for-in裡一定要有hasOwnProperty的判斷；

    不要在內建物件的原型上新增方法，如Array, Date；

    不要在內層作用域的程式碼裡聲明瞭變數，之後卻訪問到了外層作用域的同名變數；

    變數不要先使用後宣告；

    不要在一句程式碼中單單使用建構函式，記得將其賦值給某個變數；

    不要在同個作用域下宣告同名變數；

    不要在一些不需要的地方加括號，例：delete(a.b)；

    不要使用未宣告的變數（全域性變數需要加到.jshintrc檔案的globals屬性裡面）；

    不要聲明瞭變數卻不使用；

    不要在應該做比較的地方做賦值；

    debugger不要出現在提交的程式碼裡；

    // not good
    if (a == 1) {
        a++;
    }
    
    // good
    if (a === 1) {
        a++;
    }
    
    // good
    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            // be sure that obj[key] belongs to the object and was not inherited
            console.log(obj[key]);
        }
    }
    
    // not good
    Array.prototype.count = function(value) {
        return 4;
    };
    
    // not good
    var x = 1;
    
    function test() {
        if (true) {
            var x = 0;
        }
    
        x += 1;
    }
    
    // not good
    function test() {
        console.log(x);
    
        var x = 1;
    }
    
    // not good
    new Person();
    
    // good
    var person = new Person();
    
    // not good
    delete(obj.attr);
    
    // good
    delete obj.attr;
    
    // not good
    if (a = 10) {
        a++;
    }
    
    // not good
    var a = [1, , , 2, 3];
    
    // not good
    var nums = [];
    
    for (var i = 0; i < 10; i++) {
        (function(i) {
            nums[i] = function(j) {
                return i + j;
            };
        }(i));
    }
    
    // not good
    var singleton = new function() {
        var privateVar;
    
        this.publicMethod = function() {
            privateVar = 1;
        };
    
        this.publicMethod2 = function() {
            privateVar = 2;
        };
    };
    

• 其他

  • 對上下文this的引用只能使用'_this', 'that', 'self'其中一個來命名；

  • 外層統一單引號 let x = z = '<div id="test"></div>';

  • 不要省掉一些括號

    // not good
    if (condition)
        doSomething();