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

翻译 2012年03月29日 23:14:02

在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的商店以及用户喜欢的行动,不喜欢,暂停和跳过歌曲。发射和应用程序事件监听控制器可以互相交流。虽然我们可以创建额外的控制器,管理播放和搜索站另一个,我想我们已经找到了一个好职责分离。

测量两次,一旦切断

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

举报

相关文章推荐

您的应用程序架构中的Ext JS 4,第2部分

您的应用程序架构中的Ext JS 4,第2部分 在先前的Ext JS建筑的文章中,我们探讨了如何构建一个潘多拉风格的应用程序,使用Ext JS的。我们看看在模型 - 视图 - 控制器架构,以及如...

【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码

在本文,在展示如何编写Ext JS 6通用应用程序代码以使控制器和视图模型能适用于特定视图又是共享的。 本文的重点是通用应用程序,而不是只能用于纯classic或纯Modern的应用程序。特别是,a...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

将Ext JS 5应用程序导入Web项目中

将Ext JS 5应用程序导入Web项目中 相关资料: http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html...

Ext JS 6开发实例(二) :使用CMD创建应用程序

由于Ext JS 6将原来的Ext JS和Sencha Touch合并为一个框架,因而在使用CMD来创建应用程序前,需要考虑清楚你是要创建一个通用应用程序,还是仅仅只是针对桌面或移动设备的应用程序。要...

ExtJS Web应用程序开发指南(第2版)(针对Ext JS 4.0更新)

《ExtJS Web应用程序开发指南(第2版)》前言ExtJS的前身是YUI(Yahoo User Interface)。经过不断发展与改进,ExtJS现在已经成功发布了4.0版本,并且成为构建RIA...

【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测(App Inspector)

作为一个免费的Chrome扩展,Sencha应用程序监测有助于你通过以下方式去调试应用程序: 组件监测:快速、轻松地导航组件树,在DOM中高亮显示组件,且可以查看他们的属性。 存储...

【翻译】使用Ext JS设计响应式应用程序

在当今这个时代,用户都希望Web应用程序无论在形状还是大小上,既能在桌面电脑,也能在移动设备上使用。使应用程序能适应不同的需求渐成趋势。幸运的是,Ext JS 5提供了所有支持应用程序以符合任何屏幕尺...

【翻译】在Ext JS应用程序中使用自定义图标

正如我所做的,你喜欢Ext JS 4.2的glyphs(字形)属性么?对于glyphs,可以实现从字体中创建图标。使用图标字体的优势是,他们是矢量的,因此永远不会失真,而且可以在不使用Photosho...

【翻译】在Ext JS 5应用程序中如何使用路由

Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的、企业级的Web应用程序。MVVM和双向数据绑定为开发人员承担了大量的繁重工作。在Ext JS 5种,另一个新特性就是路由,它可以在...

Ext JS 6应用程序Build后出现“c is not a constructor return new c(a[0])”的处理

Ext JS 6应用程序Build后出现“c is not a constructor return new c(a[0])”的处理
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)