1. 程式人生 > >js中的鉤子機制(hook)

js中的鉤子機制(hook)

什麼是鉤子機制?使用鉤子機制有什麼好處?
鉤子機制也叫hook機制,或者你可以把它理解成一種匹配機制,就是我們在程式碼中設定一些鉤子,然後程式執行時自動去匹配這些鉤子;這樣做的好處就是提高了程式的執行效率,減少了if else 的使用同事優化程式碼結構。由於js是單執行緒的程式語言,所以程式的執行效率在前端開發是比較重要的,在開發中我們秉承如果能用switch case 的地方就不要用if else 可以用hook實現的儘量使用hook機制去實現。
這裡我們舉一個例子看一下:
例如我們在向後臺進行ajax請求的時候,後臺經常會返回我們一些常見的錯誤碼,如:001代表使用者不存在,002代表使用者密碼輸入錯誤。003代表使用者被鎖定。這個時候我們要將錯誤友好的提示給使用者。這個時候我們該怎樣實現呢?
一般的寫法可能是:

$.ajax(option,function(result){
    var errCode = result.errCode ;//錯誤碼
    if(errCode){
          if(errCode =='001'){
               alert("使用者不存在")
            }else if(errCode =='002'){
               alert("密碼輸入錯誤")
            }else if(errCode =='003'){
              alert("使用者被鎖定")
            }
    }else
{ //登入成功 } },function(err){ })

這樣寫其實是比較low低,稍微有點經驗的可能會使用switch case來實現,但是這個兩種寫法都無法避免一個問題就是如果我的錯誤碼特別多,那得寫多少個if else和case 啊?但是如果使用hook寫法的話就會簡單好多,
首先我們先宣告一個錯誤碼鉤子列表

var codeList  = {
   "001":"使用者不存在",
   "002":"密碼輸入錯誤",
   "003":"使用者被鎖定"
}
$.ajax(option,function(result){
    var errCode = result.errCode ;//錯誤碼
if(!errCode){ alert(codeList[errCode]); }else{ //登入成功 } },function(err){ })

這樣寫的話程式碼結構更加清楚明瞭。這個例子是最簡單的應用了的了。在Jquery 中hook機制被大量的使用,這裡我們就Jquery中判斷變數型別的type方法來具體看一下
通常我們在js中判斷一個變數的資料型別?首先會想到type of 和 instanceof
如果是基本型別我們可以直接使用typeof,但是這種方式只能判斷基本資料型別,如果是物件,它返回結果都市Object,如果變數是null它返回的也是Object。這個時候我們要準確的判斷一般的寫法可能會是:

  function type(obj){
      var type = "";
      if(obj==null){
          type = null;
      }else{
         type = obj.a.constructor.toString().split("(")[0].split(" ")[1]
      }
      return type;
  }

在jquery中的實現是:

var class2type={};
var toString = Object.prototype.toString;
jQuery.each("Boolean Number String Function Array Date RegExp Object Error Symbol",function(index,name){
  class2type["Object"+" name"]==name.toLowerCase();
})
type:function(obj){
   if(obj==null){
      return obj+""; 
   }
   return typeof obj =="Object"||typeof obj ==="function"?class2type[toString.call(obj)]|||"object":typeof obj
}

上面程式碼中
class2type = { ‘[object Boolean]’: ‘boolean’, ‘[object Number]’: ‘number’, ‘[object String]’: ‘string’, ‘[object Function]’: ‘function’, ‘[object Undefined]’: ‘undefined’, ‘[object Null]’: ‘null’, ‘[object Array]’: ‘array’, ‘[object Date]’: ‘date’, ‘[object RegExp]’: ‘regexp’, ‘[object Object]’: ‘object’, ‘[object Error]’: ‘error’};
設定一個型別鉤子物件
toString.call(obj)就是Object.prototype.toString.call(arg)來細緻判斷obj的型別。在這裡則轉換成物件對應索引是否在class2type 中存在相應value,若存在則返回value判斷,若不存在則返回object型別。
這樣就實現了型別的判斷。