在Ext JS 4，第1部分架构您的应用程序

在Ext JS 4，第1部分架构您的应用程序

应用程序的体系结构的质量主要取决于应用程序的可扩展性，可维护性和灵活性。不幸的是，它常常被视为一种事后。概念证明和原型变成大规模的应用，例如代码复制并粘贴到许多应用程序的基础。你可能会想这样做，因为你在一个项目开始的快速进步，。

然而，所节省的时间会相对比较低维持，规模化和经常重构你的应用程序，在项目后期花费的时间。一种方法，以更好地准备写了坚实的架构是遵循一定的惯例和实际执行之前定义应用程序的意见，模型，商店和控制器。在这篇文章中，我们将看看在流行的应用，并讨论我们如何建筑师的用户界面来创建了坚实​​的基础。

代码组织

应用程序架构提供结构和一致性，因为它是实际的类和框架代码是多少。建立一个良好的体系结构释放一些重要的好处：

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

在Ext JS 4，我们有明确的约定，你应该考虑以下时，构建您的应用程序 - 最引人注目的是统一的目录结构。这个简单的结构中又包含子文件夹的命名空间的模型，视图，控制器和商店的应用程序文件夹，放入所有类别。

而Ext JS的4提供了关于如何构建您的应用程序的最佳做法，命名您的文件和类的修改建议公约的房间。例如，您可能会决定，在你的项目“控制器”，如“用户”变为“UsersController。”在这种情况下要添加到您的控制器的后缀，记得总是控制器文件和类添加一个后缀。重要的是你这些公约定义你开始写你的应用程序之前，始终跟着他们。最后，当你可以打电话给你的类，不管你想要，我们强烈建议后，我们对公约的名称和文件夹结构（控制器，模型，存储，查看）。这将确保你得到一个优化的建立使用我们的SDK工具测试。

平衡

意见

最多的应用程序的UI到的意见分裂是一个很好的地方开始。通常，您提供的线框和设计师创造的UI样机。试想一下，我们要求重建（非常有吸引力的）潘多拉应用程序使用Ext JS的，并给予我们的UI设计师下面的样机。

我们要实现的是一个过于颗粒过于笼统的意见之间的平衡。让我们开始看到会发生什么，如果我们分成太多的意见，我们的UI。

分裂了用户界面到太多的小意见，将很难管理，参照和控制的意见，在我们的控制器。此外，将在它自己的文件，因为每一个观点，创造过很多意见，可能使其很难找到一块的UI或视图逻辑定义的视图文件。

另一方面，我们不希望我们的意见是过于笼统，因为它会影响我们的灵活性，改变的事情。

在这种情况下，我们的意见，每个人已过于简化。当一个视图的几个部分需要自定义视图逻辑，视图类最终将有太多的责任，在视图类越来越难保持。此外，当设计师改变UI的安排，他们的头脑，我们将最终不得不重构我们的视图定义和视图逻辑可以得到乏味。

取得适当的平衡时，我们可以很容易地重新排列而无需重构他们每次在页面上的意见。例如，我们想使广告单独的视图，所以我们可以很容易地移动它周围甚至删除。

在这个版本中，我们每个视图的角色分开，我们的UI。一旦你有一个总体思路的意见，这将使你的UI，你仍然可以调整粒度，当你实际执行它们。有时你会发现，两种观点应该成为一个观点是过于笼统，应分割成多个视图，但它有助于启动了一个良好的基础。我认为我们已经做了，在这里。

模型

现在，我们有我们的意见，在地方的基本结构，它的时间看模型。通过我们的UI中的动态数据类型，我们可以得到我们的应用程序所需的不同型号的想法。

我们已经决定使用唯一的两款车型 - 宋站。我们可以定义两个模式被称为艺术家和专辑。然而，正如与视图，我们不希望太定义我们的模型时颗粒。在这种情况下，我们没有分开，因为应用程序不允许用户选择一个特定的歌曲，由一个给定的艺术家艺术家和专辑信息。相反，数据站举办，这首歌是中心点，艺术家和专辑歌曲的属性。这意味着我们能够结合成一个模型的歌曲，艺术家和专辑中的数据。这大大简化了我们的应用程序的数据端。它还简化了，我们要实现服务器端的API，因为我们没有加载个别艺术家或专辑。总结这个例子，我们就只有两款车型 - 宋站。

商店

现在，我们认为我们的应用程序将使用的模型，让做相同的商店。

搞清楚你需要不同的商店往往是相对比较容易。一个很好的策略是，以确定所有的数据绑定页面上的组件。在这种情况下，我们必须与所有用户的喜爱的电台列表，最近播放的歌曲的滚动，和一个搜索栏将显示搜索结果。这些意见都将需要绑定到店。

控制器

有几种方法可以分发到您的应用程序的控制器应用程序的责任。让我们开始思考我们在这个例子中，需要不同的控制器。

在这里，我们有两个基本控制器 - SongController的和1 StationController的。Ext JS的4可以让你有一个控制器，可以在同一时间控制的几点看法。我们StationController将处理逻辑创造新的车站，以及装载到StationsList视图用户的喜爱的电台。将采取的SongController护理管理的SongInfo看法和RecentSong的商店以及用户喜欢的行动，不喜欢，暂停和跳过歌曲。发射和应用程序事件监听控制器可以互相交流。虽然我们可以创建额外的控制器，管理播放和搜索站另一个，我想我们已经找到了一个好职责分离。

测量两次，一旦切断

我希望规划编写代码之前，您的应用程序架构的重要性，共享我们的想法是有帮助的。我们发现，通过应用程序的细节时，帮助你建立一个更加灵活和维护架构。