1. 程式人生 > >高效前端:js優化

高效前端:js優化

1 按強型別風格寫程式碼

  • 定義變數時指明資料型別,例如使用
    var num=0,str=''
    
    代替
    var num,str
    
    方便了js直譯器,同時也方便了閱讀程式碼的人;
  • 不要隨意更改變數的資料型別
    這樣不僅需要直譯器進行額外的型別裝換處理,還會給閱讀程式碼的人帶來疑惑。如果真的需要改變型別,可以重新定義一個變數進行處理
  • 函式返回值的型別是確定型別
    儘量做到函式的返回值的型別一致,儘量避免
    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;
  • 使用模板字串
  • 箭頭函式;
  • 塊級作用於;