快捷導(dǎo)航

javascript開發(fā)隨筆二動(dòng)態(tài)加載js和文件

更新時(shí)間：2011年11月25日 01:26:50 作者：

js無非就是script標(biāo)簽引入頁面，但當(dāng)項(xiàng)目越來越大的時(shí)候，單頁面引入N個(gè)js顯然不行，合并為單個(gè)文件減少了請(qǐng)求數(shù)，但請(qǐng)求的文件體積卻很大

這時(shí)候最好的做法就是按需引入，動(dòng)態(tài)引入組件js和樣式，文件load完成后調(diào)用callback，運(yùn)行js。代碼還是很簡(jiǎn)便的
1. 判斷文件load完成。加載狀態(tài)ie為onreadystatechange，其他為onload、onerror

復(fù)制代碼代碼如下:

 
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調(diào)用也比較方便。還可以根據(jù)需要增加參數(shù)比如： requires，依賴于那些文件；style,true || false，是否加載樣式，等等。
3. 移除操作也可以有，移除script、style標(biāo)簽、delete組件

復(fù)制代碼代碼如下:

 
(function(window,undefined){ 
if(!window.ui) { 
window.ui = {}; 
} 
//動(dòng)態(tài)加載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) 

使用方法

復(fù)制代碼代碼如下:

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