日常web开发中,我们修改了js、css等静态资源文件后,如果文件名不变的话,客户端浏览并不会及时获取最新的资源文件,这就很尴尬了

怎么办呢?

1.小白:让客户清除缓存?,No ,  不靠谱

2.初级:把文件名改了?,可以,但我们产品样式一天更新8百次,怎么办?不方便

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

3.中级:加版本号?,可以,但这个文件,我们有好几个地方用,版本号都加的乱咯? 不方便

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

4.中高级:自己搞个,一处配置多处更新,.net版   舒服
    利用json的键值特性, 此处仅用js,css举例,其他图片等静态资源,都可以使用

一、 新建json文件 CssJsVersion.json

  1. {
  2. //请添加需要刷新的js或css文件
  3. //说明:"键值": "指向文件"
  4. //"css/common.css": "css/common_20170223.css"
  5. "pc/css/common.css": "pc/css/common.css?v=20170829001",
  6. "pc/css/active.css": "pc/css/active.css?v=20180620001",
  7. "pc/js/GasgooJS.common.base.js": "pc/js/GasgooJS.common.base.js?v=20170816001",
  8. "pc/js/event.js": "pc/js/event.js?v=20180508001",
  9. "pc/js/events.js": "pc/js/events.js?v=20180111007",
  10. "pc/js/masterpage.js": "pc/js/masterpage.js?v=20170918001",
  11. "pc/js/home.js": "pc/js/home.js?v=20171013001",
  12. "pc/js/af.js": "pc/js/af.js?v=20180810",
  13. "wap/css/common.css": "wap/css/common.css?v=20171222001",
  14. "wap/css/active.css": "wap/css/active.css?v=20171228001",
  15. "wap/css/css.css": "wap/css/css.css?v=20180813001",
  16. "wap/js/events.js": "wap/js/events.js?v=20180517002",
  17. "wap/js/event.js": "wap/js/event.js?v=20171222005",
  18. "wap/js/applyform.js": "wap/js/applyform.js?v=20171228001",
  19. "wap/js/masterpage.js": "wap/js/masterpage.js?v=20170918001",
  20. "ticket/css/ticket.css": "ticket/css/ticket.css?v=20180608",
  21. "pay/css/css.css": "pay/css/css.css?v=20180831"
  22. }

二、 新建类ContentConfig.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using Newtonsoft.Json.Linq;
  6. using System.IO;
  7. using Newtonsoft.Json;
  8.  
  9. /// <summary>
  10. /// ContentConfig 的摘要说明
  11. /// </summary>
  12. public class ContentConfig
  13. {
  14. private static bool noCache = true;
  15. private static JObject BuildItems()
  16. {
  17. var json = File.ReadAllText(HttpContext.Current.Server.MapPath("~/Content/Json/CssJsVersion.json"));
  18. return JObject.Parse(json);
  19. }
  20.  
  21. public static JObject Items
  22. {
  23. get
  24. {
  25. if (noCache || _Items == null)
  26. {
  27. _Items = BuildItems();
  28. }
  29. return _Items;
  30. }
  31. }
  32. private static JObject _Items;
  33.  
  34. public static T GetValue<T>(string key)
  35. {
  36.  
  37. try
  38. {
  39. return Items[key].Value<T>();
  40. }
  41. catch (Exception)
  42. {
  43.  
  44. return Items["erro"].Value<T>();
  45. }
  46.  
  47. }
  48.  
  49. public static String[] GetStringList(string key)
  50. {
  51. return Items[key].Select(x => x.Value<String>()).ToArray();
  52. }
  53.  
  54. public static String GetString(string key)
  55. {
  56. return GetValue<String>(key);
  57. }
  58.  
  59. public static int GetInt(string key)
  60. {
  61. return GetValue<int>(key);
  62. }
  63. public static string GetJsCssVersionUrl(string OldfileName)
  64. {
  65. string url = Config.RESOURCE_PATH + "/";
  66. try
  67. {
  68. url += GetString(OldfileName);
  69. }
  70. catch (Exception)//未找到 OldfileName
  71. {
  72. url += OldfileName;
  73. }
  74. return url;
  75. }
  76.  
  77. /// <summary>
  78. /// 把Json文本转为实体
  79. /// </summary>
  80. /// <typeparam name="T"></typeparam>
  81. /// <param name="input"></param>
  82. /// <returns></returns>
  83. public static T FromJSON<T>(string input)
  84. {
  85. try
  86. {
  87. return JsonConvert.DeserializeObject<T>(input);
  88. }
  89. catch (Exception ex)
  90. {
  91. return default(T);
  92. }
  93. }
  94. }

三、调用

js:

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

css:

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

5.高级开发:任何打包工具都可以做到,如webpack,grunt,gulp  正在学习...

后语:

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

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

3.

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

  1. Django基于Pycharm开发之四[关于静态文件的使用,配置以及源码分析](原创)

    对于django静态文件的使用,如果开发过netcore程序的开发人员,可能会比较容易理解django关于静态文件访问的设计原理,个人觉得,这是一个middlerware的设计,但是在django中我 ...

  2. 网站加载css/js/img等静态文件失败

    网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...

  3. Nginx设置Js、Css等静态文件的缓存过期时间

    location ~.*\.(js|css|html|png|jpg)$ { expires 3d; } expires    3d; //表示缓存3天 expires    3h; //表示缓存3小 ...

  4. django模板中导入js、css等静态文件

    打开settings.py,在底部添加: import os STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(os.path.dir ...

  5. springMVC下jsp引用外部js,css等静态资源的解决方法

    直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...

  6. [django]Django的css、image和js静态文件生产环境配置

    前言:在Django中HTML文件如果采用外联的方式引入css,js文件或者image图片,一般采用<link rel="stylesheet" href="../ ...

  7. tomcat 无法加载js和css 等静态文件的问题

    前段时间做了个网站,在本地tomcat测试都没有问题,但是部署到阿里云上之后,系统样式全没了.jsp等动态页面访问正常. 打开浏览器监控发现所有的css 和js 文件返回都是404 .直接访问单个的c ...

  8. Django 学习笔记(三) --- HTML 模版加载 css、js、img 静态文件

    人生苦短 ~ Tips:仅适用于 Python 3+(反正差别不大,py2 改改也能用).因为据 Python 之父 Guido van Rossum 说会在 2020 年停止对 Python 2 的 ...

  9. Django使用js,css等静态文件的时候,出现mime类型问题

    使用adminLTE模板, return render(request, 'AdminLTE/index.html') 的时候报如下错误且页面渲染异常,css没有效果: Resource interp ...

随机推荐

  1. DNSlog实现Mysql注入

    step1: 通过DNSlog盲注需要用到load_file()函数.show variables like '%secure%' 查看load_file()可以读取的磁盘. 1.当secure_fi ...

  2. Ionic学习

    1. 原来Http不能直接加在普通类里,下面的报错 import { Component } from '@angular/core'; import { NavController } from ' ...

  3. 好像leeceode题目我的博客太长了,需要重新建立一个. leecode刷题第二个

    376. Wiggle Subsequence               自己没想出来,看了别人的分析. 主要是要分析出升序降序只跟临近的2个决定.虽然直觉上不是这样. 455. 分发饼干     ...

  4. rowspan和colspan的区别粗解

    rowspan和colspan是我们初学HTML表格中会在做一些特殊表格中遇到.其常在td中添加. rowspan的作用是指定纵向所跨越单元格的行数. 如下效果. colspan的作用是指定单元格横向 ...

  5. delphi 中如何处理“幽灵”、“熔断”?(转载)

    原始连接:http://dannywind.nl/delphi/meltdown-spectre-and-delphi/ Meltdown, Spectre and Delphi Don’t pani ...

  6. 2018.10.31 NOIP模拟 一些情报(倍增)

    传送门 题目并不难(想) 其实就是用倍增维护几个树上信息. 也就这么几个: 子树内最长链及其后继点. 子树内次长链及其后继点. 子树内第三场链(也就是dzyodzyodzyo口中鬼畜的次次长链) 点i ...

  7. Tomcat架构解析(一)-----Tomcat总体架构

    Tomcat是非常常用的应用服务器,了解Tomcat的总体架构以及实现细节,对于理解整个java web也是有非常大的帮助. 一.Server   1.最简单的服务器结构 最简单的服务器结构如图所示: ...

  8. boost--线程同步

    1.互斥锁(互斥量) mutex是独占式的互斥锁.timed_mutex增加了超时功能. 成员函数:lock()用于锁定,try_lock()为非阻塞版本的锁定,unlock()用于解锁.timed_ ...

  9. p1 批梯度下降算法

    (蓝色字体:批注:绿色背景:需要注意的地方:橙色背景是问题) 一,机器学习分类 二,梯度下降算法:2.1模型   2.2代价函数   2.3 梯度下降算法 一,机器学习分类 无监督学习和监督学习 无监 ...

  10. Codeforces Round#415 Div.2

    A. Straight «A» 题面 Noora is a student of one famous high school. It's her final year in school - she ...