js css等靜態文件版本控制,一處配置多處更新.net版【原創】

平常web開發中，咱們修改了js、css等靜態資源文件後，若是文件名不變的話，客戶端瀏覽並不會及時獲取最新的資源文件，這就很尷尬了

怎麼辦呢？

1.小白：讓客戶清除緩存？，No ，  不靠譜

2.初級：把文件名改了？，能夠，但咱們產品樣式一天更新8百次，怎麼辦？不方便

<link href="/css/old.css" rel="stylesheet" type="text/css" />
<link href="/css/new.css" rel="stylesheet" type="text/css" />
...
<link href="/css/new800.css" rel="stylesheet" type="text/css" />

3.中級：加版本號？，能夠，但這個文件，咱們有好幾個地方用，版本號都加的亂咯？ 不方便

<link href="/css/active.css?v=20181120" rel="stylesheet" type="text/css" />

4.中高級：本身搞個，一處配置多處更新，.net版   舒服
    利用json的鍵值特性, 此處僅用js,css舉例，其餘圖片等靜態資源，均可以使用

  1、 新建json文件 CssJsVersion.json

{
  //請添加須要刷新的js或css文件
  //說明："鍵值": "指向文件"
  //"css/common.css": "css/common_20170223.css"
  "pc/css/common.css": "pc/css/common.css?v=20170829001",
  "pc/css/active.css": "pc/css/active.css?v=20180620001",
  "pc/js/GasgooJS.common.base.js": "pc/js/GasgooJS.common.base.js?v=20170816001",
  "pc/js/event.js": "pc/js/event.js?v=20180508001",
  "pc/js/events.js": "pc/js/events.js?v=20180111007",
  "pc/js/masterpage.js": "pc/js/masterpage.js?v=20170918001",
  "pc/js/home.js": "pc/js/home.js?v=20171013001",
  "pc/js/af.js": "pc/js/af.js?v=20180810",
  "wap/css/common.css": "wap/css/common.css?v=20171222001",
  "wap/css/active.css": "wap/css/active.css?v=20171228001",
  "wap/css/css.css": "wap/css/css.css?v=20180813001",
  "wap/js/events.js": "wap/js/events.js?v=20180517002",
  "wap/js/event.js": "wap/js/event.js?v=20171222005",
  "wap/js/applyform.js": "wap/js/applyform.js?v=20171228001",
  "wap/js/masterpage.js": "wap/js/masterpage.js?v=20170918001",
  "ticket/css/ticket.css": "ticket/css/ticket.css?v=20180608",
    "pay/css/css.css": "pay/css/css.css?v=20180831"
}

View Code

  2、 新建類ContentConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json.Linq;
using System.IO;
using Newtonsoft.Json;

/// <summary>
/// ContentConfig 的摘要說明
/// </summary>
public class ContentConfig
{
    private static bool noCache = true;
    private static JObject BuildItems()
    {
        var json = File.ReadAllText(HttpContext.Current.Server.MapPath("~/Content/Json/CssJsVersion.json"));
        return JObject.Parse(json);
    }

    public static JObject Items
    {
        get
        {
            if (noCache || _Items == null)
            {
                _Items = BuildItems();
            }
            return _Items;
        }
    }
    private static JObject _Items;


    public static T GetValue<T>(string key)
    {

        try
        {
            return Items[key].Value<T>();
        }
        catch (Exception)
        {

            return Items["erro"].Value<T>();
        }

    }

    public static String[] GetStringList(string key)
    {
        return Items[key].Select(x => x.Value<String>()).ToArray();
    }

    public static String GetString(string key)
    {
        return GetValue<String>(key);
    }

    public static int GetInt(string key)
    {
        return GetValue<int>(key);
    }
    public static string GetJsCssVersionUrl(string OldfileName)
    {
        string url = Config.RESOURCE_PATH + "/";
        try
        {
            url += GetString(OldfileName);
        }
        catch (Exception)//未找到 OldfileName
        {
            url += OldfileName;
        }
        return url;
    }

    /// <summary>
    /// 把Json文本轉爲實體
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="input"></param>
    /// <returns></returns>
    public static T FromJSON<T>(string input)
    {
        try
        {
            return JsonConvert.DeserializeObject<T>(input);
        }
        catch (Exception ex)
        {
            return default(T);
        }
    }
}

View Code

  3、調用

js：

<script src="<%= ContentConfig.GetJsCssVersionUrl("pc/js/home.js") %>"></script>

css:

 <link href="<%= ContentConfig.GetJsCssVersionUrl("pc/css/common.css") %>" rel="stylesheet" type="text/css" />

 

5.高級開發：任何打包工具均可以作到，如webpack,grunt,gulp  正在學習...

 

後語：

  1. 第四個方法是筆者實際中使用的，有什麼問題，也能夠交流交流(*￣︶￣)

  2.方法那樣使用，但不限於那樣使用，隨意發揮

  3.