JS_js动态加载js文件和css 文件同步/异步两种方式

落日映苍穹つ 2022-11-21 14:59 252阅读 0赞

### 方法一 ###

/*动态添加js或css,URL:文件路径，FileType：文件类型(js/css)*/
    function AddJsFiles(URL,FileType){ 
        var oHead = document.body;
        var addheadfile;
        if(FileType=="js"){ 
            addheadfile= document.createElement("script");
            addheadfile.type = "text/javascript";
            addheadfile.src=URL;
        }else{ 
            addheadfile= document.createElement("link");
            addheadfile.type = "text/css";
            addheadfile.rel="stylesheet";
            addheadfile.rev = "stylesheet";
            addheadfile.media = "screen";
            addheadfile.href=URL;
        }
        oHead.appendChild( addheadfile);
    }

使用

AddJsFiles("css/index.css","css");
    AddJsFiles("js/index.js","js");

### 方法二 ###

经测试发现以上方法进行文件加载时，文件是异步加载的，这样就可能导致加载文件后立即使用文件中的方法或变量会产生错误的情况，  
所以以下采用同步加载的方法，当文件加载完成后再去执行相应的代码或方法

/*5.加载文件*/
    /* 已加载文件缓存列表,用于判断文件是否已加载过，若已加载则不再次加载*/
    var classcodes =[];
    window.Import={ 
        /*加载一批文件，_files:文件路径数组,可包括js,css,less文件,succes:加载成功回调函数*/
        LoadFileList:function(_files,succes){ 
            var FileArray=[];
            if(typeof _files==="object"){ 
                FileArray=_files;
            }else{ 
                /*如果文件列表是字符串，则用,切分成数组*/
                if(typeof _files==="string"){ 
                    FileArray=_files.split(",");
                }
            }
            if(FileArray!=null && FileArray.length>0){ 
                var LoadedCount=0;
                for(var i=0;i< FileArray.length;i++){ 
                    loadFile(FileArray[i],function(){ 
                        LoadedCount++;
                        if(LoadedCount==FileArray.length){ 
                            succes();
                        }
                    })
                }
            }
            /*加载JS文件,url:文件路径,success:加载成功回调函数*/
            function loadFile(url, success) { 
                if (!FileIsExt(classcodes,url)) { 
                    var ThisType=GetFileType(url);
                    var fileObj=null;
                    if(ThisType==".js"){ 
                        fileObj=document.createElement('script');
                        fileObj.src = url;
                    }else if(ThisType==".css"){ 
                        fileObj=document.createElement('link');
                        fileObj.href = url;
                        fileObj.type = "text/css";
                        fileObj.rel="stylesheet";
                    }else if(ThisType==".less"){ 
                        fileObj=document.createElement('link');
                        fileObj.href = url;
                        fileObj.type = "text/css";
                        fileObj.rel="stylesheet/less";
                    }
                    success = success || function(){ };
                    fileObj.onload = fileObj.onreadystatechange = function() { 
                        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) { 
                            success();
                            classcodes.push(url)
                        }
                    }
                    document.getElementsByTagName('head')[0].appendChild(fileObj);
                }else{ 
                    success();
                }
            }
            /*获取文件类型,后缀名，小写*/
            function GetFileType(url){ 
                if(url!=null && url.length>0){ 
                    return url.substr(url.lastIndexOf(".")).toLowerCase();
                }
                return "";
            }
            /*文件是否已加载*/
            function FileIsExt(FileArray,_url){ 
                if(FileArray!=null && FileArray.length>0){ 
                    var len =FileArray.length;
                    for (var i = 0; i < len; i++) { 
                        if (FileArray[i] ==_url) { 
                           return true;
                        }
                    }
                }
                return false;
            }
        }
    }
    
    var FilesArray=["js/index.js","js/ClassInherit1.js","js/highcharts_2.21.js","css/index.css"];
    Import.LoadFileList(FilesArray,function(){ 
       /*这里写加载完成后需要执行的代码或方法*/
    });