JavaScript中的惰性載入函數(shù)及優(yōu)勢(shì)
定義
惰性載入函數(shù)表示函數(shù)執(zhí)行的分支僅會(huì)發(fā)生一次,有兩種實(shí)現(xiàn)惰性載入函數(shù)的方式,第一種是在函數(shù)被調(diào)用時(shí)再處理,在第一次調(diào)用中,該函數(shù)會(huì)覆蓋為另外一個(gè)按合適方式執(zhí)行的函數(shù),這樣任何對(duì)函數(shù)的調(diào)用都不用再經(jīng)過(guò)執(zhí)行的分支了。第二種實(shí)現(xiàn)惰性載入的方式是在聲明函數(shù)時(shí)就制定適當(dāng)?shù)暮瘮?shù),這樣,第一次調(diào)用函數(shù)時(shí)就不會(huì)損失性能了,而在代碼首次加載時(shí)會(huì)損失一點(diǎn)兒性能。
功能
由于現(xiàn)在瀏覽器之間的差異,為了實(shí)現(xiàn)跨瀏覽器工作,很多函數(shù)要書寫大量if語(yǔ)句或者try…catch…語(yǔ)句。當(dāng)每次調(diào)用函數(shù)時(shí),都要對(duì)每個(gè)if分支或try語(yǔ)句進(jìn)行檢查,這樣會(huì)使得瀏覽器反應(yīng)變慢。實(shí)際上,當(dāng)我們用某個(gè)瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí),就決定了某個(gè)if分支或try語(yǔ)句是可用的,沒(méi)有必要每次調(diào)用都檢查。為了解決以上問(wèn)題,JavaScript中出現(xiàn)一種名為惰性載入的技巧。
示例
載入方式一
var flag = 1;
function test1() {
if(typeof flag === 'undefined') {
test1 = function() {
return 0;
}
} else if(flag === 1) {
test1 = function() {
return 1;
}
} else {
test1 = function () {
return -1;
}
}
return test1();
}
這里if語(yǔ)句的每個(gè)分支都會(huì)為test1變量賦值,有效覆蓋了原有的函數(shù),最后一步便是調(diào)用新賦的函數(shù),下一次調(diào)用test1()的時(shí)候就會(huì)直接調(diào)用被分配的函數(shù),就不會(huì)再走if語(yǔ)句了,這樣就可以提高性能。
載入方式二
var flag = 1;
var test2 = (function() {
if(typeof flag === 'undefined') {
return function() {
return 0;
}
} else if(flag === 1) {
return function () {
return 1;
}
} else {
return function () {
return -1;
}
}
})();
不同點(diǎn)是使用了立即執(zhí)行函數(shù),通過(guò)var來(lái)定義函數(shù),在每個(gè)if分支中return一個(gè)函數(shù)。
優(yōu)勢(shì)
惰性載入函數(shù)有兩個(gè)主要優(yōu)點(diǎn),第一是顯而易見(jiàn)的效率問(wèn)題,雖然在第一次執(zhí)行的時(shí)候函數(shù)會(huì)意味賦值而執(zhí)行的慢一些,但是后續(xù)的調(diào)用會(huì)因?yàn)楸苊獾闹貜?fù)檢測(cè)更快;第二個(gè)是要執(zhí)行的適當(dāng)代碼只有當(dāng)實(shí)際調(diào)用函數(shù)是才執(zhí)行,很多JavaScript庫(kù)在在加載的時(shí)候就根據(jù)瀏覽器不同而執(zhí)行很多分支,把所有東西實(shí)現(xiàn)設(shè)置好,而惰性載入函數(shù)將計(jì)算延遲,不影響初始腳本的執(zhí)行時(shí)間。
總結(jié)
以上所述是小編給大家介紹的JavaScript中的惰性載入函數(shù)及優(yōu)勢(shì),希望對(duì)大家有所幫助,也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法,以實(shí)例形式分析了輪詢操作的原理與javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02
javascript實(shí)現(xiàn)3D變換的立體圓圈實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)3D變換的立體圓圈效果,涉及javascript動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)滾動(dòng)與變色的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
Threejs實(shí)現(xiàn)滴滴官網(wǎng)首頁(yè)地球動(dòng)畫功能
這篇文章主要介紹了Threejs實(shí)現(xiàn)滴滴官網(wǎng)首頁(yè)地球動(dòng)畫效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
JavaScript 函數(shù)的執(zhí)行過(guò)程
下面小編就為大家?guī)?lái)一篇JavaScript 函數(shù)的執(zhí)行過(guò)程。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05

