JS設計模式之惰性模式（二）
惰性模式：減少代碼每次執(zhí)行時的重復性判斷，通過重新定義對象來避免原對象中的分支判斷，提高網(wǎng)站性能。
例如針對不同瀏覽器的事件注冊方法：
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)，每次為元素綁定事件時，都會進行檢測判斷，這是多余的，因為在同一瀏覽器中分支判斷結(jié)果是唯一的，不可能走不同的分支。
我們可以用惰性模式來解決這個問題，既然第一次調(diào)用該方法時已經(jīng)判斷過了，那么就可以在第一次執(zhí)行時根據(jù)判斷結(jié)果重新定義該方法。
惰性模式主要有兩種實現(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ù)內(nèi)部對其進行顯示重寫，最后調(diào)用重寫后的方法完成第一次方法調(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ù)還沒有被重新定義，當函數(shù)被首次調(diào)用時才會被重定義。這兩種惰性方式都避免了冗余的分支判斷。
惰性模式的應用場景非常廣泛，特別是當今瀏覽器種類繁多的現(xiàn)象，很多功能在不同瀏覽器中實現(xiàn)不一，為了兼容不同的瀏覽器，代碼中往往會有許多對不同瀏覽器的分支判斷，比如事件處理、XMLHttpRequest對象創(chuàng)建等，造成代碼臃腫冗余，惰性模式正好可以解決這種問題，提高代碼執(zhí)行效率。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了js結(jié)合html制作簡單驗證碼的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)tab頁面切換功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
JavaScript中去掉數(shù)組中的重復值的實現(xiàn)方法
百度面試時問的一道題目，蠻常規(guī)的，但是當時自己的回答挺差勁的?，F(xiàn)在總結(jié)記錄下~2011-08-08
式化數(shù)字保留兩位小數(shù)點實現(xiàn)的方法有很多，在接下來的文章中將為大家詳細介紹下如何使用js來實現(xiàn)2013-10-10
這篇文章主要介紹了JS原型和繼承，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)頁面電子時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要給大家介紹了關于如何利用Proxy更優(yōu)雅地處理異常的相關資料,文中通過實例代碼以及圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
本文給大家介紹了使用js查找法實現(xiàn)當前欄目的高亮顯示的代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2007-11-11
這篇文章主要介紹了Javascript 制作圖形驗證碼實例詳解的相關資料,附有實例代碼及實現(xiàn)效果圖，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了js如何計算斐波那契數(shù)列第n項的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01