最近看JavaScript高級程序設計，大有收獲，接下來幾天寫一下讀書筆記。之前寫了一篇Ajax初步理解的隨筆，裡面有個函數用來創建XmlHttpRequest對象,浏覽器兼容性原因，寫出的代碼通過大量if判斷或者try，catch語句將函數引導到正確代碼處。
復制代碼 代碼如下:
<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>
每次調用這個函數的時候，都要先進行浏覽器能力檢查，首先檢查浏覽器是否支持內置的XMLHyypRequest對象，如果不支持然後檢查各版本基於ActiveX的XMLHttpRequest，每次調用該函數都是這樣，其實當第一次執行完後，如果浏覽器支持某個特定XMLHttpRequest對象，那麼下次執行的時候這種支持性並不會改變，沒必要再進行一邊檢測，即使只有一個if語句，執行也肯定比沒有要慢，如果我們可以讓if語句不必每次執行，那麼就可以在頻繁調用的情況下提高執行速度。解決方案就是稱之為惰性載入的技巧。
惰性載入 惰性載入表示函數執行的分支只會在函數第一次掉用的時候執行，在第一次調用過程中，該函數會被覆蓋為另一個按照合適方式執行的函數，這樣任何對原函數的調用就不用再經過執行的分支了。createXHR函數可以被改寫為這樣
復制代碼 代碼如下:
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;
}
在這個惰性載入的createXHR中第一次執行的時候每個分支都會為createXHR重新賦值，覆蓋原函數，返回xhr對象，而第二次執行的時候就會直接調用重寫後的函數，這樣就不必執行每個分支重新做檢測了。
優點 惰性載入函數有兩個主要優點，第一是顯而易見的效率問題，雖然在第一次執行的時候函數會意味賦值而執行的慢一些，但是後續的調用會因為避免的重復檢測更快；第二個是要執行的適當代碼只有當實際調用函數是才執行，很多JavaScript庫在在加載的時候就根據浏覽器不同而執行很多分支，把所有東西實現設置好，而惰性載入函數將計算延遲，不影響初始腳本的執行時間。