JavaScript 动态加载 JS 与 CSS 资源实现方案

动态加载资源的核心逻辑

此时最优策略为按需动态引入组件JS及样式，文件加载完毕后执行回调以运行JS。实现方式简洁： 1. 检测文件加载状态，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');
} 
} 

组件命名与参数配置

建议所有组件的命名保持统一，以便方便地调用回调函数。此外，可根据实际需求扩展参数，例如通过 requires 指定依赖的文件列表，或通过 style 参数（true 或 false）控制是否加载样式文件。

资源移除功能实现

同时，也应提供移除操作的功能，包括移除对应的 script 和 style 标签，以及删除组件对象。

 
(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);
});