JS設計模式之惰性模式（二）

更新時間：2017年09月29日 10:45:27 作者：kMacro

這篇文章主要為大家詳細介紹了JS設計模式之惰性模式的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

惰性模式：減少代碼每次執(zhí)行時的重復性判斷，通過重新定義對象來避免原對象中的分支判斷，提高網站性能。

例如針對不同瀏覽器的事件注冊方法：

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;
 }
}

從上面的方法可以發(fā)現(xiàn)，每次為元素綁定事件時，都會進行檢測判斷，這是多余的，因為在同一瀏覽器中分支判斷結果是唯一的，不可能走不同的分支。

我們可以用惰性模式來解決這個問題，既然第一次調用該方法時已經判斷過了，那么就可以在第一次執(zhí)行時根據判斷結果重新定義該方法。

惰性模式主要有兩種實現(xiàn)方法：

加載即執(zhí)行：JavaScript文件加載時通過閉包執(zhí)行對方法進行重新定義，在頁面加載時會消耗一定的資源。

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;
 }
 }
}();

惰性執(zhí)行：第一次執(zhí)行函數(shù)時在函數(shù)內部對其進行顯示重寫，最后調用重寫后的方法完成第一次方法調用。

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);
};

與加載即執(zhí)行不同的是，JS文件加載完成后，惰性執(zhí)行的函數(shù)還沒有被重新定義，當函數(shù)被首次調用時才會被重定義。這兩種惰性方式都避免了冗余的分支判斷。

惰性模式的應用場景非常廣泛，特別是當今瀏覽器種類繁多的現(xiàn)象，很多功能在不同瀏覽器中實現(xiàn)不一，為了兼容不同的瀏覽器，代碼中往往會有許多對不同瀏覽器的分支判斷，比如事件處理、XMLHttpRequest對象創(chuàng)建等，造成代碼臃腫冗余，惰性模式正好可以解決這種問題，提高代碼執(zhí)行效率。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: