欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js css等静态文件版本控制,一处配置多处更新.net版【原创】

程序员文章站 2024-01-03 08:06:52
利用json的键值特性, js、css等静态资源文件,改动后上线刷新版本更新问题 ......

日常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举例,其他图片等静态资源,都可以使用

  一、 新建json文件 cssjsversion.json

js css等静态文件版本控制,一处配置多处更新.net版【原创】
{
  //请添加需要刷新的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

  二、 新建类contentconfig.cs

js css等静态文件版本控制,一处配置多处更新.net版【原创】
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

  三、调用

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  牛逼666      正在学习...

 

后语:

  1. 第四个方法是笔者实际中使用的,有什么问题,也可以交流交流(* ̄︶ ̄)

  2.方法那样使用,但不限于那样使用,随意发挥

  3.

 

上一篇:

下一篇: