内容简介：在html中，require的但在实践过程中，我们可能会有很多需要配置的，比如jquery...然后我们大约会把这些配置写到配置文件，如下：
在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]);
}
}());
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 缓存的一些问题和一些加密算法【缓存问题】
- 干货！教你深入理解缓存问题，使用缓存无压力！
- 一次缓存性能问题排查
- 理解缓存系统的三个问题
- GraphQL 教程（六）—— N+1问题和缓存等问题
- 缓存三大问题及解决方案
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
