JavaScript development essay 2: Dynamically loading js and files_javascript skills

The best way at this time is to introduce it on demand and dynamically introduce component js and styles. After the file is loaded, call the callback and run the js. The code is still very simple
1. Determine whether the file load is complete. The loading status ie is onreadystatechange, and the others are onload, onerror

Copy code The code is as follows:

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. It is best to keep the naming of all components consistent, and callback calls are also more convenient. You can also add parameters as needed, such as: requires, which depends on those files; style, true || false, whether to load the style, etc.
3. You can also remove scripts, style tags, and delete components

Copy code The code is as follows:

(function(window,undefined){
if(!window.ui) {
window.ui = {};
}
//Dynamic loading 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;ithis. loadUi(deafult_setting.requires[i]);
}
}
}
}
})(window)

Usage

Copy code The code is as follows:

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