1筷频、let取代var 強(qiáng)制

let完全可以取代var，因?yàn)閮烧哒Z義相同前痘，而且let沒有副作用截驮。

2、字符串采用單引號和反引號 強(qiáng)制

const a = 'foobar';
const b = `foo${a}bar`;

3际度、采用解構(gòu)賦值方式 建議

const arr = [1, 2, 3, 4];
// 常規(guī)寫法
const first = arr[0];
const second = arr[1];
// 建議寫法
const [first, second] = arr;

const obj = { left, right, top, bottom };
// 常規(guī)寫法
const left = obj.left;
const right= obj.right;
// 建議寫法
const { left, right } = obj;

// 常規(guī)寫法
function getFullName(obj) {
    const firstName = obj.firstName;
    const lastName = obj.lastName;
}
// 建議寫法
function getFullName({ firstName, lastName  }) {
}

4、對象盡量靜態(tài)化 推薦

對象盡量靜態(tài)化涵妥，一旦定義乖菱，就不得隨意添加新的屬性。如果添加屬性不可避免蓬网，要使用Object.assign方法窒所。

// 不推薦如下寫法
const user = {
    name: '韓晗'
}
user.sex = '男';
user.age = 38;

// 推薦寫法
const user = {
    name: '韓晗',
    sex: null
}
Object.assign(user, { age: 38 });

5、使用擴(kuò)展運(yùn)算符（...）拷貝數(shù)組 推薦

// 常規(guī)寫法
const itemsCopy = [];
const len = items.length;
for (const i = 0; i < len; i++) {
    itemsCopy[i] = items[i];
}

// 推薦寫法
const itemsCopy = [...items];

6帆锋、簡單的吵取、單行的、不會復(fù)用的函數(shù)锯厢，采用箭頭函數(shù) 建議

// 常規(guī)寫法
[1, 2, 3].map(function (x) {
    return x * x;
});

// 建議的寫法
[1, 2, 3].map((x) => {
    return x * x;
});

// 更好的寫法
[1, 2, 3].map(x => x * x);

注意：箭頭函數(shù)不但可以使編碼更簡潔皮官，而且綁定了 this脯倒。

7、不要在函數(shù)體內(nèi)使用 arguments 變量捺氢，使用 rest 運(yùn)算符（...）代替 強(qiáng)制

// 禁止的寫法
function concatenateAll() {
    const args = Array.prototype.slice.call(arguments);
    return args.join('');
}

// 替換的寫法
function concatenateAll(...args) {
    return args.join('');
}

8藻丢、使用默認(rèn)值語法設(shè)置函數(shù)參數(shù)的默認(rèn)值 強(qiáng)制

// 禁止的寫法
function handleThings(status) {
    status = status || 0;
}

// 替換的寫法
function handleThings(status = 0) {
}

9、用Class取代需要prototype的操作 推薦

// 常規(guī)寫法
function User() {
    const name = '韓晗';
}
User.prototype.getName = function() {
    ...
}

// 推薦的寫法
class User{
    const name = '韓晗';
    getName () {
        ...
    }
}

10摄乒、堅(jiān)持使用ES6原生模塊語法 強(qiáng)制

1 堅(jiān)持使用import取代require
2 堅(jiān)持使用export取代module.exports
3 import進(jìn)來的對象都是要用到的悠反，暫時不用的刪除或者注釋掉

11、類和類中方法的命名規(guī)范 強(qiáng)制

1 類名采用大駝峰方式命名馍佑，實(shí)例名采用小駝峰方式命名
2 類中方法采用小駝峰方式命名
3 內(nèi)部方法名前面加下劃線斋否，表示私有方法僅限內(nèi)部調(diào)用
4 以上命名方式同樣適用于對構(gòu)造函數(shù)及內(nèi)部方法的命名

12、變量命名規(guī)范 強(qiáng)制

1 常數(shù)采用全大寫+匈牙利命名法

// 例如：
const IMAGE_DEFAULT_WIDTH = 600;

2 變量拭荤、傳參茵臭、常量等采用小駱駝命名法

// 例如：
let index = 0;
const departmentName = 'IT部';
function getFullName(firstName, lastName) {
    ...
}

3 臨時變量或私有變量前可以用'_'開頭

// '_'開頭臨時變量必須是局部變量
// 例如：
for(const i = 0; i < items.length; i++{
    const _img = document.createElement('img');
    ...
}

4 通用變量

// 除i,j,n,e，或一元二次方程中的a,b,c等約定俗成單字符變量外穷劈，禁止在代碼中出現(xiàn)單字符變量
// 例如：
for(const u of userArray) {
    ...
}

// tmp或temp用于臨時變量
// 例如：
let total = 0;
for(const i = 0; i < 100; i++) {
    const tmp = i * i;
    total += tmp;
}

// 用items代表通用數(shù)組對象笼恰，用item代表從數(shù)組中遍歷出來的單個對象
for(const item of items) {
    ...
}

// 用args代表通用傳參數(shù)組，arg1,arg2,arg3...分別代表單個傳參
function equation(...args) {
    const arg1 = args[0];
    const arg2 = args[1];
    const arg3 = args[2];
    const arg4 = args[3];
    return arg1 * arg2 + arg3 * arg4;
}

// 用params代表通用對象型傳參
function equation(params) {
    return params.a * params.b + params.c * params.d;
}

// 用settings歇终、opts或者prots代表通用配置項(xiàng)
// settings代表設(shè)置
// opts是options的縮寫社证，也代表配置
// prots是properties的縮寫，代表配置
function ImageViewer(opts) {
    const options = Object.assign({}, defaultOpts, opts);
    ...
}

// flag评凝、type與status
// flag通常用于表示布爾型或簡單如'1,2,3'這樣的數(shù)字型數(shù)據(jù)
// type用于代表數(shù)字或其他枚舉的分類追葡，分類可以少也可以非常之多
// status通常用于代表數(shù)據(jù)的狀態(tài)位，也是可以很少也可以非常之多
let flag = false;
let type = 1;
let status = 0;

// 以上所有的通用變量均可作為變量后綴出現(xiàn)
// 例如：
let userStatus = 1;        // 用戶狀態(tài)
const pageType = 2;        // 頁面類型
const pluginProts = {};    // 插件配置

5 類型修飾后綴

// 序號采用index奕短，整數(shù)采用num宜肉，浮點(diǎn)型采用float
let rowIndex = 1;        // 行順序號
let docNum = 155;        // 稿件數(shù)量
let lengthFloat = 89.5;    // 長度通常是整
數(shù)型的，加上float作為后綴后翎碑，就明確了變量的實(shí)際類型

// 字符串采用str谬返，布爾型采用'is'作為前綴
const sex = 1;
const sexStr = ['女', '男', '未知'][sex];
const isMen = sex == 1;

// 數(shù)組采用array，集合采用set/map日杈，對象采用obj遣铝，JSON采用json
const userObj = {};
const userJson = {};
const userArray = [];    // 不建議采用list作為后綴
const userSet = new Set();
const userMap = new Map();

// 類和函數(shù)修飾后綴
const xxxModel;        //  model對象實(shí)例
const xxxDao;            // Dao層實(shí)例
const xxxService;        // Service層實(shí)例
const xxxFn;            // 函數(shù)
const xxxCb;            // 回調(diào)函數(shù)（強(qiáng)調(diào)：為了避免回調(diào)'cb'與采編'cb'的命名歧義，系統(tǒng)中用全大寫'CB'代表采編莉擒，'XCB'代表新采編）

6 描述后綴

// 頁面元素型描述后綴
const xxxElem;        // xxx通用元素
const xxxInp;        // xxx輸入框
const xxxChk;        // xxx復(fù)選框
const xxxRad;        // xxx單選框
const xxxSel;        // xxx下拉列表
const xxxTxta;        // xxx文本域
const xxxBtn;        // xxx按鈕
const xxxForm;        // xxx表單
const xxxBox;        // xxx盒子酿炸，常用指代容器
const xxxDiv;        // xxx div元素
const xxxLi;        // xxx li元素

// 業(yè)務(wù)實(shí)體型描述后綴
const xxxDoc;    // xxx稿件
const xxxAudio;    // xxx音頻
const xxxImage;    // xxx圖片
const xxxVideo;    // xxx視頻
const xxxProcess;    // xxx流程
const xxxPublish;    // xxx發(fā)布線路，是對渠道涨冀、產(chǎn)品的總稱
const xxxChannel;    // xxx渠道填硕，渠道下是具體的產(chǎn)品
const xxxProduct;    // xxx產(chǎn)品
const xxxReport;    // xxx報道
const xxxCount;    // xxx數(shù)
const xxxDescription;    // xxx描述，有時也用于表示留痕
const xxxAttachment;    // xxx附件
const xxxDept;    // xxx部門
const xxxPDept;    // xxx父級部門
const xxxBy;    // xxx人鹿鳖，例如：uploadBy表示上傳人
const xxxLat;    // xxx緯度
const xxxLon;    // xxx經(jīng)度
const xxxFull;    // xxx完整路徑扁眯，例如：departmentNameFull代表從頂級部門到當(dāng)前部門的完成部門路徑
const xxxCategory;    // xxx分類
const xxxPostil;    // xxx批注

13壮莹、通用縮寫 強(qiáng)制

14周荐、注釋規(guī)范 強(qiáng)制

1 模塊聲明

寫在文件的最上面，說明文件的用途僵娃，所屬目錄概作，作者及其他

/**
 * ajax請求工具函數(shù)庫
 * @module app/common/utils
 * @author 韓晗
 */

/**
 * 與用戶、組部默怨、權(quán)限相關(guān)的Dao層類
 * @module app/main/core/service
 * @author 韓晗
 */

2 類注釋

在命名規(guī)范的前提下讯榕，根據(jù)約定大于說明的原則，可以不寫注釋匙睹，例如：UserDao愚屁、UserService等
如果需要給類寫注釋，建議說明以下信息
a 類的用途簡要說明痕檬，通常用一行
b 如果作者與當(dāng)前模塊作者不一致霎槐，則聲明作者

/**
 * 與用戶相關(guān)的API層Dao類
 */

/**
 * 與用戶相關(guān)的Service服務(wù)類
 * @author 王翔
 */

3 函數(shù)及方法注釋

/**
 * GET方式ajax請求API接口的共通方法
 * @param {string} url api接口地址
 * @param {object} params 接口請求參數(shù)
 * @param {function} callback 回調(diào)函數(shù)
 * @returns {void} 回調(diào)方式，無返回
 */

4 變量說明注釋

采用在行尾單行注釋的方式梦谜，一行說明一個變量

let userType = 0;    // 用戶類型：0管理員 1普通用戶 2注冊會員 

5 代碼塊說明注釋

代碼塊說明注釋通常是對注釋下方同一業(yè)務(wù)邏輯代碼的說明
采用單行注釋符'//'注釋丘跌，需要多行說明文字的時候，采用多個單行注釋符注釋

強(qiáng)烈建議將同一邏輯的代碼塊說明寫在一起

/** 不好的寫法 */
// 如果type=1唁桩，則將兩個數(shù)相乘并返回
if (type == 1) {
    return num1 * num2;
}
// 如果type=2闭树，則將兩個數(shù)相加并返回
else if (type == 2) {
    return num1 + num2;
}
// 否則返回0
else {
    return 0;
}

/** 推薦的寫法 */
// 判斷type的值，執(zhí)行不同的計(jì)算方式并返回
// 如果type=1荒澡，則將兩個數(shù)相乘并返回
// 如果type=2报辱，則將兩個數(shù)相加并返回
// 否則，直接返回0
if (type == 1) {
    return num1 * num2;
} else if (type == 2) {
    return num1 + num2;
} else {
    return 0;
}

6 Bug修改或需求疊加時的注釋

修改的代碼塊前后要增加2或4個斷行
操作類型：add新增 | edit修改 | delete刪除
開發(fā)類型：BUG改錯誤 | FUN修改或疊加邏輯

// 韓晗<edit> start
// 2019-03-21 <BUG> 解決計(jì)算時沒有判斷邊界的錯誤
// return x * y;

const result = x * y;
if (result > 100000) {
    result = 100000;
}
return result;

// 韓晗<edit> end

15单山、Git提交說明書寫格式

Git提交的說明格式如下：
【{掛欄主題（或關(guān)鍵字）信息}】{提交內(nèi)容說明}
例如：
【新增】新增人員選擇彈窗面板開關(guān)項(xiàng)及相關(guān)組件目錄
【修改捏肢、刪除】修改了人員選擇彈窗的樣式，解決取消按鈕失效問題饥侵，同時刪除了沒用的css文件
【A輪沖刺測試】解決了在特殊情況下，插入文字稿失敗的bug

16衣屏、張帆老師提出的新要求 強(qiáng)制

1躏升、項(xiàng)目禁止使用Jquery或其他第三方函數(shù)庫
2、項(xiàng)目中引用任何第三方插件狼忱、組件需要經(jīng)過張帆老師同意