2012年7月4日星期三

ExtJS 4 MVC架构讲解

ExtJS 4 MVC架构讲解

  • 本文地址 http://www.showframework.com/2012/07/extjs-mvc-architecture/
  • 本文PDF下载

大规模客户端应用通常不好实现不好组织也不好维护,因为功能和人力的不断增加,这些应用的规模很快就会超出掌控能力,ExtJS 4 带来了一个新的应用架构,不但可以组织代码,还可以减少实现的内容
新的应用架构遵照一个类MVC的模式,模型(Models)和控制器(Controllers)首次被引入。业界有很多种MVC架构,基本大同小异,ExtJS 4的定义如下:

  • Model模型 是字段和它们的数据的集合,例如User模型带有usernamepassword字段,模型知道如何持久化自己的数据,并且可以和其他模型关联,模型跟ExtJS 3 中的Record类有点像(区别是,Record只是单纯的扁平结构,而Model可以nest),通常都用在Store中去展示grid和其他组件的数据
  • View视图 是组件的一种,专注于界面展示 - grid, tree, panel 都是view
  • Controllers控制器 一个安放所有使你的app正确工作的代码的位置,具体一点应该是所有动作,例如如何渲染view,如何初始化model,和app的其他逻辑

这篇教程中将创建一个简单的管理用户数据的例子,做完这个例子,你会学会如何用ExtJS 4的架构把简单的应用组织到一起。
应用架构是关于提供结构和一致性,是关于真实的类和框架代码的,遵守约定可以带来很多重要的好处:

  • 每个应用都是相同的工作方式,所以你只需要学习一次
  • 可以很容易的共享代码,因为所有应用工作模式都一样
  • 可以创建属于自己的混淆的版本用于发布

File Structure文件结构

ExtJS 4 应用都遵循一个统一的目录结构,每个应有都相同。详情可以参见ExtJS 4 入门,MVC中,所有类都放在app目录里面,这个目录可以有子目录,代表的是命名空间(一个子目录对应一个命名空间),使用不同的目录存放views,models,controllers,stores,当我们完成例子的时候,目录结构应该和下面截图一样:

继续阅读
TAG: