如何在将JS文件引用到页面之前添加JS版本

目录

介绍

背景

第一种方法

第二种方法

参考

---

介绍

当涉及到部署在我们服务器上的最新代码时，我们总是会遇到问题。该页面缓存了JavaScript，因此我们对脚本的更新不会立即生效。

背景

下面的方法将让您了解如何让我们的页面知道脚本已经有更新版本，并且应该立即由页面进行评估。我们还应该考虑页面的性能，这就是为什么我们将对某些方法使用全局localstorage。

第一种方法

此方法适用于隐藏代码的页面。

在ASPX标记上，引用CSS或JS文件，如下所：

<link rel="stylesheet" type="text/css" 
href="<%=AppendVersion("/Styles/myCSS.css")%>" /> 

在ASPX代码隐藏上，添加以下代码：

Public Shared Function AppendVersion(ByVal filePath As String) As String 
        Dim fileInfo As FileInfo = New FileInfo(Current.Request.MapPath(filePath)) 
        Dim cacheVersion As String = fileInfo.LastWriteTime.ToFileTime.ToString 
 
        Return filePath & "?v=" & cacheVersion 
End Function

第二种方法

此方法适用于没有代码的页面。此外，我们将使用窗口localstorage。以下用于检测本地存储的代码片段来自本文中的Mathias Bynens。

在ASPX标记上，添加script：

<script type="text/javascript"> 
//Start snippet detecting the global localstorage
var storage = (function() { 
      var uid = new Date, 
          storage, 
          result; 
      try { 
        (storage = window.localStorage).setItem(uid, uid); 
        result = storage.getItem(uid) == uid; 
        storage.removeItem(uid); 
        return result && storage; 
      } catch(e) {} 
    }());
//End of snippet

var cached = function(name,value) { 
   if(storage.getItem(name) != null){ 
      return (storage.getItem(name).indexOf(value) >= 0)? true : false ; 
   }else{return false;} 
}; 

var GetFile = function(path) { 
        return path.substring(path.lastIndexOf('/')+1); 
    }; 
var execScript = function (script) {
        //locally created function
        var newfunction = new Function(script);
        newfunction();
    };
function RefJSVersioning(objUrl){ 
    var req = new XMLHttpRequest(); 
    req.open('HEAD', objUrl, false); 
    req.send(null); 
    var headers = (Date.parse(req.getResponseHeader
                  ('Last-Modified'))/10000).toString().split('.')[0]; 
    var source = objUrl + '?' + headers; 
    var fn = GetFile(objUrl); 
    if (storage) { 
      if(storage.length > 0){ 
         if (!cached(fn + 'source',source)){ 
            req = new XMLHttpRequest(); 
            req.open('GET', objUrl, false); 
            req.send(null); 
            storage.removeItem(fn + 'source'); 
            storage.removeItem(fn + 'content'); 
            storage.setItem(fn + 'source', source); 
            storage.setItem(fn + 'content', req.responseText); 
            execScript(req.responseText); 
         }else{ 
            execScript(storage.getItem(fn + 'content')); 
         } 
      }else{ 
         req = new XMLHttpRequest(); 
         req.open('GET', objUrl, false); 
         req.send(null); 
         storage.setItem(fn + 'source', source); 
         storage.setItem(fn + 'content', req.responseText); 
         execScript(req.responseText); 
      } 
    } 
};  

</script>

如何使用：

<script type="text/javascript"> 
    RefJSVersioning("/Scripts/myScript.js");
</script>

存储在本地存储上的脚本的屏幕截图：

此方法也适用于在i帧内显示的页面。

参考

• 检测本地存储：How I detect and use localStorage: a simple JavaScript pattern · Mathias Bynens

https://www.codeproject.com/Tips/802462/How-to-Add-JS-Version-before-Referencing-JS-File-t