高效前端:js優化
阿新 • • 發佈:2019-01-09
1 按強型別風格寫程式碼
- 定義變數時指明資料型別,例如使用
代替var num=0,str=''
方便了js直譯器,同時也方便了閱讀程式碼的人;var num,str
- 不要隨意更改變數的資料型別
這樣不僅需要直譯器進行額外的型別裝換處理,還會給閱讀程式碼的人帶來疑惑。如果真的需要改變型別,可以重新定義一個變數進行處理 - 函式返回值的型別是確定型別
儘量做到函式的返回值的型別一致,儘量避免
否則呼叫函式時可能還需要進行資料型別轉換處理function test(){ if(...){ return ' ' }else{ return 1 } }
2 減少作用域查詢
- 儘量不要將變數暴露在全域性作用域
- 不要濫用閉包
3 儘量使用=== 來代替 ==
- == 會產生一些異常(如null == undefined,’ '== 0等情況,當然如果有意利用這這些特性的除外);
- 如果已經確定了資料型別,使用=== 完全可以替代 ==;
- 如果資料型別不一致,儘量對齊進行資料型別裝換;
- 使用==在JSLint檢查時無法通過;
4 合併表示式(執行效率更高)
- 使用三目運算子表示簡單的ifelse語句
- 使用連等賦值;
- 自增/自減
5 減少魔數
假設有這樣的一段程式碼
testFn('seller',34,false)
從這個函式呼叫來說,很難看出這些三個函式引數是什麼意思,如果不去檢視一下函式的原始碼,怕是很難理解。這樣的意義不明的常量就被稱為 魔數
如果將程式碼改成這樣:
var seller='seller';
var sellerNum=32;
var isSeller=false;
testFn(seller,sellerNum,isSeller)
那每個引數的意義就比較明顯了
1.6 使用ES6簡化程式碼
- 使用class;
- 使用模板字串
- 箭頭函式;
- 塊級作用於;
- …