这时候最好的做法就是按需引入,动态引入组件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 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);});
