惰性模式:減少代碼每次執行時的重復性判斷,通過重新定義對象來避免原對象中的分支判斷,提高網站性能。
例如針對不同瀏覽器的事件注冊方法:
var AddEvent = function(dom, type, fn){
if(dom.addEventListener){
dom.addEventListener(type, fn, false);
}else if(dom.attachEvent){
dom.attachEvent('on'+type, fn);
}else{
dom['on'+type] = fn;
}
}
從上面的方法可以發現,每次為元素綁定事件時,都會進行檢測判斷,這是多余的,因為在同一瀏覽器中分支判斷結果是唯一的,不可能走不同的分支。
我們可以用惰性模式來解決這個問題,既然第一次調用該方法時已經判斷過了,那么就可以在第一次執行時根據判斷結果重新定義該方法。
惰性模式主要有兩種實現方法:
- 加載即執行:JavaScript文件加載時通過閉包執行對方法進行重新定義,在頁面加載時會消耗一定的資源。
var AddEvent = function(dom, type, fn){
if(dom.addEventListener){
return function(dom, type, fn){
dom.addEventListener(type, fn, false);
}
}else if(dom.attachEvent){
return function(dom, type, fn){
dom.attachEvent('on'+type, fn);
}
}else{
return function(dom, type, fn){
dom['on'+type] = fn;
}
}
}();
- 惰性執行:第一次執行函數時在函數內部對其進行顯示重寫,最后調用重寫后的方法完成第一次方法調用。
var AddEvent = function(dom, type, fn){
if(dom.addEventListener){
AddEvent = function(dom, type, fn){
dom.addEventListener(type, fn, false);
}
}else if(dom.attachEvent){
AddEvent = function(dom, type, fn){
dom.attachEvent('on'+type, fn);
}
}else{
AddEvent = function(dom, type, fn){
dom['on'+type] = fn;
}
}
AddEvent(dom, type, fn);
};
與加載即執行不同的是,JS文件加載完成后,惰性執行的函數還沒有被重新定義,當函數被首次調用時才會被重定義。這兩種惰性方式都避免了冗余的分支判斷。
惰性模式的應用場景非常廣泛,特別是當今瀏覽器種類繁多的現象,很多功能在不同瀏覽器中實現不一,為了兼容不同的瀏覽器,代碼中往往會有許多對不同瀏覽器的分支判斷,比如事件處理、XMLHttpRequest對象創建等,造成代碼臃腫冗余,惰性模式正好可以解決這種問題,提高代碼執行效率。
本文為作者kMacro原創,轉載請注明來源:http://www.lxweimin.com/p/9a7be94a3ea7。