分享一个控制JS 浏览器缓存的解决办法。

　　　 JS 缓存的问题一直都是我们又爱又恨的东西。也是我们比较头痛的问题，

         一方面为了提高网站响应速度,减少服务器的负担,和节省带宽，将需要将静态资源缓存在客户端，

         但是另一方面，当js 文件有改动的时候，如何快速的将客户端缓存的js文件都失效，这是非常头痛的问题。

         以至于每次客户反馈问题的时候，我们第一个解决办法都是清理浏览器缓存。

 

         那么如何解决呢。

 

         1. 直接禁止全部的静态文件缓存

                   在html 头部加上如下代码：

                   <META HTTP-EQUIV="pragma" CONTENT="no-cache">

                   <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

                   <META HTTP-EQUIV="expires" CONTENT="0">

 

         这样所有的js 文件都不会被缓存。这显然是不可取的。

        

         2.加版本号，在每个js的后面，都加上js 的版本号，

         <script src="test.js?v=101"></script>

        

         当某个js文件有变动时，则修改该js文件的版本号。这样就能解决js 没有更新时，能够缓存js文件，有变动的时，也能更新到最新的js的问题。

        

         但是每次js 有变动时，所有引用到改js的地方都得改一遍，这太麻烦了吧。

        

         有办法：

         1.创建公共js文件，将所有需要控制的js文件加入到JSHash 里面

         //// js files map 本文件可独立运行,无需依赖于其他文件

         var strSite = window.location.protocol + "//" + window.location.host + "/"; //// 网站主机头

        

         var JSHash = { 

                   test: { url: strSite + "test.js",type:"javascript", version: "v0001" },

         }

        

         function loadJS(keys) {

                   if (keys) {

                            for (var i = 0; i < keys.length; i++) {

                                     var jsnode = JSHash[keys[i]];

                                     if(jsnode.type="javascript")

                                     {

                                               document.writeln("<script type=\"text/javascript\" src=\"" + jsnode.url + "?" + jsnode.version + "\"></script>");

                                     }

                                     else

                                     {

                                               document.writeln("<link type="text/css" href=\"" + jsnode.url + "?" + jsnode.version + "\" />");

                                     }

                            }

                   }

         }

        

         2. 在相关页面引用js 的方改为：loadJS(["test"]);  

        

         这样每一次更新的时候，只需要调整相关JS的版本号即可。