优化EXTJS的按模块下载JS的性能。
最近有不少用户跟我反馈，访问Joffice页面的某些功能，需要等几秒钟才能出来。鉴于这种情况，在此分析一下原因，同时也给出一些解决方案，可以帮助Joffice 1.2,Joffice 1.3的开发用户解决这种根本的问题，可以让这种按模块下载js速度提高7-8倍，特别是有一些模块需要加载很多js的时候，其下载速度还高更多。
joffice 1.3以前的版本，按模块下载的原理如下：
在此我们以流程管理模块为例：
在App.import.js中定义该模块所依赖的js，如下：
FlowManagerView:[ __ctxPath+'/js/flow/ProTypeForm.js', __ctxPath+'/js/flow/ProDefinitionForm.js', __ctxPath+'/js/flow/ProDefinitionView.js', __ctxPath+'/js/flow/FlowManagerView.js', __ctxPath+'/js/flow/ProDefinitionDetail.js', __ctxPath+'/js/flow/ProcessRunStart.js', __ctxPath+'/js/flow/ProDefinitionSetting.js', __ctxPath+'/js/flow/MyTaskView.js', __ctxPath+'/js/flow/ProcessNextForm.js', __ctxPath+'/js/flow/FormDesignWindow.js', __ctxPath+'/js/flow/FormEditorWindow.js', __ctxPath+'/js/flowDesign/FlowDesignerWindow.js' ]
function $ImportJs(viewName,callback,params) { var b = jsCache[viewName]; if (b != null) { var view =newView(viewName,params); callback.call(this, view); } else { var jsArr = eval('App.importJs.' + viewName); if(jsArr==undefined || jsArr.length==0){ try{ var view = newView(viewName,params); callback.call(this, view); }catch(e){ } return ; } ScriptMgr.load({ scripts : jsArr, callback : function() { jsCache[viewName]=0; var view = newView(viewName,params); callback.call(this, view); } }); } } $ImportJs('FlowManagerView',function(){ return new FlowManagerView(); }); ScriptLoaderMgr = function() { this.loader = new ScriptLoader(); this.load = function(o) { if (!Ext.isArray(o.scripts)) { o.scripts = [o.scripts]; } o.url = o.scripts.shift(); if (o.scripts.length == 0) { this.loader.load(o); } else { o.scope = this; this.loader.load(o, function() { this.load(o); }); } }; }; /** * 用于动态加载js * sample is here * ScriptMgr.load({ * scripts: ['/js/other-prerequisite.js', '/js/other.js'], * callback: function() { * var other = new OtherObject(); * alert(other); //just loaded * } * }); */ ScriptLoader = function() { this.timeout = 10; this.scripts = []; this.disableCaching = true;//false this.loadMask = null; }; ScriptLoader.prototype = { showMask : function() { if (!this.loadMask) { this.loadMask = new Ext.LoadMask(Ext.getBody()); this.loadMask.show(); } }, hideMask : function() { if (this.loadMask) { this.loadMask.hide(); this.loadMask = null; } }, processSuccess : function(response) { this.scripts[response.argument.url] = true; window.execScript ? window.execScript(response.responseText) : window .eval(response.responseText); //if (response.argument.options.scripts.length == 0) { this.hideMask(); //} if (typeof response.argument.callback == 'function') { response.argument.callback.call(response.argument.scope); } }, processFailure : function(response) { this.hideMask(); Ext.MessageBox.show({ title : '应用程序出错', msg : 'Js脚本库加载出错，服务器可能停止，请联系管理员。', closable : false, icon : Ext.MessageBox.ERROR, minWidth : 200 }); setTimeout(function() {Ext.MessageBox.hide();}, 3000); }, load : function(url, callback) { var cfg, callerScope; if (typeof url == 'object') { // must be config object cfg = url; url = cfg.url; callback = callback || cfg.callback; callerScope = cfg.scope; if (typeof cfg.timeout != 'undefined') { this.timeout = cfg.timeout; } if (typeof cfg.disableCaching != 'undefined') { this.disableCaching = cfg.disableCaching; } } if (this.scripts[url]) { if (typeof callback == 'function') { callback.call(callerScope || window); } return null; } this.showMask(); //alert('load now?'); Ext.Ajax.request({ url : url, success : this.processSuccess, failure : this.processFailure, scope : this, timeout : (this.timeout * 1000), disableCaching : this.disableCaching, argument : { 'url' : url, 'scope' : callerScope || window, 'callback' : callback, 'options' : cfg } }); } }; ScriptLoaderMgr = function() { this.loader = new ScriptLoader(); this.load = function(o) { if (!Ext.isArray(o.scripts)) { o.scripts = [o.scripts]; } //记数器 o.lfiles=0; for(var i=0;i<o.scripts.length;i++){ o.url = o.scripts[i]; o.scope = this; this.loader.load(o, function() { o.lfiles++; if(o.lfiles==o.scripts.length){ if(o.callback!=null){ this.loader.hideMask(); o.callback.call(this); } } }); } }; };