標籤：master 緩衝 absolute ack loaded utf-8 date script return
如果一個項目變更頻繁，那麼瀏覽器緩衝是一個很大的問題，因為它會緩衝靜態檔案，除了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 它更加穩定
js設定檔不緩衝
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
