如果一个项目变更频繁，那么浏览器缓存是一个很大的问题，因为它会缓存静态文件，除了html，除非你设置强制缓存，
就是那种自定义设置缓存时间的方式。
那么一般最好是设置个公共的配置文件，那么公共静态文件需要变更就可以修改一次就可以了，
目前方式把配置文件设置一个时间戳版本号，那么就可以不缓存配置文件了。
;(function(window,undefined){ var currentScript=document.currentScript; /* 配置项:paths 默认路径，otherPaths 添加路径 version 版本号 */ loadJs.defaultConfig={ paths:{jqery:"jquery.js"}, otherPaths:{}, version:"" }; function init(){ if(typeof loadJs.config == "object"){ for(var attr in loadJs.config){ loadJs.defaultConfig[attr]=loadJs.config[attr]; } } loadJs.config=loadJs.defaultConfig; } function loadJs(){ var args=arguments; var mainPath=currentScript.getAttribute("data-main"); if(mainPath.indexOf(".js")==-1){ mainPath+=".js"; } mainPath+="?v="+Date.now(); var parent=currentScript.parentNode; var oMainsript=document.createElement("script"); oMainsript.src=mainPath; parent.appendChild(oMainsript); oMainsript.onload=function(){ loading.apply(window,args); } } function loading(){ init(); var isAll=false, args=arguments, argsLen=args.length; var callback,pathArr=[]; if(argsLen>1){ pathArr=args[0]; callback=args[1]; }else{ callback=args[0]; isAll=true; } for(var attr in loadJs.config.otherPaths){ loadJs.config.paths[attr]=loadJs.config.otherPaths[attr]; } if(isAll){ for(var src in loadJs.config.paths){ pathArr.push(src); } } loaded(pathArr,callback); } function loaded(pathArr,callback){ var len=pathArr.length,count=0; var head=document.head; var msgArr=[]; var config=loadJs.config; (function itload(i){ if(pathArr.length==i){ callback(msgArr); return ; } var oScript=document.createElement("script"); var path=config.paths[pathArr[i]]+(config.version==""?"":"?v="+config.version); oScript.src=path; head.insertBefore(oScript,document.head.children[document.head.childElementCount-1]); oScript.onload=function(){ msgArr.push(pathArr[i]+":success"); count++; itload(count); } oScript.onerror=function(){ msgArr.push(pathArr[i]+":fail"); count++; itload(count); } })(count); } window.loadJs=loadJs; })(window,undefined);
配置文件 main.js
loadJs.config={ version:"0.2", otherPaths:{touch:"C:\Users\Administrator\Desktop\testWeb\touch\touchjs-master\touchjs-master\touch.min.js"} };
测试 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script data-main="main" src="loadJs.js"></script>
<style>
#container{
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
/**
* 图片拼图
* @param {id} String [需要一个容器，传进一个id值]
* @param {rows} Number [传入行数]
* @param {cols} Number [传入列数]
* @param {url} String [传入图片路径]
*
*/
//可以配置所需加载js ,如:只加载jqery 不配置加载全部js文件
/*loadJs(["jqery"],function(msgArr){
console.log(msgArr);
dynamicImg("container",10,10,"1.jpg");
});*/
loadJs(function(msgArr){
console.log(msgArr);
dynamicImg("container",10,10,"1.jpg");
});
function dynamicImg(id,rows,cols,url){
var defaultParam={
speed:500
};
var oImg=document.createElement("img");
var oContainer=$("#"+id);
oImg.src=url;
oImg.onload=function(){
oContainer.append(oImg);
$(oImg).css("opacity",0);
createLi(rows,cols);
move();
}
/*创造div，图片为背景，使用div把一个图片拼成一个完整的图片
只要不断移动div位置和图片背景的位置，就可以实现
*/
function createLi(rows,cols){
oContainer.append("<div class='smallImg' id='smallImg'>");
var $smallImg=$("#smallImg");
var imgh=$(oImg).height(),imgw=$(oImg).width();
var r=imgh/rows,c=imgw/cols;
for(var i=0;i<rows;i++){
for(var j=0;j<cols;j++){
var imgDiv=$("<div class='imgDiv'>");
$smallImg.append(imgDiv);
imgDiv.get(0).cssT=i*r;
imgDiv.get(0).cssL=j*c;
imgDiv.css({position:"absolute",
top:Math.random()*imgh,left:Math.random()*imgw,
opacity:0,
c,height:r,
"background-image":"url("+url+")",
"background-position":-j*c+"px -"+i*r+"px"
});
}
}
}
/*移动散乱的图片，拼成完整图片*/
function move(){
var $imgDiv=$(".imgDiv");
$imgDiv.each(function(){
$(this).animate({top:this.cssT,left:this.cssL,opacity:1},(Math.random()+10)*defaultParam.speed);
});
}
}
</script>
</body>
</html>
思路来自requireJs
如果有更多的需求可以直接使用reqireJs 它更加稳定