问题描述
在我们进行前端过程中，js文件引入后如果进行了修改那么历史网页就会对原来的js文件进行缓存，为了解决手工清除缓存的工作，计划引入动态加载js文件，并在加载过程中增加版本号的概念；这样就解决了js缓存的问题，如果版本相同则采用缓存否则加载最新的文件，同步也解决了性能的问题；
解决方案
1、编写动态引入js文件工具文件importres.js
/*importres.js*/
//同步引入js和css问题，要求js文件和css文件名称和所在地址必须相同
window.importres=function(as_file,ver="1.0.0.0"){
document.write("<script type=\"text/javascript\" src=" + as_file +".js?ver="+ ver +"></script>");
document.write("<link rel=\"stylesheet\" href=" + as_file +".css?ver="+ ver +" type=\"text/css\" media=\"screen\"/>");
}
//单独引入js文件
window.importjs=function(as_file,ver="1.0.0.0"){
document.write("<script type=\"text/javascript\" src=" + as_file +".js?ver="+ ver +"></script>");
}
//单独引入css文件
window.importcss=function(as_file,ver="1.0.0.0"){
document.write("<link rel=\"stylesheet\" href=" + as_file +".css?ver="+ ver +" type=\"text/css\" media=\"screen\"/>");
}
2、页面使用例子
<html>
<body>
// 同步引入test.js和test.css文件例子，不用带后缀，版本采用随机数Math.random()代替
//自己可以以手工传人参数，如果不传参数默认版本为1.0.0.0
<script type="text/javascript">importres("test",Math.random())</script>
// 单独引入test.js文件例子，不用带后缀
<script type="text/javascript">importjs("test",Math.random())</script>
// 单独引入test.css文件例子，不用带后缀
<script type="text/javascript">importcss("test",Math.random())</script>
</body>
</html>
