[本文已参与「新人创作礼」活动,一起开启掘金创作之路。]
首先要引入include-lib.js
//第三方类库加载管理js,方便切换lib
(function () {
var r = new RegExp("(^|(.*?\\/))(include-lib\.js)(\\?|$)"),
s = document.getElementsByTagName('script'), targetScript;
for (var i = 0; i < s.length; i++) {
var src = s[i].getAttribute('src');
if (src) {
var m = src.match(r);
if (m) {
targetScript = s[i];
break;
}
}
}
//当前版本号,用于清理浏览器缓存
var cacheVersion = "20190619";
// cssExpr 用于判断资源是否是css
var cssExpr = new RegExp('\\.css');
function inputLibs(list) {
if (list == null || list.length == 0) return;
for (var i = 0, len = list.length; i < len; i++) {
var url = list[i];
if (cssExpr.test(url)) {
var css = '<link rel="stylesheet" href="' + url + '?time=' + cacheVersion + '">';
document.writeln(css);
} else {
var script = '<script type="text/javascript" src="' + url + '?time=' + cacheVersion + '"><' + '/script>';
document.writeln(script);
}
}
}
//加载类库资源文件
function load() {
var arrInclude = (targetScript.getAttribute('include') || "").split(",");
var libpath = (targetScript.getAttribute('libpath') || "");
if (libpath.lastIndexOf('/') != libpath.length - 1)
libpath += "/";
var libsConfig = {
'home': [//此处是你需要用到的js和css想用的时候
//直接传home就ok了
libpath + "js/jquery-1.9.1.min.js",
libpath + "js/home.js",
libpath + "css/base.css"
],
'layer': [
libpath + "layer/theme/default/layer.css",
libpath + "layer/theme/retina/retina.css",
libpath + "layer/theme/mars/layer.css",
libpath + "layer/layer.js"
]
};
for (var i in arrInclude) {
var key = arrInclude[i];
inputLibs(libsConfig[key]);
}
}
load();
})();
在html中引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="lib/js/include-lib.js?time=20190619" libpath="lib/" include="home,layer"></script>
</head>
<body>
<div>
hello word
</div>
</body>
</html>