综述
在开发中有时我们总会遇到缓存问题，造成新修改的样式或是脚本特效不生效。所以这就要去我们对样式和脚本进行动态加载。这个博客的诞生也是由于在进行H5APP开发的时候多次遇到这样的问题，故而专门写了这样一个文件进行动态加载解决app重启时候由于缓存造成的样式、脚本不生效问题。
代码实现
/**
* 动态加载解决app重启时候缓存问题
* ===============================================
* Created by ZHIHUA·WEI.
* Author: ZHIHUA·WEI<[email protected]>
* Date: 2018/10/24
* Time: 00:00
* Project: ZHIHUA·WEI
* Version: 1.0.0
* Power: 动态加载样式、脚本
* ===============================================
*/
/**
* 定义基本的样式、脚本配置
*/
var app_config = {
version: Math.random(),
cssAr: [
'css/index.css',
],
jsAr: [
'js/app_config.js',
'js/mui.min.js',
'js/common.js',
'js/app_function.js',
]
}
/**
* 定义属性进行数组去重
*/
Array.prototype._distinct = function() {
var arr = this,
result = [],
_result = [],
len = arr.length;
arr.forEach(function(v, i, arr) {
var _v = v.split('/')[v.split('/').length - 1];
if(_result.indexOf(_v) === -1) {
result.push(v);
_result.push(_v);
} else {
//替换默认引入文件
result[_result.indexOf(_v)] = v;
_result[_result.indexOf(_v)] = _v;
}
});
return result;
};
/**
* 样式加载
* @param {Object} cssAr
* @param {Object} type
*/
function link_css(cssAr, type) {
var cssAr = type ? cssAr._distinct() : app_config.cssAr.concat(cssAr || [])._distinct();
for(var i = 0; i < cssAr.length; i++) {
document.write('<link rel="stylesheet" href="' + cssAr[i] + '?version=' + app_config.version + '"/>');
}
}
/**
* 脚本加载
* @param {Object} jsAr
* @param {Object} type
*/
function load_script(jsAr, type) {
var jsAr = type ? jsAr._distinct() : app_config.jsAr.concat(jsAr || [])._distinct();
for(var i = 0; i < jsAr.length; i++) {
document.write('<script src="' + jsAr[i] + '?version=' + app_config.version + ' type="text/javascript" charset="utf-8"><\/script>');
}
}用法
在相应的页面中引入此js文件，基本的样式、脚本会默认加载。具体实现方式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>INDEX</title>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + "px";
document.write('<script src="./js/fix.js?rd=' + Math.random() + '"><\/script>');
</script>
<script type="text/javascript">
link_css();
</script>
</head>
<body>
<div class="nav-box">
<ul class="fix">
<li class="cur">
<a id="defaultTab" href="home.html">
<i>
<img src="img/index-1.png">
<img src="img/index-2.png">
</i>
<span>首页</span>
</a>
</li>
<li id="callMeBtn">
<i>
<img src="img/phone-1.png">
<img src="img/phone-2.png">
</i>
<span>CALL ME</span>
</li>
<li class="menubtn" id="menuBtn">
<i>
<img src="img/menu-1.png">
<img src="img/menu-2.png">
</i>
<span>菜单</span>
</li>
</ul>
</div>
<script type="text/javascript">
load_script(['js/index.js']);
</script>
</body>
</html>