如何更优雅的实现ExtJS的前端MVC模式下一个App多个Controller的动态加载
2013-12-09 11:03
701 查看
注:文中ExtJS主要指ExtJS 4.1版本,若有不当之处,烦请给予指正,谢谢!
最近有些朋友总是在问“怎么实现ExtJS的前端MVC模式下一个App多个Controller的动态加载”,也看了一些网友的实现,总的来说,我认为有必要跟大家分享一下我们目前的实现方法,所以,趁着中午休息的空闲,草拟了这篇随笔,跟大家一起探讨一下“如何更优雅的实现ExtJS的前端MVC模式下一个App多个Controller的动态加载”。
其实这也是得益于一位国外同行的启发,具体链接地址已无从找起,请勿见怪!
首先,说说为什么要引入多个Controller。
ExtJS的MVC模式下,Controller默认情况下会一次性将其配置的所有store、model、自定义Ext组件,在其初始化时,一起请求下来。
这样的实现,对于小型的项目来说,js文件较少,只使用一个Controller问题不大,但是对于大型项目来说,一次性请求那么多sotre、model、view,这是让人无法接受的!
所以,我们有必要将不同的功能、模块,封装到不同的Controller中,减少其同时请求的js数量,提高用户的体验。
接下来,我们来了解一下,ExtJS的MVC模式下Controller的加载过程。
先举一段代码为例,如上所示,给Ext.app.Application实例配置了三个Controller。
实际上,Ext.app.Application的构造函数中,会给它的实例添加一个属性:controllers,这是一个Ext.util.MixedCollection()实例,其源码如下:
(注意:了解这一点细节,对我们后面很有帮助。)
紧接着,Ext.app.Application的构造函数中会遍历我们给这个实例配置的三个Controller,调用当前实例的getController方法,获取对应的Controler实例,并执行该Controller实例的init()方法,源码如下:
getControler方法负责返回一个Controller实例,如果参数中的Controller已经加载过,则直接取得该Controller实例并返回,如果参数中的Controller尚未加载过,则向后台发起一个请求,获取一个Controller实例,并将这个Controler实例添加到Ext.app.Application实例的controllers里,最终返回这个Controller实例,其源码如下:
![](http://common.cnblogs.com/images/copycode.gif)
![](http://common.cnblogs.com/images/copycode.gif)
到此,我们基本上清楚了Controller的加载过程,接下来,我们谈谈如何在一个App中动态加载多个Controller。
由于Ext.app.Application实例的controllers属性是个Ext.util.MixedCollection()实例,因此,我们可以为其添加一个事件监听,当有新的Controller被动态加载进来的时候,就执行这个Controller的init()方法,这能省去我们每次都手动去调用Controller的init()方法的工作,示例代码如下:
![](http://common.cnblogs.com/images/copycode.gif)
![](http://common.cnblogs.com/images/copycode.gif)
如上代码,我们顺便为Ext.app.Application扩展了两个方法:hasController、addController,为后续编写代码提供一些友好的支持,其具体用途可见代码中的注释。
接下来,我们就可以在需要的地方,进行动态加载Controller了,示例如下:
对于SysController中的store、model、view,只需保持原先的写法,不需要任何更改,在调用app.addController时,会自动加载。
再也不需要你去手工调用Controller的init()方法了,代码就这么简单!
注:本文讨论的话题仅仅是在一个app中如何动态加载多个Controller,而对于Controller中所包含的store、model、view等的动态加载,可能需要再另起一篇来进行讨论,大家有兴趣的话可以翻一下Ext.application.Controller源码中的getStore()、getModel()、getView()等方法的源码,也许能得到一些相应的提示和灵感!
尊重原创,如需转载,请务必注明原文地址:http://www.cnblogs.com/Raoh/archive/2013/04/01/ExtJS_MVC_Controller.html
最近有些朋友总是在问“怎么实现ExtJS的前端MVC模式下一个App多个Controller的动态加载”,也看了一些网友的实现,总的来说,我认为有必要跟大家分享一下我们目前的实现方法,所以,趁着中午休息的空闲,草拟了这篇随笔,跟大家一起探讨一下“如何更优雅的实现ExtJS的前端MVC模式下一个App多个Controller的动态加载”。
其实这也是得益于一位国外同行的启发,具体链接地址已无从找起,请勿见怪!
首先,说说为什么要引入多个Controller。
ExtJS的MVC模式下,Controller默认情况下会一次性将其配置的所有store、model、自定义Ext组件,在其初始化时,一起请求下来。
这样的实现,对于小型的项目来说,js文件较少,只使用一个Controller问题不大,但是对于大型项目来说,一次性请求那么多sotre、model、view,这是让人无法接受的!
所以,我们有必要将不同的功能、模块,封装到不同的Controller中,减少其同时请求的js数量,提高用户的体验。
接下来,我们来了解一下,ExtJS的MVC模式下Controller的加载过程。
Ext.create('Ext.app.Application',{ name:'XICTISD', appFolder:'app', views:['Viewport'], controllers:['MainController','UserController','RoleController'] });
先举一段代码为例,如上所示,给Ext.app.Application实例配置了三个Controller。
实际上,Ext.app.Application的构造函数中,会给它的实例添加一个属性:controllers,这是一个Ext.util.MixedCollection()实例,其源码如下:
me.controllers = new Ext.util.MixedCollection();
(注意:了解这一点细节,对我们后面很有帮助。)
紧接着,Ext.app.Application的构造函数中会遍历我们给这个实例配置的三个Controller,调用当前实例的getController方法,获取对应的Controler实例,并执行该Controller实例的init()方法,源码如下:
for (i = 0; i < ln; i++) { controller = me.getController(controllers[i]); controller.init(me); }
getControler方法负责返回一个Controller实例,如果参数中的Controller已经加载过,则直接取得该Controller实例并返回,如果参数中的Controller尚未加载过,则向后台发起一个请求,获取一个Controller实例,并将这个Controler实例添加到Ext.app.Application实例的controllers里,最终返回这个Controller实例,其源码如下:
![](http://common.cnblogs.com/images/copycode.gif)
getController: function(name) { var controller = this.controllers.get(name); if (!controller) { controller = Ext.create(this.getModuleClassName(name, 'controller'), { application: this, id: name }); this.controllers.add(controller); } return controller; }
![](http://common.cnblogs.com/images/copycode.gif)
到此,我们基本上清楚了Controller的加载过程,接下来,我们谈谈如何在一个App中动态加载多个Controller。
由于Ext.app.Application实例的controllers属性是个Ext.util.MixedCollection()实例,因此,我们可以为其添加一个事件监听,当有新的Controller被动态加载进来的时候,就执行这个Controller的init()方法,这能省去我们每次都手动去调用Controller的init()方法的工作,示例代码如下:
![](http://common.cnblogs.com/images/copycode.gif)
var application; Ext.Loader.setConfig({enabled:true}); Ext.require('Ext.app.Application',function(){ Ext.app.Application.addMembers({ //加载Controller后触发事件 newControllerAdded:function(idx,cntr){ cntr.init(this); }, //判断是否已加载指定Controller,返回Boolean hasController:function(name){ return !!this.controllers.get(name); }, //加载并返回指定Controller addController:function(name){ return this.getController(name); } }); }); Ext.onReady(function(){ application=Ext.create('Ext.app.Application',{ name:'MyApp', appFolder:'app', views:['Viewport'], controllers:['MainController'], launch:function(){ Ext.tip.QuickTipManager.init(); this.controllers.addListener('add',this.newControllerAdded,this); Ext.create('Ext.container.Viewport',{ layout:'border', items:[{ xtype:'mainNorth' },{ xtype:'mainSouth' },{ xtype:'mainWest' },{ xtype:'mainCenter' }] }); } }); });
![](http://common.cnblogs.com/images/copycode.gif)
如上代码,我们顺便为Ext.app.Application扩展了两个方法:hasController、addController,为后续编写代码提供一些友好的支持,其具体用途可见代码中的注释。
接下来,我们就可以在需要的地方,进行动态加载Controller了,示例如下:
if(!app.hasController('SysController')){ app.addController('SysController'); }
对于SysController中的store、model、view,只需保持原先的写法,不需要任何更改,在调用app.addController时,会自动加载。
再也不需要你去手工调用Controller的init()方法了,代码就这么简单!
注:本文讨论的话题仅仅是在一个app中如何动态加载多个Controller,而对于Controller中所包含的store、model、view等的动态加载,可能需要再另起一篇来进行讨论,大家有兴趣的话可以翻一下Ext.application.Controller源码中的getStore()、getModel()、getView()等方法的源码,也许能得到一些相应的提示和灵感!
尊重原创,如需转载,请务必注明原文地址:http://www.cnblogs.com/Raoh/archive/2013/04/01/ExtJS_MVC_Controller.html
相关文章推荐
- 如何更优雅的实现ExtJS的前端MVC模式下一个App多个Controller的动态加载
- 如何更优雅的实现ExtJS的前端MVC模式下一个App多个Controller的动态加载
- 如何更优雅的实现ExtJS的前端MVC模式下一个App多个Controller的动态加载
- Android 如何在一个app中动态加载另一个app程序中的类
- Extjs创建多个controller实现多模块MVC动态加载
- android 如何动态的加载类----app插件技术
- Android App 如何动态加载类
- 实现一个图片懒加载插件有多难? – 前端有多难? – SegmentFault
- Android如何优雅地实现ListView加载更多功能(2)
- 前端如何实现异步加载
- asp.net中如何实现动态加载多个可视控件
- 如何用PHP来实现一个动态Web服务器
- 如何使用jquery动态加载js,css文件实现代码
- 如何实现桌面App图标可以动态显示消息数(类似手机上的QQ图标)?
- Qt动态布局,多个窗口使用同一个widget如何实现。
- android:如果手机安装了app则打开一个activity,如果没有安装则去到android market如何在HTML页面实现
- linux如何实现开机加载完图形界面后自动运行自己写的一个程序
- extjs4 mvc 动态加载controller
- (更新版)ExtJS Tree利用json(直接传List TreeNode,不需要转化为JSONArray)在Struts 2实现Ajax动态加载树结点
- 我有一个 APP 创意,如何将其实现?