js配置文件不缓存

如果一个项目变更频繁，那么浏览器缓存是一个很大的问题，因为它会缓存静态文件，除了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 它更加稳定

posted @ 2017-09-03 14:56 小数点就是问题阅读(563) 评论(0) 收藏举报

刷新页面返回顶部

小数点就是问题

js配置文件不缓存

公告