團隊開發(fā)需要遵守一定的開發(fā)規(guī)范，有效降低bug率，提高維護效率，方便代碼review，本章基于Airbnb公司發(fā)布的規(guī)范，做出了常用的規(guī)范總結
Airbnb JavaScript規(guī)范
使用空格+2代替tab(主流編輯器設置tab = 2個空格)
不能省略分號
es6相關:
杜絕var
優(yōu)先使用箭頭函數(shù)
使用模板字符串取代連接字符串
- 常量的命名規(guī)范
常量命名應該使用全大寫格式，并用下劃線分割,如果常量是函數(shù)，那么采用駝峰式命名法
const NUMBER = 5;
const Sum = () => {};
- 每次只聲明一個變量,const放一起，let放一起，不要使用鏈接變量分配
// bad
const a = 1, b = 2;
// good
const a = 1;
const b = 2;
let i;
let length;
- 靜態(tài)字符串一律使用單引號或反引號，不使用雙引號。動態(tài)字符串使用反引號。
const a = 'foobar';
const b = foo${a}bar;
類型
-
基本類型(string,number,boolean,null,undefined,symbol)：直接存取
復雜類型(object,array,function): 通過引用的方式存取
引用
- 使用const let申明引用類型，避免使用var
對象
-
字面值創(chuàng)建對象，一個地方定義對象所有的屬性，對象方法的簡寫形式（略）
屬性值簡寫形式，并且將你的所有縮寫放在對象聲明的開始
只有對那些不合法的屬性名標識符添加引號
使用... 而不是Object.assign
數(shù)組
-
字面量聲明數(shù)組
使用數(shù)組展開操作符...拷貝數(shù)組 const itemsCopy = [...items];
向數(shù)組添加元素時，使用push itemsCopy.push('abracadabra')
將類數(shù)組對象（array-like）轉換成數(shù)組時，使用...而不是Array.from
當需要對可遍歷對象進行map操作時，使用Array.from而不是展開操作符...,避免新建一個臨時數(shù)組。
數(shù)組方法回調需要有返回值
如果數(shù)組有多行，請在打開和關閉數(shù)組括號之前使用換行符
解構
-
訪問和使用對象的多個屬性時用對象解構操作
使用數(shù)組解構
使用對象解構來實現(xiàn)多個返回值，而不是數(shù)組解構
字符串
-
以編程方式構建字符串時，使用模板字符串而不是連接符 同6
不超過100個字符的字符串不應該使用連接符或者換行書寫
不要過多的轉義字符串
函數(shù)
-
使用命名函數(shù)表達式而不是函數(shù)聲明
把立即執(zhí)行函數(shù)包裹在圓括號里
不要在非函數(shù)塊（if、while等等）內聲明函數(shù)。
不要用arguments命名參數(shù),不要使用arguments，用rest語法...代替
用默認參數(shù)語法而不是在函數(shù)里對參數(shù)重新賦值。把默認參數(shù)賦值放在最后
函數(shù)簽名部分要有空格,不要對參數(shù)重新賦值
函數(shù)的縮進：每行值包含一個參數(shù)，每行逗號結尾
箭頭函數(shù)
-
如果函數(shù)體由一個沒有副作用的表達式語句組成，刪除大括號和return
萬一表達式涉及多行，把他包裹在圓括號里更可讀。
類 & 構造函數(shù)
-
常用class，避免直接操作prototype
用extends實現(xiàn)繼承
模塊
-
不要用import通配符，就是 * 這種方式
不要直接從import中直接export
一個路徑只 import 一次
在一個單一導出模塊里，用 export default 更好
import 放在其他所有語句之前
多行import應該縮進，就像多行數(shù)組和對象字面量
迭代器和生成器
- 不要用遍歷器for。用JavaScript高級函數(shù)代替for-in、for-of
用數(shù)組的這些迭代方法： map() / every() / filter() / find() / findIndex() / reduce() / some()/ ...
用對象的這些方法： Object.keys() / Object.values() / Object.entries() 去產生一個數(shù)組，這樣你就能去遍歷對象了
其他
-
做冪運算時用冪操作符
在你需要的地方聲明變量，但是要放在合理的位置
不要使用一元自增自減運算符使用num + =
1而不是num ++或num ++
-
多行注釋用/** ... */
單行注釋用//，將單行注釋放在被注釋區(qū)域上面。如果注釋不是在第一行，那么注釋前面就空一行
所有注釋開頭空一個，方便閱讀
-
tab用兩個空格
在大括號前空一格
在控制語句(if, while 等)的圓括號前空一格。在函數(shù)調用和定義時，參數(shù)列表和函數(shù)名之間不空格
用空格來隔開運算符
文件結尾空一行
在一個代碼塊后下一條語句前空一行
不要用空白行填充塊
花括號里加空格
, 前不要空格， , 后需要空格
調用函數(shù)時，函數(shù)名和小括號之間不要空格 func();
在對象的字面量屬性中， key value 之間要有空格
行末不要空格，避免出現(xiàn)多個空行。 在文件末尾只允許空一行
額外結尾逗號
避免一行代碼超過100個字符（包含空格） 注意：長字符串不受此規(guī)則限制
開發(fā)建議
- 新項目建議遵守eslint規(guī)范,解決eslint報錯的過程就是糾正代碼規(guī)范的過程. eslint常見規(guī)范:
(1) 空格報錯
大括號'{}'內部前后需要空格 A space is required after '{' A space isrequired before '}' （在'{'前也要空一格）
,后需要空格 A space is required after ','
賦值：后需要空格Missing spacebefore value for key 'key'
中綴運算符必須間隔Infix operatorsmust be spaced
(2) 其他常見報錯
使用點表示法代替[] data[]is better written in dot notation 改為data.base
已聲明某變量，但從未讀取其值
縮進報錯,雙引號報錯,let未重新分配使用const
- 代碼規(guī)范
- 好的處理表格配置處理
- 歸總相同代碼，統(tǒng)一處理邏輯
規(guī)范參考
Airbnb JavaScript 編碼規(guī)范：https://github.com/lin-123/javascript （推薦食用）
Google JavaScript 編碼規(guī)范：https://google.github.io/styleguide/jsguide.html
Idiomatic JavaScript 編碼規(guī)范：https://github.com/rwaldron/idiomatic.js
HTML/CSS/JS編碼規(guī)范：https://www.cnblogs.com/lvhw/p/7451351.html
