開發十年，就只剩下這套架構體系了！ >>>   

• 因為瀏覽器間行為的差異，多數javascript程式碼包含大量的if判斷語句，為避免每次函式呼叫都去執行那些沒有必要的if判斷語句
• 實現惰性載入函式的方法有兩種：
  • 在函式執行的時候在處理函式，在函式第一次呼叫的過程中，該函式會被重寫覆蓋成另一個按照合適方式執行的函式，下面見例子：建立XHR

    function createXHR () {
        if (typeof XMLHttpRequest != 'undefined') {
            return new XMLHttpRequest();
        } else if (typeof ActiveXObject != 'undefined') {
            if (typeof arguments.callee.activeXString != 'string'){
                var version = ['MSXML2.XMLHttp.6.3', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
                i,len;
                for (i = 0,len=version.length; i < len; i++) {
                    try {
                        new ActiveXObject(version[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch (ex) {
                        // 跳過
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        } else {
            throw new Error('NO XHR');
        }
    }
     
    

    每次執行這個建立函式都會去執行內部的那些判斷語句，所以見如下改寫該函式，重寫原函式，下一次呼叫時就會直接呼叫分配好的函式

    function createXHR () {
        if (typeof XMLHttpRequest != 'undefined') {
            // 改寫原函式
            createXHR = function () {
                return new XMLHttpRequest();
            }
        } else if (typeof ActiveXObject != 'undefined') {
            // 改寫原函式
            createXHR = function () {
                if (typeof arguments.callee.activeXString != 'string'){
                    var version = ['MSXML2.XMLHttp.6.3', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
                    i,len;
                    for (i = 0,len=version.length; i < len; i++) {
                        try {
                            new ActiveXObject(version[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex) {
                            // 跳過
                        }
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString);
            }
        } else {
             createXHR = function () {
                throw new Error('NO XHR');
             }
        }
        // 最後返回預期
        return createXHR();
    }
     
    

  • 第二種惰性載入的方式是在宣告函式時就指定適當的函式，見下面改寫，該例子中使用匿名、自執行函式：

    var createXHR = (function () {
        if (typeof XMLHttpRequest != 'undefined') {
            // 返回分配好的函式
            return function () {
                return new XMLHttpRequest();
            };
        } else if (typeof ActiveXObject != 'undefined') {
             // 返回分配好的函式
           return function () {
                if (typeof arguments.callee.activeXString != 'string'){
                    var version = ['MSXML2.XMLHttp.6.3', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
                    i,len;
                    for (i = 0,len=version.length; i < len; i++) {
                        try {
                            new ActiveXObject(version[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex) {
                            // 跳過
                        }
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString);
            };
        } else {
             return function () {
                throw new Error('NO XHR');
             };
        }
    })()
     
    

    相關推薦

    js高階技巧之惰性載入函式

    開發十年，就只剩下這套架構體系了！ >>>   

    js高階技巧之函式繫結

    開發十年，就只剩下這套架構體系了！ >>>   

    js高階技巧之函式節流

    開發十年，就只剩下這套架構體系了！ >>>   

    js高階技巧之柯里化

    開發十年，就只剩下這套架構體系了！ >>>   

    js高階技巧之凍結物件

    開發十年，就只剩下這套架構體系了！ >>>   

    js高階技巧之密封物件

    開發十年，就只剩下這套架構體系了！ >>>   

    js高階技巧之不可擴充套件物件

    開發十年，就只剩下這套架構體系了！ >>>   

    js高階技巧總結之高階函式和防篡改物件

    高階函式 1.安全的型別檢測         談到型別檢測，可能大家首先想到的就是typeof 或者 instanceof (檢測陣列Array.isArray(arr))等這些方式，但是這些方法都有自己的侷限性，比如說Safari（直至第四版）對正則使用typeof

    javascript高階程式設計之--自執行函式

    什麼是自執行函式？ 顧名思義.就是不用呼叫，自己自動就會執行的函式； 為什麼要用自執行函式？ 自執行函式內部是一個獨立的作用域，這樣就保持了一個相對獨立的名稱空間，避免汙染全域性作用域 怎麼建立自執行函式？ 寫法一:(function(param){…})(re—param)

    javascript面向物件程式設計--惰性載入函式（瀏覽器相容性處理）

    因為各大瀏覽器所使用的JS引擎不同，所以在實現某一個功能時都或多或少的存在差異，導致在寫程式碼時要針對每一個功能給出相容瀏覽器的不同實現方式，這樣在執行程式碼時就會造成效能的損耗。所以就出現了惰性載入函式的概念。原理就是：當前瀏覽器第一次支援以該方法實現某功能，那麼在這個頁面執行期間會一直都支援該方

    java高階反射之獲取建構函式(二)

    前提:Person類中有有參無參的建構函式，供測試用 package com.jk.fs; import java.lang.reflect.Constructor; /**  * 反射機制(獲取Class中的建構函式)  * @author sx123  

    數獨高階技巧之八——SDC

    在本系列的第四篇“簡單異數鏈”中，向大家介紹了XY-Wing等一系列Wing類技巧，並提到可以用（拐彎的）陣列的觀念來理解這些結構，經過第六篇ALS的學習之後，大家回過頭再去看Wing，應該可以發現相關的例項都可以用ALS去解釋。本篇則要介紹一種與上述結構類似的刪除技巧——SDC（Sue de

    Node.js實戰(八)之回撥函式

    Node.js 非同步程式設計的直接體現就是回撥。 非同步程式設計依託於回撥來實現，但不能說使用了回撥後程序就非同步化了。 回撥函式在完成任務後就會被呼叫，Node 使用了大量的回撥函式，Node 所有 API 都支援回撥函式。 例如，我們可以一邊讀取檔案，一邊執行其他命令，在檔案讀取完成後，我們將檔案

    JS高階技巧彙總

    更新時間：2017年11月09日12:26:37 1、函式節流     場景：監聽頁面滾動到距離底部小於等於10px，觸發請求分頁資料；但監聽滾動事件，每滾動一幀會觸發一次函式，當用戶快速滾動頁面到達底部，會連續觸發10次請求，因此需要設定，在具體的時間(比如1000

    oracle高階用法之自定義函式

    注意：終端使用dbms_output輸出執行結果，首先PL/SQL開啟伺服器輸出 set serveroutput on; /* 使用者自定義函式 */ -- 檢視函式、觸發器select * from user_source;-- 刪除函式drop function

    一：js高階程式設計之：遞迴

    遞迴函式是在一個函式通過名字呼叫自身情況下夠成的，如： function factorial(num){ if(num <= 1){ return 1; }else{ return num*factorial(num-1) } } 這是一經典的遞迴階乘函式；表面這個

    three.js 02-04 之網格物件函式及屬性

        上一篇中，我們對自定義幾何體的相關知識做了一個簡單介紹，並講解了如何克隆（複製）一個幾何體。本篇我們要介紹的是關於 Mesh 網格物件常用的一些相關函式和屬性。照例，我們先上一個完整的示例，程式碼如下： <!DOCTYPE html> <html

    [js點滴]JavaScript之懶載入概念

    <script type="text/javascript"> /* 1.圖片懶載入 圖片懶載入也叫圖片延遲載入. 2.圖片懶載入運用範圍

    js之惰性函式

    惰性函式是js函數語言程式設計的另一個應用，惰性函式表示函式執行的分支只會在函式第一次呼叫的時候執行，他的應用情景在於當我們遇到一個需要判斷場景去呼叫不同的方法時，避免重複進入函式內的if判斷，也就是說if判斷只進行一次，之後函式就會被分支裡的程式碼替換掉 我們先看個例子 funct

    js之高階技巧

    安全的型別檢測 js內建的型別檢測方法並不安全。 ①typeOf 不能用於檢測array只能返回object，不能檢測null只能返回object，但是出乎意料的是可以檢測symbol、function和undefined。型別返回值都是字串、而且都是小寫打頭。 ②in