快捷導(dǎo)航

JavaScript 函數(shù)惰性載入的實(shí)現(xiàn)及其優(yōu)點(diǎn)介紹

更新時(shí)間：2013年08月12日 16:01:49 作者：

惰性載入表示函數(shù)執(zhí)行的分支只會(huì)在函數(shù)第一次掉用的時(shí)候執(zhí)行，在第一次調(diào)用過程中，該函數(shù)會(huì)被覆蓋為另一個(gè)按照合適方式執(zhí)行的函數(shù)，這樣任何對(duì)原函數(shù)的調(diào)用就不用再經(jīng)過執(zhí)行的分支了

最近看JavaScript高級(jí)程序設(shè)計(jì)，大有收獲，接下來幾天寫一下讀書筆記。之前寫了一篇Ajax初步理解的隨筆，里面有個(gè)函數(shù)用來創(chuàng)建XmlHttpRequest對(duì)象,瀏覽器兼容性原因，寫出的代碼通過大量if判斷或者try，catch語句將函數(shù)引導(dǎo)到正確代碼處。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function createXHR(){ 
var xhr = null; 
try { 
// Firefox, Opera 8.0+, Safari，IE7+ 
xhr = new XMLHttpRequest(); 
} 
catch (e) { 
// Internet Explorer 
try { 
xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch (e) { 
try { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch (e) { 
xhr = null; 
} 
} 
} 
return xhr; 
} 
</script> 

每次調(diào)用這個(gè)函數(shù)的時(shí)候，都要先進(jìn)行瀏覽器能力檢查，首先檢查瀏覽器是否支持內(nèi)置的XMLHyypRequest對(duì)象，如果不支持然后檢查各版本基于ActiveX的XMLHttpRequest，每次調(diào)用該函數(shù)都是這樣，其實(shí)當(dāng)?shù)谝淮螆?zhí)行完后，如果瀏覽器支持某個(gè)特定XMLHttpRequest對(duì)象，那么下次執(zhí)行的時(shí)候這種支持性并不會(huì)改變，沒必要再進(jìn)行一邊檢測(cè)，即使只有一個(gè)if語句，執(zhí)行也肯定比沒有要慢，如果我們可以讓if語句不必每次執(zhí)行，那么就可以在頻繁調(diào)用的情況下提高執(zhí)行速度。解決方案就是稱之為惰性載入的技巧。

惰性載入

惰性載入表示函數(shù)執(zhí)行的分支只會(huì)在函數(shù)第一次掉用的時(shí)候執(zhí)行，在第一次調(diào)用過程中，該函數(shù)會(huì)被覆蓋為另一個(gè)按照合適方式執(zhí)行的函數(shù)，這樣任何對(duì)原函數(shù)的調(diào)用就不用再經(jīng)過執(zhí)行的分支了。createXHR函數(shù)可以被改寫為這樣

復(fù)制代碼代碼如下:

 
function createXHR(){ 
var xhr=null; 
if(typeof XMLHttpRequest !='undefined'){ 
xhr = new XMLHttpRequest(); 
createXHR=function(){ 
return new XMLHttpRequest(); 
} 
}else{ 
try { 
xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
createXHR=function(){ 
return new ActiveXObject("Msxml2.XMLHTTP"); 
} 
} 
catch (e) { 
try { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
createXHR=function(){ 
return new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 
catch (e) { 
createXHR=function(){ 
return null; 
} 
} 
} 
} 
return xhr; 
} 

在這個(gè)惰性載入的createXHR中第一次執(zhí)行的時(shí)候每個(gè)分支都會(huì)為createXHR重新賦值，覆蓋原函數(shù)，返回xhr對(duì)象，而第二次執(zhí)行的時(shí)候就會(huì)直接調(diào)用重寫后的函數(shù)，這樣就不必執(zhí)行每個(gè)分支重新做檢測(cè)了。

優(yōu)點(diǎn)

惰性載入函數(shù)有兩個(gè)主要優(yōu)點(diǎ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庫在在加載的時(shí)候就根據(jù)瀏覽器不同而執(zhí)行很多分支，把所有東西實(shí)現(xiàn)設(shè)置好，而惰性載入函數(shù)將計(jì)算延遲，不影響初始腳本的執(zhí)行時(shí)間。

您可能感興趣的文章: