Ext JS 4 架构你的应用 第1节 (官方文档翻译)

原文地址：http://docs.sencha.com/extjs/4.0.7/#!/guide/mvc_pt1

【翻译 by 明明如月 QQ 605283073 本章节配套项目代码将在第3节给出】

 上一篇： 

Extjs MVC架构 (官方文档翻译)【带源码】

一个应用程序的可扩展性、可维护性和灵活性主要取决于应用程序的体系结构的质量。

不幸的是，它（可扩展性、可维护性和灵活性）往往是作为事后的补救措施。

概念和原型被转化为大量的应用程序，并且示例代码被复制并粘贴到许多应用程序上。

你可能会因为你在项目开始时看到的快速进展而感到自豪。

然而，虽然节省了时间，但是在以后不得不花费精力去维护它。往往需要花费更多的时间来规划和重构该项目。

准备写一个坚实的架构的方法最好是遵循一定的惯例是在实际开发之前定义应用程序的视图，模型，存储和控制器。

在这篇文章中，我们将讨论一个流行的应用程序，并讨论我们如何为架构一个用户界面打下一个坚实的基础。

代码组织

应用架构因为提供了实际的类库和框架代码，为我们提供架构和一致性。

构建一个好的架构可以带来以下若干好处：

（1)每个应用工作原理都是类似的，因此我们学会个就触类旁通了。

（2）因为他们工作方式都一样，这样我们就可以很容易的在不同应用间共享代码。

（3）你可以使用Ext JS构建工具来创建你应用产品的优化版本。

 

 

在Ext JS 4中，我们定义了一些规则。最明显的是一个统一的目录结构。这个简单的结构把所有的类放入应用程序文件夹中，文件夹又包含子文件夹来命名您的模型、视图、控制器和存储。

 

Ext JS 4提供了如何组织你的应用程序的最佳实践，但是我们也可以调整建议的命名文件和类规范。

例如，你可以决定你的项目是否添加一个后缀或者前缀例如“ “Controller,” 下的“Users”可以写成“UsersController.” 

 

在这种情况下，记住添加后缀的控制器文件和类。

重要的是，在你开始编写应用程序和始终遵循它们之前你定义的这些规范。

最后，当您可以调用您的类，我们强烈建议遵循我们的名称和结构的文件夹（控制器，模型，存储，视图）。

这将确保你得到使用我们的SDK工具的beta版本进行优化。

凸显平衡

Views（视图）

开始要对应用UI视图进行切分。设想如果我们使用Ext JS去重构 潘多拉应用。我们的UI设计师可能会给出如下的模型：

我们要实现的是一个视图之间的平衡过于颗粒状和过于通用。

让我们先看如果我们把我们的用户界面划分为太多的视图会出现什么现象。

 

如果过UI切分成太多的小视图，对于管理、引用、和在控制器中控制视图都非常困难。

还有，因为每个视图都有自己的一个文件，对查找UI的片断或者定义视图逻辑来说，创建太多的视图带来很多麻烦。

另外一方面，我们不想我们的视图太通用，那样将影响我们修改的灵活性。

此方案中，每个视图都过于简化。

当定义多个视图部分的视图逻辑，视图类将承担太多的职责，导致视图类难易维护。

另外。当设计师想改变UI设计布局时，我们将不得不忙于乏味的，重构视图定义和逻辑。

最佳平衡是可以比较轻松自如的调整页面视图，而不需要每次都重构它们。例如：我们把广告作为单独的视图，这样我们就可以随意调整它的位置甚至移除掉此模块。

 

 

Models（模型）

既然我们已经有了视图的基本结构。现在需要考虑模型了。通过对我们的UI动态数据的观察我们可以得到应用的模型拆分的灵感。

我们决定用两个模型:Song（歌曲）和Station（站点）. 

我们也可以多定义另外两个类： Artist（艺术家） 和 Album（唱片集）.

然而和视图一样我们定义模型时也不想定义的太细小化。因此，我们也没有必要将艺术家和唱片集信息分开，因为应用也不允许用户根据艺术家来选择歌曲。

而是通过站点来组织数据，歌曲是核心，而艺术家和唱片集只是歌曲的属性。这就意味着我们可以将歌曲、艺术家以及唱片集数据定义在一个模型中。

这大大简化了我们应用的数据划分。我们也简化了不得不在服务器端实现的API，因为我们不需要加载单独的艺术家或者唱片集数据。

由此，我们决定用两个模型:Song（歌曲）和Station（站点）. 

 

Stores（存储）

我们已经搞定了模型现在我们要开始考虑存储：

找出我们需要的不同的存储比较容易。一个好的策略是确定页面的所有数据绑定组件。

在此例子中，我们有一个含有用户喜欢站点的列表，一个带有最近播放过歌曲的滚动条，一个显示搜索结果的搜索框。这些视图都需要绑定数据。

Controllers（控制器）

我们有两个控制器 SongController 和一个StationController. Ext JS 4 允许我们使用一个控制器来响应多个视图.

我们的StationController 将用来处理创建新站点和加载数据来显示StationsList（站点列表）视图. 

SongController主要用来管理SongInfo （歌曲信息）视图和RecentSong （最近播放的歌曲）以及用户的 喜欢、不喜欢、暂停和跳过。

控制器可以通过过滤和监听应用事件来相互交互。

我们也可以创建其他两个Controllers, 一个用来管理重放一个用来管理站点,我认为我们实现了很好地功能划分。

两次测量，一次剪裁

我希望分享我们在写代码之前设计好应用架构的好处。

我们发现仔细思考应用的具体细节能够帮我们构建更加灵活和可维护的架构。