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两级缓存?以及在实战中如何实现?思考如何配置缓存策略更合适?这样的方案可能遗留什 ...
随机推荐
- [转+自]关于PHP7的新特性(涉及取反和disabled_functions绕过)
PHP7和PHP5上的安全区别 preg_replace()不再支持/e修饰符 利用\e修饰符执行代码的后门大家也用了不少了,具体看官方的这段描述: 如果设置了这个被弃用的修饰符, preg_repl ...
- HTML+CSS教程（一）简介及其基本标签的使用方法
一.前端 HTML(结构):HyPer TEXT Markup LanguageCSS(样式): 样式就是对于结构的一种美化JavaScript(js: 行为/ 提供了用户和界面的交互方式)jQuer ...
- Des对称可逆加密
/// <summary> /// DES AES Blowfish /// 对称加密算法的优点是速度快, /// 缺点是密钥管理不方便,要求共享密钥. /// 可逆对称加密 密钥长 ...
- 用 Python 获取百度搜索结果链接
前言 近期有许多项目需要这个功能,由于Python实现起来比较简单就这么做了,代码贴下来觉得好点个赞吧~ 代码 # coding: utf-8 import os import time import ...
- 大数据hbase分布式安装及其部署。
大数据hbase分布式安装及其部署. 首先要启动Hadoop以及zookeeper,可以参考前面发布的文章. 将hbase的包上传至master节点 这里我使用的是1.3.6的版本,具体的根据自己的版 ...
- 作业3-k均值算法
4. 作业: 1). 扑克牌手动演练k均值聚类过程:>30张牌,3类 2). *自主编写K-means算法 ,以鸢尾花花瓣长度数据做聚类,并用散点图显示.(加分题) 3). 用sklearn.c ...
- automake autoconf 使用详解
本文地址: http://www.laruence.com/2009/11/18/1154.html 文章转自: http://www.linuxcomputer.cn/ 作为Linux下的程序开发人 ...
- Redis持久化存储（三）
redis高级特性-发布订阅消息服务功能 Pub/Sub 订阅,取消订阅和发布实现了发布/订阅消息范式(引自wikipedia),发送者(发布者)不是计划发送消息给特定的接收者(订阅者).而是发布的消 ...
- RabbitMQ Hello world(二)
简介: Rabbitmq 是消息代理中间件,它接收或者发送消息.你可以把它想想宬一个邮局:当你把邮件放到邮箱时,你可以确定某一位邮递员可以准确的把邮件送到收件人手中,在这个比喻中,rabbitmq是一 ...
- opencv-10-图像滤波-噪声添加与均值滤波-含opencv C++ 代码实现
开始之前 再说上一篇文章中, 我们想按照噪声产生, 然后将降噪的, 但是限于篇幅, 我就放在这一篇里面了, 说起图像的噪声问题就又回到了我们上一章的内容, 把噪声当作信号处理, 实际上数字图像处理实际 ...