sencha延迟加载速度(1)

目前一段时间一直做移动终端开发,使用框架为Sencha Touch,Sencha Touch是基于Html5和Ext的,所以在性能上存在很大的问题,尤其是打开程序的时候需要加载很多模块的javascript类,严重影响了程序进入时的速度,随着模块的增多,速度越来越慢。能优化的已经都优化了,比如把各个模块的model,view,store都放到每个模块的Controller里面单独引入,但是每个模块的Controller是必须要在程序初始化的时候加载的,否则进入模块的时候就会报类找不到异常,目前的代码如下:
Js代码   收藏代码
  1. controllers : [  
  2.                "mobile.common.phone.BottomTabPhoneController",   
  3.                "mobile.common.tablet.BottomTabTabletController",   
  4.                "mobile.common.SlideViewController",  
  5.                "mobile.common.organize.OrganizeController",  
  6.                "mobile.cyyw.CyywController",  
  7.                "mobile.user.UserController",  
  8.                "mobile.business.AllBusinessController",  
  9.                "mobile.qyyh.QyyhController",  
  10.                "mobile.home.HomePageController",  
  11.                "mobile.group.GroupController",  
  12.                "mobile.news.NewsController",  
  13.                "mobile.txl.TxlController",  
  14.                'mobile.blog.BlogController',  
  15.                "mobile.tdxx.TdxxController",  
  16.                "mobile.fyxx.FyxxController",  
  17.                "mobile.qyml.QymlController",  
  18.                "mobile.yzcxm.YzcxmController",  
  19.                "mobile.jjyxbg.JjyxbgController",  
  20.                "mobile.gzlc.GzlcController",  
  21.                "mobile.clzzjk.ClzzjkController",  
  22.                "mobile.pljk.PljkController",  
  23.                "mobile.zcjk.ZcjkController",  
  24.                "mobile.sjpc.SjpcController",  
  25.                "mobile.ptcb.PtcbController",  
  26.                "mobile.ytbcb.YtbcbController",  
  27.                "mobile.file.FileController",  
  28.                "mobile.rwap.RwapController",  
  29.                "mobile.syrw.SyrwController",  
  30.                "mobile.bdss.BdssController",  
  31.                "mobile.fwjk.FwjkController",  
  32.                "mobile.wdrw.WdrwController",  
  33.         ],  

 这是我的全部模块的Controller,每个Controller里面又引入了该模块的model,view和store,进入程序时候速度慢就是这些Controller影响的,怎样才能在程序初始化的时候只加载必要的Controller而把其它不必要的模块延迟加载呢?查阅官方api并没有这方面的说明,但是问题必须要解决!后来考虑到Sencha Touch在初始化的时候是要加载所有Controller的,那能不能把Sencha Touch官方的代码拷贝出来用于延迟加载单独的Controller呢?抱着试试看的心理我在官方api中搜索有关Controller的代码,发现在Application.js中有一个loadControllerDependencies方法,代码如下:

Js代码   收藏代码
  1. loadControllerDependencies: function() {  
  2.         this.instantiateControllers();  
  3.   
  4.         var controllers = this.getControllerInstances(),  
  5.             classes = [],  
  6.             stores = [],  
  7.             i, controller, controllerStores, name;  
  8.   
  9.         for (name in controllers) {  
  10.             controller = controllers[name];  
  11.             controllerStores = controller.getStores();  
  12.             stores = stores.concat(controllerStores);  
  13.   
  14.             classes = classes.concat(controller.getModels().concat(controller.getViews()).concat(controllerStores));  
  15.         }  
  16.   
  17.         this.setStores(this.getStores().concat(stores));  
  18.   
  19.         Ext.require(classes, this.onDependenciesLoaded, this);  
  20.     },  

 其中instantiateControllers方法代码如下:

Js代码   收藏代码
  1. /** 
  2.      * @private 
  3.      * Called once all of our controllers have been loaded 
  4.      */  
  5.     instantiateControllers: function() {  
  6.         var controllerNames = this.getControllers(),  
  7.             instances = {},  
  8.             length = controllerNames.length,  
  9.             name, i;  
  10.   
  11.         for (i = 0; i < length; i++) {  
  12.             name = controllerNames[i];  
  13.   
  14.             instances[name] = Ext.create(name, {  
  15.                 application: this  
  16.             });  
  17.         }  
  18.   
  19.         return this.setControllerInstances(instances);  
  20.     },  

 由代码可以看出,instantiateControllers方法就是实例化Controller本身的方法,而loadControllerDependencies方法还包含了初始化Controller中model,view和store的代码,最后一行代码还包含了一个回调函数onDependenciesLoaded,代码如下:

Js代码   收藏代码
  1. /** 
  2.      * @private 
  3.      * Callback that is invoked when all of the Application, Controller and Profile dependencies have been loaded. 
  4.      * Launches the controllers, then the profile and application. 
  5.      */  
  6.     onDependenciesLoaded: function() {  
  7.         var me = this,  
  8.             profile = this.getCurrentProfile(),  
  9.             launcher = this.getLaunch(),  
  10.             controllers, name;  
  11.   
  12.         this.instantiateStores();  
  13.   
  14.         //<deprecated product=touch since=2.0>  
  15.         Ext.app.Application.appInstance = this;  
  16.   
  17.         if (Ext.Router) {  
  18.             Ext.Router.setAppInstance(this);  
  19.         }  
  20.         //</deprecated>  
  21.   
  22.         controllers = this.getControllerInstances();  
  23.   
  24.         for (name in controllers) {  
  25.             controllers[name].init(this);  
  26.         }  
  27.   
  28.         if (profile) {  
  29.             profile.launch();  
  30.         }  
  31.   
  32.         launcher.call(me);  
  33.   
  34.         for (name in controllers) {  
  35.             //<debug warn>  
  36.             if (controllers[name] && !(controllers[name] instanceof Ext.app.Controller)) {  
  37.                 Ext.Logger.warn("The controller '" + name + "' doesn't have a launch method. Are you sure it extends from Ext.app.Controller?");  
  38.             } else {  
  39.             //</debug>  
  40.                 controllers[name].launch(this);  
  41.             //<debug warn>  
  42.             }  
  43.             //</debug>  
  44.         }  
  45.   
  46.         me.redirectTo(window.location.hash.substr(1));  
  47.     }  

 经测试,其中需要用到的代码只有this.instantiateStores();这一行,功能是初始化Controller中的Store。

  找到了关键的代码,下一步要做的是把代码提出来为我作用,由于我需要在进入某个模块的时候再初始化这个模块的Controller,也就是每次只初始化一个Controller,所以里面的一些代码需要修改合并一下,修改合并后的代码如下:

Js代码   收藏代码
  1. //controllerName是Controller的全限定名,例如:"mobile.bdss.BdssController",mobile.app是当前Ext.app.Application的实例  
  2. if (Ext.isEmpty(mobile.app.getController(controllerName))) {  
  3.                         //获得已经实例化过的Controller  
  4.             var instances = mobile.app.getControllerInstances(),  
  5.                         //实例化当前模块的Controller  
  6.             controller = Ext.create(controllerName, {  
  7.                 application: mobile.app  
  8.             });  
  9.                         //把当前模块的Controller加到实例数组中  
  10.             instances[controllerName]=controller;  
  11.                         //把Controller实例数组还给Ext.app.Application  
  12.             mobile.app.setControllerInstances(instances);  
  13.                         //把当前Controller中的Stroe赋值给Ext.app.Application  
  14.             mobile.app.setStores(controller.getStores());  
  15.             var classes=[];  
  16.             classes = classes.concat(controller.getModels().concat(controller.getViews()).concat(controller.getStores()));//获得所有类  
  17.             Ext.require(classes, function(){  
  18.                 mobile.app.instantiateStores();  
  19.                   
  20.             }, mobile.app);  
  21.         }  

   这样,在每次进入模块时都执行这段代码,如果没有实例化Controller就实例化,这样我就可以把开头那些不需要进入程序时就加载的Controller去掉,只保留必须的Controller,大大提高程序启动时的时间。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值