首頁 > web前端 > js教程 > JavaScript 函數惰性載入的實作及其優點介紹_javascript技巧

JavaScript 函數惰性載入的實作及其優點介紹_javascript技巧

WBOY
發布: 2016-05-16 17:25:58
原創
1135 人瀏覽過

最近看JavaScript高級程式設計,大有收穫,接下來幾天寫一下讀書筆記。之前寫了一篇Ajax初步理解的隨筆,裡面有個函數用來創建XmlHttpRequest對象,瀏覽器兼容性原因,寫出的代碼通過大量if判斷或者try,catch語句將函數引導到正確代碼處。

複製代碼 代碼如下:




每次呼叫這個函數的時候,都要先進行瀏覽器能力檢查,首先檢查瀏覽器是否支援內建的XMLHyypRequest對象,如果不支援接著檢查各版本基於ActiveX的XMLHttpRequest,每次呼叫該函數都是這樣,其實當第一次執行完後,如果瀏覽器支援某個特定XMLHttpRequest對象,那麼下次執行的時候這種支持性並不會改變,沒必要再進行一邊檢測,即使只有一個if語句,執行也肯定比沒有要慢,如果我們可以讓if語句不必每次執行,那麼就可以在頻繁調用的情況下提高執行速度。解決方案就是稱之為惰性載入的技巧。


惰性載入

惰性載入表示函數執行的分支只會在函數第一次掉用的時候執行,在第一次呼叫過程中,函數會被覆寫為另一個按照適當方式執行的函數,這樣任何對原函數的呼叫就不用再經過執行的分支了。 createXHR函數可以改寫為這樣


複製程式碼


程式碼如下:var xhr=null;
if(typeof XMLHttpRequest !='undefined'){
xhr = new XMLHttpRequest();
createXHR=function(){
return new XMLHttpRequest(new);
}
}else{
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
createXHR=function(){
return new ActiveXObject("MTPxml2.XHTMLObject ");
}
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
createXHR=function(){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
catch (e) {
createXHR=function(){
return null;
}
}
}
}
return xhr;
}


在這個惰性載入的createXHR中第一次執行的時候每個分支都會為createXHR重新賦值,覆蓋原函數,返回xhr對象,而第二次執行的時候就會直接呼叫重寫後的函數,這樣就不必執行每個分支重新做檢測了。

優點

惰性載入函數有兩個主要優點,第一是顯而易見的效率問題,雖然在第一次執行的時候函數會意味賦值而執行的慢一些,但是後續的呼叫會因為避免的重複檢測更快;第二個是要執行的適當程式碼只有當實際呼叫函數是才執行,很多JavaScript庫在載入的時候就根據瀏覽器不同而執行很多分支,把所有東西實作設定好,而惰性載入函數將計算延遲,不影響初始腳本的執行時間。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板