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举例,其他图片等静态资源,都可以使用
一、 新建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"
- }
二、 新建类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);
- }
- }
- }
三、调用
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.
js css等静态文件版本控制,一处配置多处更新.net版【原创】的更多相关文章
- Django基于Pycharm开发之四[关于静态文件的使用,配置以及源码分析](原创)
对于django静态文件的使用,如果开发过netcore程序的开发人员,可能会比较容易理解django关于静态文件访问的设计原理,个人觉得,这是一个middlerware的设计,但是在django中我 ...
- 网站加载css/js/img等静态文件失败
网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...
- Nginx设置Js、Css等静态文件的缓存过期时间
location ~.*\.(js|css|html|png|jpg)$ { expires 3d; } expires 3d; //表示缓存3天 expires 3h; //表示缓存3小 ...
- django模板中导入js、css等静态文件
打开settings.py,在底部添加: import os STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(os.path.dir ...
- springMVC下jsp引用外部js,css等静态资源的解决方法
直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...
- [django]Django的css、image和js静态文件生产环境配置
前言:在Django中HTML文件如果采用外联的方式引入css,js文件或者image图片,一般采用<link rel="stylesheet" href="../ ...
- tomcat 无法加载js和css 等静态文件的问题
前段时间做了个网站,在本地tomcat测试都没有问题,但是部署到阿里云上之后,系统样式全没了.jsp等动态页面访问正常. 打开浏览器监控发现所有的css 和js 文件返回都是404 .直接访问单个的c ...
- Django 学习笔记(三) --- HTML 模版加载 css、js、img 静态文件
人生苦短 ~ Tips:仅适用于 Python 3+(反正差别不大,py2 改改也能用).因为据 Python 之父 Guido van Rossum 说会在 2020 年停止对 Python 2 的 ...
- Django使用js,css等静态文件的时候,出现mime类型问题
使用adminLTE模板, return render(request, 'AdminLTE/index.html') 的时候报如下错误且页面渲染异常,css没有效果: Resource interp ...
随机推荐
- DNSlog实现Mysql注入
step1: 通过DNSlog盲注需要用到load_file()函数.show variables like '%secure%' 查看load_file()可以读取的磁盘. 1.当secure_fi ...
- Ionic学习
1. 原来Http不能直接加在普通类里,下面的报错 import { Component } from '@angular/core'; import { NavController } from ' ...
- 好像leeceode题目我的博客太长了,需要重新建立一个. leecode刷题第二个
376. Wiggle Subsequence 自己没想出来,看了别人的分析. 主要是要分析出升序降序只跟临近的2个决定.虽然直觉上不是这样. 455. 分发饼干 ...
- rowspan和colspan的区别粗解
rowspan和colspan是我们初学HTML表格中会在做一些特殊表格中遇到.其常在td中添加. rowspan的作用是指定纵向所跨越单元格的行数. 如下效果. colspan的作用是指定单元格横向 ...
- delphi 中如何处理“幽灵”、“熔断”?(转载)
原始连接:http://dannywind.nl/delphi/meltdown-spectre-and-delphi/ Meltdown, Spectre and Delphi Don’t pani ...
- 2018.10.31 NOIP模拟 一些情报(倍增)
传送门 题目并不难(想) 其实就是用倍增维护几个树上信息. 也就这么几个: 子树内最长链及其后继点. 子树内次长链及其后继点. 子树内第三场链(也就是dzyodzyodzyo口中鬼畜的次次长链) 点i ...
- Tomcat架构解析(一)-----Tomcat总体架构
Tomcat是非常常用的应用服务器,了解Tomcat的总体架构以及实现细节,对于理解整个java web也是有非常大的帮助. 一.Server 1.最简单的服务器结构 最简单的服务器结构如图所示: ...
- boost--线程同步
1.互斥锁(互斥量) mutex是独占式的互斥锁.timed_mutex增加了超时功能. 成员函数:lock()用于锁定,try_lock()为非阻塞版本的锁定,unlock()用于解锁.timed_ ...
- p1 批梯度下降算法
(蓝色字体:批注:绿色背景:需要注意的地方:橙色背景是问题) 一,机器学习分类 二,梯度下降算法:2.1模型 2.2代价函数 2.3 梯度下降算法 一,机器学习分类 无监督学习和监督学习 无监 ...
- 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 ...