按需动态加载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	thrownewError('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	varua = navigator.userAgent.toLowerCase();

015	returnua.indexOf('msie') >= 0;

016

},

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

018	var_self =this;

019	varRes = document.createElement(prames.tagName);

020	for(varkin 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	thrownewError('res error:'+ modelName+'.js');

043

}

044

}

045

},

046	removeUi :function(modelName){

047	if(!modelName){

048	returntrue

049

};

050	this.loadedUi[modelName] =false;

051

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

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

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

055	if(model_js && model_css){

056	deletewindow.ui[modelName];

057	head.removeChild(model_js);

058	head.removeChild(model_css);

059	returntrue;

060

}else{

061	returnfalse;

062

}

063

},

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

065	if(!modelName){

066	returntrue

067

};

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

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

070	callback();

071	returntrue

072

}

073

074	vardeafult_setting = {

075	style :true,

076	js    :true,

077	requires : []

078

}

079	for(varkeyin 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(vari=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

});

jquery按需加载js和css插件使用说明

* ====================================================

  ** 1. 概述 :

  * ====================================================

  * $.plugin – 是 jQuery 用来动态加载 js 和 css 文件的插件。主要用来减少网络流量以及相对的加强代码的安全性。

  *

  * 文档地址 : http://nicolas.rudas.info/jQuery/getPlugin/

  * 下载地址   : http://code.google.com/p/lazyloader/downloads/

  * 使用版本 : 081002 - 02 Oct 2008

  *

  * ====================================================

  ** 2. 用法简介 :

  * ====================================================

  * $.plugin(name,settings)            声明一个指定命名（ name ）和设置参数的插件集合

  * $.plugin(name)                       将该插件实例化 .

  * $.plugin(name).get()                加载指定插件并调用默认回调函数

  * $.plugin(name,function)           加载指定插件并在完成时调用指定函数（该函数将覆盖默认回调函数）

  * $.plugin()                               加载所有需要是的插件集合

  *

  * ====================================================

  ** 3. 参数说明 :

  * ====================================================

  *    @param name              {String}  为插件集合指定的名称

  *

  *    @param settings    {Object} 插件集合的参数

  *                                                            -     files        {Array,String}              该插件集所需的文件列表

  *                                                            -      selectors  {Array,String}              jQuery 选择器集合列表（如果元素匹配指定选择器时，该插件集合将被下载）

  *                                                             -      callback   {Function}                   指定该插件集的默认回调函数（该插件下载完成后调用）

  *                                                            -      cache             {Boolean}              是否缓存文件在浏览器缓存中（默认为‘ true ’）

  *                                                            -      ajax         {Object}               下载文件 ajax 请求的参数，同 jQuery 中设置一致

  *                                                            -      context           {Object, jQuery}    指定该插件件集合的插入位置（默认是在 document 中）

  *                                                            -      target             {Object, jQuery}    指定插入的元素节点（默认是 head 中）

  *                                                            -      init          {Function}                   插件完成设置时的回调函数

  *                                                            -      preLoad          {Function}                   加载任何一个文件前调用的函数

  *                                                            -      postLoad {Function}                   所有文件加载完成时的回调函数

  *

  *    @param callback   {Function}     加载指定插件并在完成时调用指定函数（该函数将覆盖默认回调函数）                                                     

  * ====================================================

  ** 4. 使用手册 :

  * ====================================================

  * $.plugin(name)

  *                         .get([callback])      加载指定指定插件并调用回调函数，当回调函数参数为空时将调用默认回调函数

  *                                                           

  *                         .getFile(url)            加载插件中的指定文件并调用默认的回调函数

  *

  *                         .isNeeded()            检查该插件是否是该页面需要的（根据插件所指定的选择器）     如果需要则返回 true, 其它情况返回 false

  *

  * ====================================================

  ** 5. 示例 :

  * ====================================================

  * 创建 Tabs 插件 :

  *           $.plugin('tabs',{

  *                  files: ['../styles/tabs.css',

  *                                '../scripts/tabs.js'],

  *                  selectors: ['.tabs'],

  *                  callback : function(){ $('.tabs').tabs(); }

  *           });

  *          

  *           $.plugin('tabs').get();

  *

  * Create a Loader Plugin:

  *           $.plugin('loader',{

  *                  files:              ['../styles/mystyles.css',

  *                                       '../scripts/myscript.js',

  *                                       '../scripts/myscript2.js',

  *                                       '../scripts/myscript3.js']

  *                  selectors: ['body'],

  *                  init          :      function(url){ $('body').append('<ol id="now-loading"></ol>'); },

  *                  preLoad          :      function(url){

  *                                                     $('#now-loading').append('<li data-file="'+url+'">Loading: '+url+'</li>')

  *                                       },

  *                  postLoad :      function(url){

  *                                                     $( 'li[data-file="'+url+'"]' , '#now-loading').css('text-decoration','line-through') });

  *                                       }

  *           });

  *          

  *           $.plugin('loader',function(){ $('#now-loading').remove(); });

  *

  ******************************/