JS設(shè)計(jì)模式之惰性模式（二）

發(fā)布時(shí)間：2020-08-21 05:06:58 來(lái)源：腳本之家閱讀：150 作者：kMacro 欄目：web開(kāi)發(fā)

惰性模式：減少代碼每次執(zhí)行時(shí)的重復(fù)性判斷，通過(guò)重新定義對(duì)象來(lái)避免原對(duì)象中的分支判斷，提高網(wǎng)站性能。

例如針對(duì)不同瀏覽器的事件注冊(cè)方法：

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)，每次為元素綁定事件時(shí)，都會(huì)進(jìn)行檢測(cè)判斷，這是多余的，因?yàn)樵谕粸g覽器中分支判斷結(jié)果是唯一的，不可能走不同的分支。

我們可以用惰性模式來(lái)解決這個(gè)問(wèn)題，既然第一次調(diào)用該方法時(shí)已經(jīng)判斷過(guò)了，那么就可以在第一次執(zhí)行時(shí)根據(jù)判斷結(jié)果重新定義該方法。

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

加載即執(zhí)行：JavaScript文件加載時(shí)通過(guò)閉包執(zhí)行對(duì)方法進(jìn)行重新定義，在頁(yè)面加載時(shí)會(huì)消耗一定的資源。

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í)在函數(shù)內(nèi)部對(duì)其進(jìn)行顯示重寫(xiě)，最后調(diào)用重寫(xiě)后的方法完成第一次方法調(diào)用。

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ù)還沒(méi)有被重新定義，當(dāng)函數(shù)被首次調(diào)用時(shí)才會(huì)被重定義。這兩種惰性方式都避免了冗余的分支判斷。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

JS設(shè)計(jì)模式之惰性模式（二）

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽