使用E xt JS 4搭建APP架构（第一部分）

译自：http://docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt1

应用程序的可扩展性，可维护性和灵活性，主要取决于应用程序架构设计。不幸的是，一个项目通常在开发了很久之后才会想起这么回事。我们常常直接将一些实验性的代码放到应用程序中，或者在多处复制粘贴示例代码。你也很有可能这么做，因为在一个项目的初期这么干的话，你会感觉到开发速度很快。

但是，相比在维护，扩展或是后期重构代码所花费的时间，之前所节省的这些时间就显得很少。设计一个强健的架构更应该遵循这样的方式，在实现应用前，按照约定规则，定义应用程序的视图、模型、存储和控制器。在这篇文章中，我们将一起来看看一个受欢迎的web应用，然后讨论，为如何架设用户界面来打下基础。

代码组织

应用程序的体系结构就是提供有关类和框架的架构和一致性。设计一个好的体系结构会带来一些好处：

• 每个应用程序的运行方式相同，所以你只需要学习一次
• 可以很容易地在应用程序之间共享代码，因为他们都以同样的方式工作
• 您可以使用Ext JS构建工具来创建优化压缩版的应用程序，供上线使用

使用Ext JS 4，构建应用程序时要遵循约定的潜规则 - 最明显的一点就是有一个统一目录结构。在这个简单的结构中，所有类放入app文件夹，该文件夹依次包含了模型、视图、控制器和存储子文件夹，这些子文件夹作为命名空间的一部分。

虽然Ext JS 4在如何构建您的应用程序方面提供了最佳实践，但是您还是可以修改ext建议的有关文件和类的命名规则。例如，你想在你的控制器的名称加上"Controller”后缀，例如"Users"变成"UsersController".如果你有这种需求，记得保证在控制器的文件夹和类名都加上后缀。还有很重要的，你必须在写code之前就定好这些命名规则，并一直遵循。虽然你可以给你的类起各种名字，不过我们强烈建议您按照约定命名文件夹 (controller, model, store, view).这将确保你可以使用sdk工具来优化和build。

MVC的各个模块

视图Views

把应用程序的UI划分到视图是一个好的开始。很多时候，你只有一些设计师画的线框和UI图。想象一下，我们被要求使用Exj JS，按照UI设计师给出的图形重新构建非常有吸引力的应用程序。

我们要做的是在视图设计得过于详尽和过于笼统之间取得平衡。我们试着看看如果把视图分割得太小会出现什么情况。

把界面分割成多个小视图会使得我们在控制器中难以管理、引用和控制。同时，因为每个视图对应一个自己的文件，创建太多的视图会导致难以定位某块UI的视图文件或某个视图逻辑。

另一方面，我们也不想把视图分割得太笼统，因为这会影响到程序的灵活性。

在这种视图设计下，每个视图都显得太简单。当某些视图需要自定义视图逻辑的时候，某个视图最后要负责太多逻辑，从而变得难以维护。还有，当设计师要改变UI布局时，我们要重构我们视图和视图布局的定义，这是很乏味的。

合理平衡地设计使得我们很容易在页面上重新布局我们的视图，而不用每次都重新构建。例如，我们想要增加单独的广告视图，或者日后想要干掉它是很简单的。

在这个版本中，我们按照每个视图角色分割我们的界面。一旦你对这些视图有一个总体的思路，你很容易拼凑出你的界面，同时真正实现这些视图的时候，你也可以在细节处作调整。有时候你可能发现某两个视图应该合成一个，或者一个视图定义的过于笼统，应该分割为多个视图，虽然很纠结，但至少我们现在有了一些基础了。

模型Models

现在，我们有了基本的视图架构，是时候看看我们的模型。通过观察界面中涉及的不同类型的动态数据，我们可以得到应用程序所需的各种数据模型。

我们决定只是用两个数据模型 — Song (音乐) 和 Station (电台)。当然，我们还可以多定义两个模型: Artist (歌手) 和 Album (专辑)。不过，我们只是要配合我们的视图，不想在模型方面定义的太细。在这种情况下，我们不需要分割artist和album，因为我们的程序不允许用户通过一个歌手去选择一首歌曲。相反，这些数据时由station来组织，歌曲是中心，歌手和专辑都是歌曲的属性。这意味着我们可以把歌曲、歌手和专辑的数据整合到一个模型中。这大大的简化了程序的数据结构，当然也简化了后台的设计，以为内我们不需要单独的加载歌手和专辑。总结来说，这个案例中我们只需要使用两种模型——歌曲和电台。

存储（数据仓库）Stores

我们已经考虑过我们程序要使用的模型，同样我们也要考虑我们的存储。

分析你需要的各种存储是比较容易的。有一个好的策略，就是所存储的数据都绑定在页面上的某些组件。在我们的案例中，我们需要一个展示用户最喜欢的电台列表，一个显示最近播放歌曲的滚动面板和可以展示搜索结果的一个搜索框。这些界面组件都需要一些数据绑定。

控制器Controllers

通过控制器，你可以有很多方式来分发程序的职责。我们开始考虑我们案例中所需的控制器吧。

这里有两个基本控制器——SongController 和 StationController。Ext JS 4允许你在一个控制器里面同时控制多个视图。StationController将创建电台，同时加载用户喜爱电台到电台列表视图中。SongController 将负责管理歌曲信息视图和最近播放歌曲的存储，还有用户的操作，包括暂停、下一首、喜欢等。控制器可以相互通信，通过触发和监听事件。当然我们可以创建额外的控制器，例如管理回放的控制器，搜索电台的控制器。我想我们已经找到一个好的方式来分担程序的各个职能。

动手前要多思考

在写code之前规划好程序结构体系是很重要的，我希望这次有关这些重要性的分享会帮助到您。我觉得关于上面这个应用程序的详细讨论会帮助你构建更加灵活和易维护的程序结构。