javascript开发随笔二动态加载js和文件

115 阅读 0 评论 76 点赞

我是靠谱客的博主害怕奇异果，最近开发中收集的这篇文章主要介绍javascript开发随笔二动态加载js和文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这时候最好的做法就是按需引入，动态引入组件js和样式，文件load完成后调用callback，运行js。代码还是很简便的
1. 判断文件load完成。加载状态ie为onreadystatechange，其他为onload、onerror

复制代码代码如下:

 
if(isie){ 
Res.onreadystatechange = function(){ 
if(Res.readyState == 'complete' || Res.readyState == 'loaded'){ 
Res.onreadystatechange = null; 
callback(); 
_self.loadedUi[modelName] = true; 
} 
} 
}else{ 
Res.onload = function(){ 
Res.onload = null; 
callback(); 
_self.loadedUi[modelName] = true; 
} 
Res.onerror = function(){ 
throw new Error('res error:' + modelName+'.js'); 
} 
} 

2. 所有组件的命名最好保持一致，callback调用也比较方便。还可以根据需要增加参数比如： requires，依赖于那些文件；style,true || false，是否加载样式，等等。
3. 移除操作也可以有，移除script、style标签、delete组件

复制代码代码如下:

 
(function(window,undefined){ 
if(!window.ui) { 
window.ui = {}; 
} 
//动态加载ui的js 
window.bus = { 
config : { 
version : window.config.version, 
cssPath : window.config.resServer + '/css/v3/ui', 
jsPath : window.config.resServer + '/js/v2/ui' 
}, 
loadedUi : {}, 
readyStateChange : function(){ 
var ua = navigator.userAgent.toLowerCase(); 
return ua.indexOf('msie') >= 0; 
}, 
loadRes : function(modelName,prames,callback){ 
var _self = this; 
var Res = document.createElement(prames.tagName); 
for(var k in prames){ 
if(k != 'tagName'){ 
Res.setAttribute(k,prames[k],0); 
} 
} 
document.getElementsByTagName('head')[0].appendChild(Res); 
if(this.readyStateChange()){ 
Res.onreadystatechange = function(){ 
if(Res.readyState == 'complete' || Res.readyState == 'loaded'){ 
Res.onreadystatechange = null; 
callback(); 
_self.loadedUi[modelName] = true; 
} 
} 
}else{ 
Res.onload = function(){ 
Res.onload = null; 
callback(); 
_self.loadedUi[modelName] = true; 
} 
Res.onerror = function(){ 
throw new Error('res error:' + modelName+'.js'); 
} 
} 
}, 
removeUi : function(modelName){ 
if(!modelName){ 
return true 
}; 
this.loadedUi[modelName] = false; 
var head = document.getElementsByTagName('head')[0]; 
var model_js = document.getElementById('J_model_'+modelName + '_js'); 
var model_css = document.getElementById('J_model_'+modelName + '_css'); 
if(model_js && model_css){ 
delete window.ui[modelName]; 
head.removeChild(model_js); 
head.removeChild(model_css); 
return true; 
}else{ 
return false; 
} 
}, 
loadUi : function(modelName,callback,setting){ 
if(!modelName){ 
return true 
}; 
callback = callback || function(){}; 
if(this.loadedUi[modelName] == true){ 
callback(); 
return true 
} 
var deafult_setting = { 
style : true, 
js : true, 
requires : [] 
} 
for(var key in setting){ 
deafult_setting[key] = setting[key]; 
} 
deafult_setting['style'] === true && this.loadRes(modelName,{ 
id : 'J_model_'+modelName + '_css', 
name : modelName, 
tagName : 'link', 
type : 'text/css', 
rel : 'stylesheet', 
href : this.config.cssPath + '/' + modelName + '.css?v=' + this.config.version 
}); 
deafult_setting['js'] === true && this.loadRes(modelName,{ 
id : 'J_model_'+modelName + '_js', 
name : modelName, 
tagName : 'script', 
type : 'text/javascript', 
src : this.config.jsPath + '/' + modelName + '.js?v=' + this.config.version 
},callback); 
if(deafult_setting.requires.length > 0){ 
for(var i=0,len = deafult_setting.requires.length;i<len;i++){ 
this.loadUi(deafult_setting.requires[i]); 
} 
} 
} 
} 
})(window) 

使用方法

复制代码代码如下:

 
// load comment for feed 
window.bus.loadUi('new_comment_feed', function(){ 
window.ui.new_comment_feed($("#J_newsList")); 
},{ 
style : false, 
requires:['emoticon','addFriend'] 
}); 
// load new yy ui 
window.bus.loadUi('yy', function(){ 
window.ui.yy(options); 
},{ 
style:false, 
requires:['emoticon'] 
}); 
// load photoLightbox 
window.bus.loadUi('photoLightbox', function(){ 
window.ui.photoLightbox(options.urlAjaxGetFriendPhoto, options.urlCommentOtherPhoto,$("#J_newsList"),options.myUid,options.myName); 
}); 