JavaScript 函數惰性載入

最近看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庫在在加載的時候就根據瀏覽器不一樣而執行不少分支，把全部東西實現設置好，而惰性載入函數將計算延遲，不影響初始腳本的執行時間。