1. 程式人生 > >javascript面向物件程式設計--惰性載入函式(瀏覽器相容性處理)

javascript面向物件程式設計--惰性載入函式(瀏覽器相容性處理)

因為各大瀏覽器所使用的JS引擎不同,所以在實現某一個功能時都或多或少的存在差異,導致在寫程式碼時要針對每一個功能給出相容瀏覽器的不同實現方式,這樣在執行程式碼時就會造成效能的損耗。所以就出現了惰性載入函式的概念。原理就是:當前瀏覽器第一次支援以該方法實現某功能,那麼在這個頁面執行期間會一直都支援該方法。
 
一般在寫相容性較好的程式碼時,我們會使用多個if分支語句來判斷當前瀏覽器支援哪種方法,這時如果每次呼叫函式都把if分支走一遍顯然是損耗效能的。下面來看一個簡單的例子:

function addEventHandler(element, eventType, func){
        if (element.addEventListener){
            element.addEventListener(eventType, func, false);
        }else if (element.attachEvent){
            element.attachEvent('on' + eventType, func);
        }else{
            element['on' + eventType] = func;
        }
    }

上面的函式,是一個簡單的相容各大瀏覽器的一個事件註冊函式,如果採用上面的這種方式來定義函式,那麼函式會在每次執行時都把if分支走一遍,顯然不是明智的選擇。下面來看一下如何用惰性載入函式來處理中情況吧!

一. 第一種實現方法:函式覆蓋

function addEventHandler(element, eventType, func){
        if (typeof addEventListener == 'function'){
            addEventHandler = function (element, eventType, func){
                element.addEventListener(eventType, func, false);
            }
        }
        }else if (typeof attachEvent == 'function'){
            addEventHandler = function (element, eventType, func){
                element.attachEvent('on' + eventType, func);
            }
        }else{
            addEventHandler = function (element, eventType, func){
                element['on' + eventType] = func;
            }
        }
        return addEventHandler(element, eventType, func);
    }

將程式碼改為如上的方式,就可以在整個頁面執行期間如果多次呼叫該函式,只走一遍if分支,因為在第一次執行函式時,if分支中的函式就覆蓋了外部的函式。比如在Chrome瀏覽器中,第一次執行程式碼後,列印addEventHandler函式將變為如下這樣:

function (element, eventType, func){ element.addEventListener(eventType, func, false); }

可以看出分支中的同名函式覆蓋了外部的函式。

二. 第二種實現方法:自執行函式

var addEventHandler = (function (element, eventType, func){


        if (typeof addEventListener == 'function'){
            return function (){
                element.addEventListener(eventType, func, false);   
            }
        }else if (typeof attachEvent == 'function'){
            return function (){
                element.attachEvent('on' + eventType, func);
            }
        }else{
            return function (){
                element['on' + eventType] = func;
            }
        }
    })();

用自執行函式的方法,函式定義在全域性環境的話,當頁面一經載入將針對該瀏覽器的實現方法賦給了addEventHandler函式,只是在第一次載入時耗費資源,將頁面載入後,列印addEventHandler函式如下:

function (){ element.addEventListener(eventType, func, false); }

以上是惰性載入函式的實現方式,兩種方式都可以避免執行不必要的程式碼。具體使用根據自己的需求而定。