1 /**  2  * Created by SevenNight on 2016/9/21 0021.  3  * 插件功能：使用localStorage缓存js和css文件，减少http请求和页面渲染时间  4  * 使用方法：  5  *    1.使用此插件前，需要给插件的pageVersion变量赋值，建议变量值由服务器后端输出，当需要更新客户端资源时，修改版本值即可。  6  *    2.加载Js：由于js加载有顺序要求，所以需要将后加载的脚本作为前一个脚本的回调参数传入，如：  7  *    whir.res.loadJs("jquery", "//cdn.bootcss.com/jquery/1.12.4/jquery.min.js",  8  *        function () {  9  *            whir.res.loadJs("turntable", "Script/whir.turntable.js", null); 10  *        } 11  *    ); 12  *    3.加载css，如：whir.res.loadCss("css", "/Style/css_whir.css", null); 13  */ 14 var whir = window.whir || {}; 15 function getRelativePath(url,level){ 16     var urlarray = url.split("/"); 17     var resulturl = ""; 18     for(var i=0;i<urlarray.length-level;i++){ 19         resulturl += urlarray[i]+"/"; 20     } 21     return resulturl; 22 } 23 whir.res = { 24     pageVersion: "0.0.1", //页面版本，也由页面输出，用于刷新localStorage缓存 25     //动态加载js文件并缓存 26     loadJs: function (name, url, callback) { 27         if (window.localStorage) { 28             var xhr; 29             var js = localStorage.getItem(name); 30             if (js == null || js.length == 0 || this.pageVersion != localStorage.getItem("version")) { 31                 if (window.ActiveXObject) { 32                     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 33                 } else if (window.XMLHttpRequest) { 34                     xhr = new XMLHttpRequest(); 35                 } 36                 if (xhr != null) { 37                     xhr.open("GET", url); 38                     xhr.send(null); 39                     xhr.onreadystatechange = function () { 40                         if (xhr.readyState == 4 && xhr.status == 200) { 41                             js = xhr.responseText; 42                             localStorage.setItem(name, js); 43                             localStorage.setItem("version", whir.res.pageVersion); 44                             js = js == null ? "" : js; 45                             whir.res.writeJs(js); 46                             if (callback != null) { 47                                 callback(); //回调，执行下一个引用 48                             } 49                         } 50                     }; 51                 } 52             } else { 53                 whir.res.writeJs(js); 54                 if (callback != null) { 55                     callback(); //回调，执行下一个引用 56                 } 57             } 58         } else { 59             whir.res.linkJs(url); 60         } 61     }, 62     loadCss: function (name, url) { 63         if (window.localStorage) { 64             var xhr; 65             var css = localStorage.getItem(name); 66             if (css == null || css.length == 0 || this.pageVersion != localStorage.getItem("version")) { 67                 if (window.ActiveXObject) { 68                     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 69                 } else if (window.XMLHttpRequest) { 70                     xhr = new XMLHttpRequest(); 71                 } 72                 if (xhr != null) { 73                     xhr.open("GET", url); 74                     xhr.send(null); 75                     xhr.onreadystatechange = function () { 76                         if (xhr.readyState == 4 && xhr.status == 200) { 77                             css = xhr.responseText; 78                             localStorage.setItem(name, css); 79                             localStorage.setItem("version", whir.res.pageVersion); 80                             css = css == null ? "" : css; 81                             css = css.replace(/\..\/fonts\//g, getRelativePath(url,2)+"fonts/"); //css里的font路径需单独处理 82                             whir.res.writeCss(css); 83                         } 84                     }; 85                 } 86             } else { 87                 css = css.replace(/\..\/fonts\//g, getRelativePath(url,2)+"fonts/"); //css里的font路径需单独处理 88                 whir.res.writeCss(css); 89             } 90         } else { 91             whir.res.linkCss(url); 92         } 93     }, 94     //往页面写入js脚本 95     writeJs: function (text) { 96         var head = document.getElementsByTagName(‘HEAD‘).item(0); 97         var link = document.createElement("script"); 98         link.type = "text/javascript"; 99         link.innerHTML = text;100         head.appendChild(link);101     },102     //往页面写入css样式103     writeCss: function (text) {104         var head = document.getElementsByTagName(‘HEAD‘).item(0);105         var link = document.createElement("style");106         link.type = "text/css";107         link.innerHTML = text;108         head.appendChild(link);109     },110     //往页面引入js脚本111     linkJs: function (url) {112         var head = document.getElementsByTagName(‘HEAD‘).item(0);113         var link = document.createElement("script");114         link.type = "text/javascript";115         link.src =http://www.mamicode.com/ url;116         head.appendChild(link);117     },118     //往页面引入css样式119     linkCss: function (url) {120         var head = document.getElementsByTagName(‘HEAD‘).item(0);121         var link = document.createElement("link");122         link.type = "text/css";123         link.rel = "stylesheet";124         link.rev = "stylesheet";125         link.media = "screen";126         link.href =http://www.mamicode.com/ url;127         head.appendChild(link);128     }129 };