ajax动态加载js文件,如何按需动态加载js文件

JavaScript无非就是script标签引入页面，但当项目越来越大的时候，单页面引入N个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);

});