js如何使用惰性載入函數(shù)

這篇文章主要為大家展示了“js如何使用惰性載入函數(shù)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js如何使用惰性載入函數(shù)”這篇文章吧。

惰性載入函數(shù)

因?yàn)楦鳛g覽器之間的行為的差異，我們經(jīng)常會(huì)在函數(shù)中包含了大量的if語(yǔ)句，以檢查瀏覽器特性，解決不同瀏覽器的兼容問(wèn)題。比如，我們最常見(jiàn)的為dom節(jié)點(diǎn)添加事件的函數(shù)

function addEvent(type, element, fun) {
    if (element.addEventListener) {
        element.addEventListener(type, fun, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, fun);
    } else {
        element['on' + type] = fun;
    }
}

每次調(diào)用addEvent函數(shù)的時(shí)候，它都要對(duì)瀏覽器所支持的能力進(jìn)行檢查，首先檢查是否支持addEventListener方法，如果不支持，再檢查是否支持attachEvent方法，如果還不支持，就用dom0級(jí)的方法添加事件。

這個(gè)過(guò)程，在addEvent函數(shù)每次調(diào)用的時(shí)候都要走一遍，其實(shí)，如果瀏覽器支持其中的一種方法，那么他就會(huì)一直支持了，就沒(méi)有必要再進(jìn)行其他分支的檢測(cè)了。也就是說(shuō)，if語(yǔ)句不必每次都執(zhí)行，代碼可以運(yùn)行的更快一些。

解決方案就是惰性載入。所謂惰性載入，指函數(shù)執(zhí)行的分支只會(huì)發(fā)生一次，有兩種實(shí)現(xiàn)惰性載入的方式

1、第一種是在函數(shù)被調(diào)用時(shí)，再處理函數(shù)。函數(shù)在第一次調(diào)用時(shí)，該函數(shù)會(huì)被覆蓋為另外一個(gè)按合適方式執(zhí)行的函數(shù)，這樣任何對(duì)原函數(shù)的調(diào)用都不用再經(jīng)過(guò)執(zhí)行的分支了

我們可以用下面的方式使用惰性載入重寫(xiě)addEvent()

function addEvent(type, element, fun) {
    if (element.addEventListener) {
        addEvent = function(type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    } else if (element.attachEvent) {
        addEvent = function(type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    } else {
        addEvent = function(type, element, fun) {
            element['on' + type] = fun;
        }
    }
    return addEvent(type, element, fun);
}

在這個(gè)惰性載入的addEvent()中，if語(yǔ)句的每個(gè)分支都會(huì)為addEvent變量賦值，有效覆蓋了原函數(shù)。最后一步便是調(diào)用了新賦函數(shù)。下一次調(diào)用addEvent()時(shí)，便會(huì)直接調(diào)用新賦值的函數(shù)，這樣就不用再執(zhí)行if語(yǔ)句了。

但是，這種方法有個(gè)缺點(diǎn)，如果函數(shù)名稱有所改變，修改起來(lái)比較麻煩。

2、第二種是聲明函數(shù)時(shí)就指定適當(dāng)?shù)暮瘮?shù)。 這樣在第一次調(diào)用函數(shù)時(shí)就不會(huì)損失性能了，只在代碼加載時(shí)會(huì)損失一點(diǎn)性能。以下就是按照這一思路重寫(xiě)的addEvent()。以下代碼創(chuàng)建了一個(gè)匿名的自執(zhí)行函數(shù)，通過(guò)不同的分支以確定應(yīng)該使用哪個(gè)函數(shù)實(shí)現(xiàn)。

var addEvent = (function() {
    if (document.addEventListener) {
        return function(type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    } else if (document.attachEvent) {
        return function(type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    } else {
        return function(type, element, fun) {
            element['on' + type] = fun;
        }
    }
})();

以上是“js如何使用惰性載入函數(shù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！