給頁面中的js和css 添加版本號

思路什麼的就是在向服務器發起請求下載這些靜態文件前已經把版本號加上去了

1、給css文件添加版本號

var now=new Date().getTime();
linkHrefs=['../css/checkbox.css','../css/combo.select.css','../css/jedate.css']
 for(var i=0;i<linkHrefs.length;i++){
     var links=document.createElement("link");
     links.href=linkHrefs[i]+"?v="+now;
     links.rel="stylesheet";
     links.type="text/css"; 
     document.head.appendChild(links)
}

2、給js文件添加版本號

    var nowL=new Date().getTime();
      scriptSrc=["../js/jquery-1.8.3.min.js","../js/vue.js","../js/moduleTest.js","../js/jquery.jedate.js"]
      for(var i=0;i<scriptSrc.length;i++){
        var scripts=document.createElement("script");
        scripts.src=scriptSrc[i]+"?v="+nowL;
        document.body.appendChild(scripts)    
      }

 

現在js 和css 的版本號都已經添加上去了，做了修改之後用戶不需要強制刷新就能獲取到最新的代碼，呈現最新效果。

3、按順序加載js文件

版本號是順利的添加上去了，但是又發現了新的問題，某些時候js文件是有前後依賴關係的，需要按順序加載到頁面中。

方法一 

Firefox Chrome 和Safari 會在<script>元素接收完成時觸發一個load事件。

在IE中，它會觸發一個readystatechange事件，<script>元素會提供一個readyState屬性，它的值在外鏈文件的下載過程的不同階段會發生變化，實際應用中，最有用的兩個狀態時'loaded' 和'complete' 

所以，綜上所述一個比較完整的 按順序動態加載js文件的過程如下

      function loadScript(url,callback){
        var script=document.createElement("script");
        script.type="text/javascript";
        if(script.readyState){ //ie
          script.onreadystatechange=function(){
            if(script.readyState=="loaded" || script.readyState=="complete"){
              script.onreadystatechange=null;
              callback();
            }
          }    
        }else{
          script.onload=function(){
            callback();
          }
        }
        script.src=url;
        document.getElementsByTagName("head")[0].appendChild(script)
      }
    
      loadScript('../js/jquery-1.8.3.min.js',function(){
        loadScript('../js/jquery.jedate.js',function(){
          //console.log('js 已經按順序加載完畢')
        })
      })

這段代碼會先加載jquery-1.8.3.min.js， 等待加載完畢後再加載jquery.jedate.js。 但是如果需要加載的js文件較多，這個方案會有些麻煩。

 

方法二

lazyload 類庫 

lazyload同樣支持下載多個js文件，並能保證在所有瀏覽器中都以正確的順序執行。

   <script type="text/javascript" src="lazyload-min.js"></script>
   <script>
     LazyLoad.js("first-file.js",function(){ //加載一個js文件
       init()
     })
     LazyLoad.js(['file-first.js','file-second.js'],function(){ //加載多個js文件
       init()
     })
   </script>

方法三

LABjs

LABjs 允許使用wait()方法來指定哪些文件需要等待其他文件。

 <script type="text/javascript" src="lab.js"></script>
   <script>
     $LAB.script("first-file")
         .wait(function(){
            // .....
          })
   </script>

三種方法總結：

 

如果多個文件的下載順序很重要，更好的解決方式是把它們按照正確順序合併成一個文件。