常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
为了方便资源管理和提升工作效率，常用的js和css文件的加载应该放在一个统一文件里面完成，也方便后续的资源维护。所以我用js写了以下方法，存放在“sourceController.js”文件内。
functionsourceController(){
varroot="";
varcssCount=0;//css加载计数器
varjsCount=0;//js加载计数器
this.callfunc=null;//回调函数
this.opt={
root:root
};
this.css={
css0:"javaScript/bootstrap/css/bootstrap.css",
css1:"css/iconfont/iconfont.css",
css2:"css/common.css"
};
this.script={
script0:"javaScript/jquery.js",
script1:"javaScript/bootstrap/js/bootstrap.js"
};
/*设置文件根目录
*@paramurl根目录地址
*/
this.setRoot=function(url){
root=url;
};
/*设置回调函数
*@paramfunc回调函数
*/
this.setCallBack=function(func){
this.callfunc=func;
};
/*添加Script文件请在addSource钱调用
*@paramurlscript文件路径
*/
this.addScript=function(url){
if(url===""||url==null)return;
this.script["script"+Object.getOwnPropertyNames(this.script).length]=url;
};
/*添加CSS文件请在addSource钱调用
*@paramurlcss文件路径
*/
this.addCss=function(url){
if(url===""||url==null)return;
this.css["css"+Object.getOwnPropertyNames(this.css).length]=url;
};
/*添加常用资源*/
this.addSource=function(){
console.log("Source");
addMeta([["http-equiv","X-UA-Compatible"],["content","IE=edge"]]);
addMeta([["name","viewport"],["content","width=device-width,initial-scale=1"]]);
createCss(this);
};
/*回调函数
*@paramfunc回调方法
*@paramobj当前对象
*/
functioncallback(obj){
console.log("funcrun");
obj.callfunc();
}
/*添加<link>默认先加载css
*@paramobj当前对象
*/
functioncreateCss(obj){
//如果没有css文件，不加载
if(Object.getOwnPropertyNames(obj.css).length<=0)return;
varurl=obj.css["css"+cssCount];
console.log(url);
varcss=document.createElement("link");
css.setAttribute("rel","stylesheet");
if(root!=""){
url=root+"/"+url;
}
css.href=url;
document.getElementsByTagName("head")[0].appendChild(css);
css.onload=function(){
cssCount++;
if(cssCount<Object.getOwnPropertyNames(obj.css).length){
createCss(obj);
}else{
//如果有js文件，开始加载js
if(Object.getOwnPropertyNames(obj.script).length>0){
createJs(obj);
}
}
};
}
/*添加<script>js加载完后执行回调函数
*@paramobj当前对象
*/
functioncreateJs(obj){
//如果没有js文件，不加载
if(Object.getOwnPropertyNames(obj.script).length<=0)return;
varurl=obj.script["script"+jsCount];
console.log("time:"+newDate().getTime()+""+url);
varscript=document.createElement("script");
script.setAttribute("type","text/javascript");
if(root!=""){
url=root+"/"+url;
}
script.src=url;
document.getElementsByTagName("head")[0].appendChild(script);
script.onload=function(){
jsCount++;
if(jsCount<Object.getOwnPropertyNames(obj.script).length){
createJs(obj);
}else{
//如果有回调函数执行回调函数
if(obj.callfunc!=null){
callback(obj);
}
}
}
}
/*添加meta
*@paramattrmeta属性，为二维数组
*/
functionaddMeta(attr){
console.log("meta");
varmeta=document.createElement("meta");
for(vari=0;i<attr.length;i++){
meta.setAttribute(attr[i][0],attr[i][1]);
}
document.getElementsByTagName("head")[0].appendChild(meta);
}
}
在需要引入的页面只需要在<head>加入如下代码就可以一下子引入所有的常用资源了。为了显示美观在所有布局完成之间body设置visibility为hidden，布局完成后显示出来。
window.onload=function(){
varsc=newsourceController();
sc.addCss("css/index.css");//额外添加的css文件，必须在加载资源之前加入
sc.addScript("javaScript/index.js");//额外添加的js文件，必须在加载资源之前加入
sc.setCallBack(function(){
document.body.style.display="block";//显示body
});
sc.addSource();//加载常用的js和css文件
};
以上就是小编为大家带来的常用js,css文件统一加载方法(推荐)并在加载之后调用回调函数的全部内容了，希望对大家有所帮助，多多支持毛票票~