前言

本規(guī)范為針對無線前端的javascript的編碼規(guī)范，其中部分只適用于移動端開發(fā)，并配合自制的eslint規(guī)范來進行檢查

變量與聲明

變量

1. 聲明前必須使用關鍵字

2. 變量在函數(shù)內部或循環(huán)控制條件之前提前聲明

bad code

function bad(){
    for(var i=0;i<list.length;i++){
        var item = list[i];
    }
}

good code

function good(){
    let i;
    let item;
    const len = list.length;
    for(i=0;i<list;i++){
        item = list[i];
    }
}

3. 私有變量函數(shù)前置_標識

bad code

MyConstructor.prototype.private = function(){};

good code

function _private(){};
MyConstructor.prototype._private = _private;

4. 變量名規(guī)則具象化，布爾類型帶is，單位值帶單位(_px,_ms,_s)

bad code

var height = $("#mydiv").height();
var delay = 3 * 1000;
var readYet = false;

good code

var height_px = $("#mydiv").height();
var delay_ms = 3 * 1000;
var isRead = false;

5. 構造方法首字母大寫，方法變量遵循小駝峰命名規(guī)則

bad code

function slidepage(){}
slidepage.prototype.resizepage = function(){};

good code

function SlidePage(){}
SlidePage.prototype.resizePage = function(){};

常量

1. 常量需要大寫

2. 常量定義在文件頭部，并使用_分割

bad code

let maxpeoplesize = 10;

good code

let MAX_PEOPLE_SIZE = 10;

分號與逗號

1. 賦值，定義，返回值，方法調用后強制需要加分號(目前沒有配置好檢測工具)

2. 定義變量時，不使用逗號連續(xù)定義

bad code

let arr = [],str = "",obj = {a:1,b:2,};

good code

let arr = [];
let str = "";
let obj = {a:1,b:2};

函數(shù)

1. 為了可讀性函數(shù)內部不允許使用嵌套函數(shù)

2. 函數(shù)內部盡量不使用arguments.callee和arguments.caller

3. 函數(shù)參數(shù)不得超過5個(超過使用對象解構來代替)

bad code

function myTestFunc(a,b,c,d,e,f,g,h){}

good code

function myTestFunc({a,b,c,d,e}={}){}

異常

1. 允許使用try/catch5.2 上線代碼不允許使用debugger，console，alert等調試異常的關鍵字

eslit中console的規(guī)則會設置為warn，但是希望大家還是在調試器內調試而不是console.log()調試。這種習慣長遠來看并不好

循環(huán)

1. 循環(huán)使用for，for的速度有保障且可讀性高。別在非必要條件下使用while

2. 循環(huán)統(tǒng)一自增來避免循環(huán)中操作源數(shù)據(jù)，自減除非業(yè)務需要，自減時須給特別注釋

3. 循環(huán)內不允許定義函數(shù)和變量，避免消耗過大

控制邏輯

1. 控制條件內不要使用var定義變量

2. 分支超過5種的判斷使用switch case時需要帶default

3. 判斷條件過長，使用變量標識

bad code

if( flag === 0 || $(".div").length > 0 || $("#id").hasClass("hide")){}

good code

const isRead = (flag === 0);
const hasDiv = $(".div").length > 0;
const isDisplay = $("#id").hasClass("hide");
if(isRead || hasDiv || isDisplay){}

4. 判斷中禁止使用yoda表達式

5. 判斷中使用嚴格判斷

字符串

1. 允許使用多行字符

bad code

let str = "<div><span><a href="#">myhref</a></span></div>";

good code

let str = "<div>"\
            <span>\
            <a href="#">myhref</a>\
            </span>\
        </div>";

原型

1、 禁止對頂級對象的原型進行修改

bad code

String.prototype.cutHtml = function(){};

good code

function cutHtml(){};

2. 原型上不能保持屬性，只能保存方法，避免子類被相互污染

注釋

1. 文件開頭必須要有文件說明注釋，時間，作者

/*
 * @Author: 張浩然
 * @Date: 2017-12-12 19:59:30
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-01-02 15:28:29
 * @fileoverview 本文件用于xxx，實現(xiàn)了xxx方法，注意事項xxx
 */

2. 多行注釋與單行注釋都被允許

特性

1. 允許使用ES6中的高級特性(移動端開發(fā))

2. 允許使用eval與new Function但不提倡使用，避免xss攻擊

3. 不允許使用with

4. 代碼統(tǒng)一遵循use strict規(guī)范

面向對象

1. 統(tǒng)一使用構造器+原型的范式進行面對對象開發(fā)，不使用拷貝繼承

2. 多級繼承，統(tǒng)一使用公用包中的class方法進行管理和控制

格式化

1. 目前是利用js-beautify的配置來統(tǒng)一格式化

使用方法，在項目根目錄下放置配置文件

.jsbeautifyrc

{
  "indent_size": 2,
  "indent_char": " ",
  "indent_level": 0,
  "indent_with_tabs": false,
  "preserve_newlines": true,
  "max_preserve_newlines": 10,
  "jslint_happy": false,
  "brace_style": "collapse",
  "keep_array_indentation": false,
  "keep_function_indentation": false,
  "space_before_conditional": true,
  "break_chained_methods": false,
  "eval_code": false,
  "unescape_strings": false,
  "wrap_line_length": 0,
  // jsbeautify options
  "format_on_save": true
}