文章最后将与大家一起讨论作者在运用过程中碰到的问题以及解决办法,并提出 MVC 需要进一步完善的地方。
Ext JS 4 目前是 Sencha 的产品,4.x 的正式版本号是 4.0.7。Ext JS 4 提供商业版本,但如果您的项目是开源的,则可以">免费使用 Ext JS 4。Ext JS 的论坛目前非常活跃;Ext JS 还在不但地升级改进,据 Sencha 官方统计,使用 Ext JS 的开发者数目在一百万以上。
Ext JS 4 与之前版本的比较
渲染效率提高
所有类都经过调优,包括最影响渲染效率的布局引擎重写。
命名空间
命名空间是 Ext JS 4 的 MVC 的基础,自此 Ext JS 类能按作用域分开存放了。.NET 或 Java 开发者应该熟悉命名空间带来的好处:命名空间让全类名映射到类文件路径变得很容易,将类按作用域分文件夹存放使得类更容易管理。以 MVC 为例,Ext JS 类将按作用域:模型、视图和控制器分为三类,分别存放于对应文件夹中。
按需加载类
清单 1. 按需加载类的例子
Ext.define('MyNamespace.Cat', { requires: ['MyNamespace.BabyCat'], giveBirth: function() { // 实例化 BabyCat 之前,必须加载 BabyCat 的类定义。通过设置“requires”属性,能实现类的按需加载 return new MyNamespace.BabyCat(); } });
这个特性其实是基于全新设计的类系统的,详见下面的小结。不同于先前版本:即使用到 Ext JS 框架中很少一部分单元,Ext JS 也会加载所有的框架,按需加载只加载需要的类。因此按需加载类为 JS 优化和减少内存消耗提供了一个有效途径。Sencha 为此还提供了 SDK 工具对 JS 代码进行 Minify,在部署前运行 minify 对 JS 代码最小化后,将得到一个最小 JS 集合。
全新的类系统 由于篇幅的限制,具体请参阅官方文档 Class System,其中详细描述了怎样用 Ext JS 4 的方式定义类,以及错误处理和调试
MVC 架构 用 Ext JS 4 之前的版本写大的客户端应用,您会发现越来越“难”,您会发现有四难:难写、难读、难维护、难扩展。随着越来越多的功能添加进来,代码越来越失控,一个 JS 文件几千行可能很普遍了,当然也不排除代码组织得很好易于扩展的情况,但这些都需要开发者付出额外的开发代价去组织自己的架构。从 Ext JS 4 开始有了自己的 MVC 架构,开发者不必再付出这种额外的代价也能写出漂亮的代码。Ext JS 4 对 MVC 有自己的定义,以下定义来自 Sencha 官网的文档:
Model
:一组字段的集合以及它们对应的数据(例如:“User”类 model 有“username”和“password”字段),通过 data 包 (store,proxy 等 )Model 能序列化自己,并能通过关联关系从一个 Model 导航到另一个 Model。Model 的工作原理类似 Ext JS 3 中的 Record 类,通常结合 Store 为表格控件或其它控件提供显示数据。
View
:任意组件,如 Grid, Tree 和 Panel 都是视图。
Controllers
:在这里写所有的逻辑代码:如渲染视图、实例化模型、加载并初始化其它控制器等。
MVC 的概念很简单,但实际项目中运用 MVC 模式将代码组织起来会不会没那么简单?答案在后面的章节“介绍开发 Ext JS4 的利器 : Sencha Architect 2”中,该章节会详细介绍怎样用该工具开发 MVC 模式的 Ext JS 程序。