优化EXTJS的按模块上载JS的功能

优化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'          ]

 
在此可以看出，该模块所依赖的js比较多，不过每个js都不大。

当点击左菜单的“流程管理”时，其就通过ScriptMgr来下载其所依赖的js，全部下载完成后，才创建这个流程管理的Panel,并且加到TabCenterPanel中去。



我们的调用下载的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();  });

当传入FlowManagerView时，告诉我们就是需要在App.Import.js中取出该依赖的js数组，然后传给ScriptMgr的load中的scripts参数，告诉他们我们要完成这些js的加载，并且完成后，创建FlowManagerView对象。



现在我们来看一下ScriptMgr的Load方法：

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);                      });  [size=medium][/size]        }      };  };

ScriptLoader的代码如下：

/**  * 用于动态加载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                      }                  });      }  };

从以上我们可以看出，其加载的js数组的时候，是加载完成一个js后，然后再加载另一个js，直到加载完成后才调用回调函数。若一个模块有20个js，每个js平均下载的时间需要0.5秒，即就需要10秒钟加载。当然我们可以把这些js合并至一个js，然后下载，这是理论上是可以的，不过不利于代码的划分。



我们知道浏览器是可以同时下载这些js的，只不过我们需要知道什么时候下载完成，下载完成后我们就可以调用回调函数。



鉴于此， 我们通过一个变量来记录其下载js，每完成下载一个就自动加1，若下载完成后，下载的数量就跟我们依赖的js的数量一样，就可以回调，这样我们有多少个js，就产生多少个下载器，每个下载器同时下载这些js，改进后的ScriptMgr的代码如下所示：

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);                      }                  }              });          }      };  };

大家可以在访问体验一下：

  http://oa.jee-soft.cn:8080/index.jsp

  http://office.jee-soft.cn:8080/index.jsp

  user:csx

  pwd 111

查看更多 下一篇