如果一个项目变更频繁，那么浏览器缓存是一个很大的问题，因为它会缓存静态文件，除了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,
width: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 它更加稳定
时间： 2024-08-11 07:38:42