javaScript无非就是script标签引入页面,但当项目越来越大的时候,单页面引入N个js显然不行,合并为单个文件减少了请求数,但请求的文件体积却很大。这时候最好的做法就是按需引入,动态引入组件js和样式,文件load完成后调用callback,运行js。代码还是很简便的。
1. 判断文件load完成。加载状态ie为onreadystatechange,其他为onload、onerror
02 | Res.onreadystatechange = function (){ |
03 | if (Res.readyState == 'complete' || Res.readyState == 'loaded' ){ |
04 | Res.onreadystatechange = null ; |
06 | _self.loadedUi[modelName] = true ; |
11 | Res.onload = function (){ |
14 | _self.loadedUi[modelName] = true ; |
16 | Res.onerror = function (){ |
17 | throw new Error( 'res error:' + modelName+ '.js' ); |
2. 所有组件的命名最好保持一致,callback调用也比较方便。还可以根据需要增加参数比如: requires,依赖于那些文件;style,true || false,是否加载样式,等等。
3. 移除操作也可以有,移除script、style标签、delete组件
001 | ( function (window,undefined){ |
008 | version : window.config.version, |
009 | cssPath : window.config.resServer + '/css/v3/ui' , |
010 | jsPath : window.config.resServer + '/js/v2/ui' |
013 | readyStateChange : function (){ |
014 | var ua = navigator.userAgent.toLowerCase(); |
015 | return ua.indexOf( 'msie' ) >= 0; |
017 | loadRes : function (modelName,prames,callback){ |
019 | var Res = document.createElement(prames.tagName); |
022 | Res.setAttribute(k,prames[k],0); |
025 | document.getElementsByTagName( 'head' )[0].appendChild(Res); |
027 | if ( this .readyStateChange()){ |
028 | Res.onreadystatechange = function (){ |
029 | if (Res.readyState == 'complete' || Res.readyState == 'loaded' ){ |
030 | Res.onreadystatechange = null ; |
032 | _self.loadedUi[modelName] = true ; |
036 | Res.onload = function (){ |
039 | _self.loadedUi[modelName] = true ; |
041 | Res.onerror = function (){ |
042 | throw new Error( 'res error:' + modelName+ '.js' ); |
046 | removeUi : function (modelName){ |
050 | this .loadedUi[modelName] = false ; |
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); |
064 | loadUi : function (modelName,callback,setting){ |
068 | callback = callback || function (){}; |
069 | if ( this .loadedUi[modelName] == true ){ |
074 | var deafult_setting = { |
079 | for ( var key in setting){ |
080 | deafult_setting[key] = setting[key]; |
082 | deafult_setting[ 'style' ] === true && this .loadRes(modelName,{ |
083 | id : 'J_model_' +modelName + '_css' , |
088 | href : this .config.cssPath + '/' + modelName + '.css?v=' + this .config.version |
091 | deafult_setting[ 'js' ] === true && this .loadRes(modelName,{ |
092 | id : 'J_model_' +modelName + '_js' , |
095 | type : 'text/javascript' , |
096 | src : this .config.jsPath + '/' + modelName + '.js?v=' + this .config.version |
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]); |
使用方法:
02 | window.bus.loadUi( 'new_comment_feed' , function (){ |
03 | window.ui.new_comment_feed($( "#J_newsList" )); |
06 | requires:[ 'emoticon' , 'addFriend' ] |
10 | window.bus.loadUi( 'yy' , function (){ |
11 | window.ui.yy(options); |
18 | window.bus.loadUi( 'photoLightbox' , function (){ |
19 | window.ui.photoLightbox(options.urlAjaxGetFriendPhoto, options.urlCommentOtherPhoto,$( "#J_newsList" ),options.myUid,options.myName); |
* ====================================================
** 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(); });
*
******************************/