保存 Javascript 和 CSS 到 LocalStorage 中

ResLoader.js

var Loader = (function () {
    function Loader(options) {
        this.options = options;
        if (resource.scripts && resource.baseUrl) {
            for (var i = 0; i < this.options.scripts.length; i++) {
                this.load('js', this.options.scripts[i]);
            }
            for (var i = 0; i < this.options.stylesheets.length; i++) {
                this.load('css', this.options.stylesheets[i]);
            }
        } else {
            console.log('初始化参数错误');
        }
    }

    Loader.prototype.load = function (type, obj) {
        var _this = this;
        if (window.localStorage) {
            // 判断 localStorage 中是否已经有缓存
            var hasLocal = typeof localStorage[obj.key] !== "undefined";
            var fileUrl = obj.isAbsolute ? obj.file : this.options.baseUrl + obj.file;

            //有缓存且版本相等
            if (hasLocal && JSON.parse(localStorage[obj.key])["ver"] === obj.file) {
                //设为已加载
                obj.isLoad = true;

                this.append(type, obj.file, 'inline');

            } else {
                //版本号不相等
                //清空 localstorage
                localStorage.removeItem(obj.key);

                //加载
                this.requestResource(fileUrl, function (url, content) {
                    //设为已加载
                    obj.isLoad = true;

                    if (type === "css") {
                        content = content.replace(/(?:url\('?"?(.*?)'?"?\))/g, 'url("' + url.substring(0, url.lastIndexOf('/')) + '/$1")');
                    }

                    //保存到 localStorage 中
                    localStorage[obj.key] = JSON.stringify({
                        ver: obj.file,
                        data: content
                    });

                    //append
                    _this.append(type, obj.file, 'inline');
                })
            }
        } else {
            //不支持 localStorage, 用传统的方式加载
            this.append(type, obj.file, 'url', fileUrl);
        }
    };

    // 插入资源
    // fileExtension: css/js
    // file: scripts/main_xxx.js
    // loadtype: inline/url
    // content:  inline 时, 需要插入的内容, url 时为 需要请求的完整 URL
    Loader.prototype.append = function (fileExtension, file, loadType, content) {
        if (fileExtension === "js") {
            if (loadType == "inline") {
                //for 判断文件是否加载好
                for (var i = 0; i < this.options.scripts.length; i++) {
                    var item = this.options.scripts[i];
                    if (item.isLoad && !item.isAppended) {
                        var s = document.createElement('script');
                        s.innerHTML = JSON.parse(window.localStorage[item.key])['data'];
                        document.head.appendChild(s);
                        item.isAppended = true;
                    } else if (!item.isLoad) {
                        break;
                    }
                }
            } else if (loadType === 'url') {
                var head = document.getElementsByTagName("head")[0] || document.documentElement;
                var script = document.createElement("script");
                script.src = content;
                head.insertBefore(script, head.firstChild);
            }
        } else if (fileExtension === "css") {
            if (loadType == "inline") {
                for (var i = 0; i < this.options.stylesheets.length; i++) {
                    var item = this.options.stylesheets[i];
                    if (item.isLoad && !item.isAppended) {
                        var s = document.createElement('style');
                        s.innerHTML = JSON.parse(window.localStorage[item.key])['data'];
                        document.head.appendChild(s);
                        item.isAppended = true;
                    } else if (!item.isLoad) {
                        break;
                    }
                }
            } else if (loadType === 'url') {
                var s = document.createElement('link');
                s.href = content;
                document.head.appendChild(s);
            }
        }
    };

    Loader.prototype.requestResource = function (url, success, error) {
        var request = new XMLHttpRequest();
        request.open('GET', url, true);

        request.onload = function () {
            if (request.status >= 200 && request.status < 400) {
                var resp = request.responseText;
                success(url, resp)
            } else {
                if (typeof error === 'function') {
                    error(url);
                }
            }
        };
        request.send();
    };

    return Loader;

})();


//baseUrl 文件
//key 为在 LocalStorage 中的 key 名称
//version 为内容名称,同步也是 content 中保存的
var resource = {
    baseUrl: "./",
    stylesheets: [
        {
            key: "css/style-jingqu_css",
            file: "//wximg.gtimg.com/tmt/city-jingqu/dist/css/style-jingqu.css?v=20150721",
            isAbsolute: true
        }
    ],
    scripts: [
        {key: "scripts/vendor_js", file: "scripts/vendor.js"},
        {key: "scripts/app_js", file: "scripts/app.js"}
    ]
};

var loader = new Loader(resource);