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

　　推荐阅读

　　JavaScript中的16进制字符(改进)

原始的代码： 复制代码 代码如下: //将文字转换为16进制 function textToSix(str) { return escape(str).replace(/%/g, function () { return "\"; }).toLowerCase(); } 改进后的： 复制代码 代码如下: //将文字>>>详细阅读

本文标题：javascript开发随笔二 动态加载js和文件

地址：http://www.17bianji.com/kaifa2/JS/23893.html

 1/2    1