Javascript development 2. Dynamic Loading of js and file _ javascript skills

Javascript is nothing more than introducing the script tag to the page, but when the project grows, it is obvious that N JavaScript codes are introduced to a single page, and merging them into a single file reduces the number of requests, however, the size of the requested file is very large. At this time, the best practice is to introduce the component js and style dynamically as needed. After the file load is complete, call callback to run js. The code is simple.
1. Check whether the file load is complete. The loading status of ie is onreadystatechange, and the others are onload and onerror.

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 recommended that the names of all components be consistent, and callback calls are convenient. You can also add parameters as needed, such as requires, dependent on those files; style, true | false, whether to load the style, and so on.
3. You can also remove the script, style tag, and delete components.

The Code is as follows:

(Function (window, undefined ){
If (! Window. ui ){
Window. ui = {};
}
// Dynamically load the 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.css Path + '/' + 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 This. loadUi (deafult_setting.requires [I]);
}
}
}
}
}) (Window)

Usage

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: ['emotid', '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 );
});