如何按需动态加载js文件

JavaScript无非就是script标签引入页面，但当项目越来越大的时候，单页面引入N个js显然不行，合并为单个文件减少了请求数，但请求的文件体积却很大。这时候最好的做法就是按需引入，动态引入组件js和样式，文件load完成后调用callback，运行js。代码还是很简便的。

1. 判断文件load完成。加载状态ie为onreadystatechange，其他为onload、onerror

01

if(isie){

02	Res.onreadystatechange = function(){

03	if(Res.readyState == 'complete' || Res.readyState == 'loaded'){

04	Res.onreadystatechange = null;

05	callback();

06	_self.loadedUi[modelName] = true;

07

}

08

}

09

}

10

else{

11	Res.onload = function(){

12	Res.onload = null;

13	callback();

14	_self.loadedUi[modelName] = true;

15

}

16	Res.onerror = function(){

17	throw new Error('res error:' + modelName+'.js');

18

}

19

}

2. 所有组件的命名最好保持一致，callback调用也比较方便。还可以根据需要增加参数比如： requires，依赖于那些文件；style,true || false，是否加载样式，等等。

3. 移除操作也可以有，移除script、style标签、delete组件

001	(function(window,undefined){

002	if(!window.ui) {

003	window.ui  = {};

004

}

005	//动态加载ui的js

006	window.bus  = {

007	config : {

008	version : window.config.version,

009	cssPath : window.config.resServer + '/css/v3/ui',

010	jsPath  : window.config.resServer + '/js/v2/ui'

011

},

012	loadedUi : {},

013	readyStateChange : function(){

014	var ua = navigator.userAgent.toLowerCase();

015	return ua.indexOf('msie') >= 0;

016

},

017	loadRes : function(modelName,prames,callback){

018	var _self = this;

019	var Res = document.createElement(prames.tagName);

020	for(var k in prames){

021	if(k != 'tagName'){

022	Res.setAttribute(k,prames[k],0);

023

}

024

}

025	document.getElementsByTagName('head')[0].appendChild(Res);

026

027	if(this.readyStateChange()){

028	Res.onreadystatechange = function(){

029	if(Res.readyState == 'complete' || Res.readyState =='loaded'){

030	Res.onreadystatechange = null;

031	callback();

032	_self.loadedUi[modelName] = true;

033

}

034

}

035

}else{

036	Res.onload = function(){

037	Res.onload = null;

038	callback();

039	_self.loadedUi[modelName] = true;

040

}

041	Res.onerror = function(){

042	throw new Error('res error:' + modelName+'.js');

043

}

044

}

045

},

046	removeUi : function(modelName){

047	if(!modelName){

048	return true

049

};

050	this.loadedUi[modelName] = false;

051

052	var head       = document.getElementsByTagName('head')[0];

053	var model_js   = document.getElementById('J_model_'+modelName + '_js');

054	var model_css  = document.getElementById('J_model_'+modelName + '_css');

055	if(model_js && model_css){

056	delete window.ui[modelName];

057	head.removeChild(model_js);

058	head.removeChild(model_css);

059	return true;

060

}else{

061	return false;

062

}

063

},

064	loadUi : function(modelName,callback,setting){

065	if(!modelName){

066	return true

067

};

068	callback = callback || function(){};

069	if(this.loadedUi[modelName] == true){

070	callback();

071	return true

072

}

073

074	var deafult_setting = {

075	style : true,

076	js    : true,

077	requires : []

078

}

079	for(var key in setting){

080	deafult_setting[key] = setting[key];

081

}

082	deafult_setting['style'] === true && this.loadRes(modelName,{

083	id      : 'J_model_'+modelName + '_css',

084	name    : modelName,

085	tagName : 'link',

086	type    : 'text/css',

087	rel     : 'stylesheet',

088	href    : this.config.cssPath + '/' + modelName + '.css?v=' + this.config.version

089

});

090

091	deafult_setting['js'] === true && this.loadRes(modelName,{

092	id      : 'J_model_'+modelName + '_js',

093	name    : modelName,

094	tagName : 'script',

095	type    : 'text/javascript',

096	src     : this.config.jsPath + '/' + modelName + '.js?v='+ this.config.version

097	},callback);

098	if(deafult_setting.requires.length > 0){

099	for(var i=0,len = deafult_setting.requires.length;i < len;i++){

100	this.loadUi(deafult_setting.requires[i]);

101

}

102

}

103

}

104

}

105	})(window)

使用方法：

01	// load comment for feed

02	window.bus.loadUi('new_comment_feed', function(){

03	window.ui.new_comment_feed($("#J_newsList"));

04

},{

05	style : false,

06	requires:['emoticon','addFriend']

07

});

08

09	// load new yy ui

10	window.bus.loadUi('yy', function(){

11	window.ui.yy(options);

12

},{

13	style:false,

14	requires:['emoticon']

15

});

16

17	// load photoLightbox

18	window.bus.loadUi('photoLightbox', function(){

19	window.ui.photoLightbox(options.urlAjaxGetFriendPhoto, options.urlCommentOtherPhoto,$("#J_newsList"),options.myUid,options.myName);

20

});