前言
本規(guī)范為針對無線前端的javascript的編碼規(guī)范浙垫，其中部分只適用于移動端開發(fā)谒主，并配合自制的eslint規(guī)范來進行檢查
變量與聲明
變量
- 聲明前必須使用關鍵字
| bad code | good code |
|---|---|
| variable | let variable/const variable |
- 變量在函數內部或循環(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];
}
}
- 私有變量函數前置_標識
bad code
MyConstructor.prototype.private = function(){};
good code
function _private(){};
MyConstructor.prototype._private = _private;
- 變量名規(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;
- 構造方法首字母大寫虐杯，方法變量遵循小駝峰命名規(guī)則
bad code
function slidepage(){}
slidepage.prototype.resizepage = function(){};
good code
function SlidePage(){}
SlidePage.prototype.resizePage = function(){};
常量
常量需要大寫
常量定義在文件頭部膘魄，并使用_分割
bad code
let maxpeoplesize = 10;
good code
let MAX_PEOPLE_SIZE = 10;
分號與逗號
賦值，定義召调，返回值舌缤，方法調用后強制需要加分號(目前沒有配置好檢測工具)
定義變量時，不使用逗號連續(xù)定義
bad code
let arr = [],str = "",obj = {a:1,b:2,};
good code
let arr = [];
let str = "";
let obj = {a:1,b:2};
函數
為了可讀性函數內部不允許使用嵌套函數
函數內部盡量不使用arguments.callee和arguments.caller
函數參數不得超過5個(超過使用對象解構來代替)
bad code
function myTestFunc(a,b,c,d,e,f,g,h){}
good code
function myTestFunc({a,b,c,d,e}={}){}
異常
- 允許使用try/catch5.2 上線代碼不允許使用debugger某残，console，alert等調試異常的關鍵字
eslit中console的規(guī)則會設置為warn陵吸，但是希望大家還是在調試器內調試而不是console.log()調試玻墅。這種習慣長遠來看并不好
循環(huán)
循環(huán)使用for，for的速度有保障且可讀性高壮虫。別在非必要條件下使用while
循環(huán)統(tǒng)一自增來避免循環(huán)中操作源數據澳厢，自減除非業(yè)務需要，自減時須給特別注釋
循環(huán)內不允許定義函數和變量囚似，避免消耗過大
控制邏輯
控制條件內不要使用var定義變量
分支超過5種的判斷使用switch case時需要帶default
判斷條件過長剩拢，使用變量標識
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){}
判斷中禁止使用yoda表達式
判斷中使用嚴格判斷
字符串
- 允許使用多行字符
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(){};
- 原型上不能保持屬性饶唤，只能保存方法徐伐，避免子類被相互污染
注釋
- 文件開頭必須要有文件說明注釋，時間募狂，作者
/*
* @Author: 張浩然
* @Date: 2017-12-12 19:59:30
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2018-01-02 15:28:29
* @fileoverview 本文件用于xxx办素，實現了xxx方法角雷，注意事項xxx
*/
- 多行注釋與單行注釋都被允許
特性
允許使用ES6中的高級特性(移動端開發(fā))
允許使用eval與new Function但不提倡使用，避免xss攻擊
不允許使用with
代碼統(tǒng)一遵循use strict規(guī)范
面向對象
統(tǒng)一使用構造器+原型的范式進行面對對象開發(fā)性穿，不使用拷貝繼承
多級繼承勺三，統(tǒng)一使用公用包中的class方法進行管理和控制
格式化
- 目前是利用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
}
