html中require.config 缓存问题
在html中，require的官方基本用法如下：
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
但在实践过程中，我们可能会有很多需要配置的，比如jquery...
然后我们大约会把这些配置写到配置文件，如下：
// require.config.js
require.config({
paths: {
jquery : "/js/library/jquery.min",
},
shim : {
}
});
然后，再在 main.js 中引用
//mian.js
require(["/js/require.config.js"],function(){
"use strict";
require(["jquery"], function ($) {
//功能代码
});
})
因为网页缓存问题，这种方式存在当 require.config.js 有修改时，客户端的 require.config.js 并不会更新的问题。同时如果有多个html都用了require，那每个模块的 main.js 都需要在头部加上述代码。
既然在require中引用 config，会有缓存问题，那我就把 require.config.js 放到 html ，并且增加版本控制。但需要注意的是， rquire.config.js 必须放到 require.js 后面，因为他用到了require类。
如下
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js"></script>
<script src="scripts/require.config.js?v=xxx"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
这种形式会存在一个新的问题：当 require.config.js 修改后，由于 require.js 已经在浏览器缓存，所以很快（快到 require.config.js 还未加载完成）就会加载 main.js ，此时 man.js 没有享受到 require.config.js 中的配置。
这里我想到了 require.js 的模式（先加载 require.js , 再加载 main.js ）与现在的需求（先加载 require.config.js ，再加载 main.js ）大概相同。所以看了 require.js 中的实现，把相关部分的代码复制到 require.config.js 。
最终，我使用的代码样例如下：
需要注意的是：html 中，需要移动 data-main 的位置：
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title> scripts/main.js after require.js loads. -->
<script src="scripts/require.js"></script>
<!-- data-main 移动到这里 -->
<script src="scripts/require.config.js?v=xxx" data-main="scripts/main" ></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
// require.config.js
;(function () { let rev = 'xxxx'; let cfg = {
// 不设置超时 = 0
waitSeconds: 60, paths: {
'jquery': '../../../../Common/Common/jquery-3.3.1/dist/jquery.min', },
shim: {
'jquery': {exports: 'jQuery'}, },
urlArgs: function (id, url) {
if (url.indexOf('http') === 0) {
return '';
}
let args = `rev=${rev}`;
// /Common/Common 下的文件不用版本控制, 都是 3 方库
if (url.indexOf('/Common/Common/') >= 0) {
args = 'v=2'
}
return (url.indexOf('?') === -1 ? '?' : '&') + args;
}
}; let dataMain = '';
let scripts = document.getElementsByTagName('script');
for (let i = scripts.length - 1; i > -1; i -= 1) {
let script = scripts[i];
let src = script.getAttribute('src');
if (src.indexOf('require.common.config.js') > 0) {
dataMain = script.getAttribute('data-main');
if (dataMain) {
//Preserve dataMain in case it is a path (i.e. contains '?')
let mainScript = dataMain; //Set final baseUrl if there is not already an explicit one,
//but only do so if the data-main value is not a loader plugin
//module ID.
if (!cfg.baseUrl && mainScript.indexOf('!') === -1) {
//Pull off the directory of data-main for use as the
//baseUrl.
src = mainScript.split('/');
mainScript = src.pop();
let subPath = src.length ? src.join('/') + '/' : './'; cfg.baseUrl = subPath;
}
}
break;
}
} require.config(cfg); if (dataMain) {
require([dataMain]);
} }());
html中require.config 缓存问题的更多相关文章
- avalon 中require.config源码分析
/********************************************************************* * 配置系统 在系统运行的开始就需要读取系统中requir ...
- nodejs中 require 方法的加载规则
require参数类型 http.fs.path等,原生模块 ./mod或../mod,相对路径的文件模块 /pathtomodule/mod,绝对路径的文件模块 mod,非原生模块的文件模块 在进 ...
- [原创]mybatis中整合ehcache缓存框架的使用
mybatis整合ehcache缓存框架的使用 mybaits的二级缓存是mapper范围级别,除了在SqlMapConfig.xml设置二级缓存的总开关,还要在具体的mapper.xml中开启二级缓 ...
- 在.net中读写config文件的各种方法
阅读目录 开始 config文件 - 自定义配置节点 config文件 - Property config文件 - Element config文件 - CDATA config文件 - Collec ...
- mybatis中的查询缓存
一: 查询缓存 Mybatis提供查询缓存,用于减轻数据压力,提高数据库压力. Mybatis提供一级缓存和二级缓存. 在操作数据库时需要构造SqlSession对象,在对象中有一个数据结构(Hash ...
- 在Spring、Hibernate中使用Ehcache缓存(2)
这里将介绍在Hibernate中使用查询缓存.一级缓存.二级缓存,整合Spring在HibernateTemplate中使用查询缓存.,这里是hibernate3,使用hibernate4类似,不过不 ...
- C#开发微信门户及应用(48) - 在微信框架中整合CacheManager 缓存框架
在我们的很多框架或者项目应用中,缓存在一定程度上可以提高程序的响应速度,以及减轻服务器的承载压力,因此在一些地方我们都考虑引入缓存模块,这篇随笔介绍使用开源缓存框架CacheManager来实现数据的 ...
- requireJs require.config公共配置
//场景:让require.config配置文件成一个公共文件,每个页面引用这个公共配置 //方式一样例: require.config({ baseUrl: (function () { var p ...
- spring(三、spring中的eheche缓存、redis使用)
spring(三.spring中的eheche缓存.redis使用) 本文主要介绍为什么要构建ehcache+redis两级缓存?以及在实战中如何实现?思考如何配置缓存策略更合适?这样的方案可能遗留什 ...
随机推荐
- Element里el-badge在el-tab里视图不被渲染问题
我们发现:el-badge绑定的变量是有数据的,但是界面上就是不渲染. 这个时候执行getTodo发现数据已经打印出来,当是视图未发送变化.于是查阅资料:vm.$forceUpdate()示例:迫使 ...
- C# 基础知识系列- 13 常见类库介绍（二）日期时间类
0. 前言 上一篇内容介绍了Console类和Math类,这篇内容着重介绍一下C#中时间日期的处理方式. 上一篇勘误: 上一篇中关于静态类没有构造函数,这一表述有误.正确的说法是C#中静态类不包含常规 ...
- 引导 ARM Linux
引导 ARM Linux 本文翻译自:https://www.kernel.org/doc/html/latest/arm/booting.html 引导 ARM Linux 需要一个引导加载程序,它 ...
- metaspliot(一)
来自山丘安全实验室 陈毅 https://www.cnblogs.com/sec875/articles/12243725.html linux下载与更新 apt-get update apt-get ...
- thinkphp5--关于多条件查询的分页处理问题
首先,我们要想搞明白,我们的分页参数起作用的原理: 正在使用的时候的语法: if(!empty($seach)){ $where['user_name|mobile'] = ['like','%'.$ ...
- StringRedisTemplate的常用操作
stringRedisTemplate.opsForValue().set("test", "100",60*10,TimeUnit.SECONDS);//向r ...
- Linux下解压rar压缩包
wget http://www.rarlab.com/rar/rarlinux-x64-4.2.0.tar.gz rar软件不需要安装,直接解压到/usr/local下,以下操作需要有root权限. ...
- SAP采购订单入库后不允许修改单价增强
需求:在根据采购订单做了入库凭证之后,如果用户反审批采购订单去修改单价,系统提示‘已收货,不允许修改单价’. 判断流程:是否有入库凭证 如果采购订单条件按采购信息记录定价,这个价格本来就不能修改,只能 ...
- SpringBoot应用操作Rabbitmq
记录RabbitMQ的简单应用 1.springboot项目中引入maven包,也是springboot官方的插件 <dependency> <groupId>org.spri ...
- 即将进行论文答辩的我发现MyEclipse 2016 激活过期害得我又一次把 MyEclipse 2016 给重新激活注册，详细的图文解说激活过程
背景: 在家美滋滋的上着网课享受着因为疫情带来的平静,没想到随着微信.钉钉铃声响起打破了我半年以来的平静的生活:通知我们过完劳动节要进行答辩,由于我的答辩项目是由 MyEclipse 这个工具编写的我 ...