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，大大提高程序启动时的时间。