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型別。
這樣就實現了型別的判斷。