LSストレージクラスライブラリ

5376 ワード

モバイルエンドネットワーク環境の不安定性を考慮して、ネットワーク遅延(network latency)を回避するために、ほとんどのウェブサイトのモバイルエンドサイトは、膨大なクラスライブラリをローカルブラウザのLSに格納します.
簡単なコードでjQueryの正確なロードを保証します.このコードを見てみましょう.コードの詳細はコメントに書かれています.
!function (globals, document) {
    var storagePrefix = "mbox_";
    globals.LocalJs = {
        require: function (file, callback) {
            /*
                      localstorage,   document.write             
                  fallback,  document.write             
            */

            if (!localStorage.getItem(storagePrefix + "jq")) {
                document.write(''" type="text/javascript">');
                var self = this;

            /*
                  3s      ,             jquery  ,  localstorage (    _loadjs  )
                  “  ”   ,         
                      3s  ?      document.write  jQuery      。    3s          
                    document.write             ,         ,    3s
            */
                setTimeout(function () {
                    self._loadJs(file, callback)
                }, 3e3)
            } else {
                //       localstorage,     
                this._reject(localStorage.getItem(storagePrefix + "jq"), callback)
            }
        },
        _loadJs: function (file, callback) {
            if (!file) {
                return false
            }
            var self = this;
            var xhr = new XMLHttpRequest;
            xhr.open("GET", file);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        localStorage.setItem(storagePrefix + "jq", xhr.responseText)
                    } else {}
                }
            };
            xhr.send()
        },
        _reject: function (data, callback) {
            var el = document.createElement("script");
            el.type = "text/javascript";
            /*
                      LS    ,       
                1. eval
                2. new Function
                3.    script       ,   script       

                            ,                         
                    jsperf    ,             。
            */
            el.appendChild(document.createTextNode(data));
            document.getElementsByTagName("head")[0].appendChild(el);
            callback && callback()
        },
        isSupport: function () {
            return window.localStorage
        }
    }
}(window, document);

関数呼び出し

!function () {
    var url = _GET_HASHMAP ? _GET_HASHMAP("/player/static/js/naga/common/jquery-1.7.2.js") : "/player/static/js/naga/common/jquery-1.7.2.js";
    url = url.replace(/^\/\/mu[0-9]*\.bdstatic\.com/g, "");
    LocalJs.require(url, function () {})
}(); 

ブラウザの静的リソースのロードは並列であり、ネットワークの不安定性がオンラインの安定性に大きく影響するため、オンライン上のいくつかの不思議なライブラリの導入に失敗したエラーを確保できます.