在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 架构你的应用 第1节 (官方文档翻译)

原文地址:http://docs.sencha.com/extjs/4.0.7/#!/guide/mvc_pt1 【翻译 by 明明如月 QQ 605283073 本章节配套项目代码将在第3节给出】...
  • w605283073
  • w605283073
  • 2016年05月22日 23:31
  • 457

书评:《算法:C语言实现(第1~4部份) 基础知识、数据结构、排序及搜索(原书第3版))

本书细腻讲解计算机算法的c语言实现。全书分为四部分,共16章。包括基本算法分析原理,基本数据结构、抽象数据结构、递归和树等数据结构知识,选择排序、插入排序、冒泡排序、希尔排序、快速排序方法...
  • chengxuyuyan
  • chengxuyuyan
  • 2011年03月28日 16:30
  • 899

Ext JS 6学习文档-第3章-基础组件

基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮,文本框,日期选择器等等 表...
  • jiangbo110119
  • jiangbo110119
  • 2017年03月19日 10:57
  • 1061

Web应用架构

前言:博主大三,其实本来学习的是Android移动端开发。近期有幸来到了阿里的菜鸟网络实习,阴差阳错地安排到了Web应用开发。但是我真的是一点都不懂的啊...就是那种连启动tomcat都会想想的那种。...
  • sinat_34596644
  • sinat_34596644
  • 2016年06月09日 10:20
  • 1509

第4部分:资源

4.1.1  概述   在日常程序开发中,处理外部资源是很繁琐的事情,我们可能需要处理URL资源、File资源资源、ClassPath相关资源、服务器相关资源(JBoss AS 5.x上的VFS...
  • zhoudaxia
  • zhoudaxia
  • 2015年04月17日 14:49
  • 1676

JavaScript高级程序设计学习笔记(1-4)

第一章一个完整的JavaScript应该由下列三个不同部分组成:- ECMAScript:规定了语法、类型、语句、关键字、保留字、操作符、对象 - DOM:针对XML但经过扩展用于HTML的应用程序编...
  • cheneychoi
  • cheneychoi
  • 2016年03月22日 16:45
  • 1341

消息 4104,级别 16,状态 1,第 1 行 无法绑定由多个部分组成的标识符 "f.新增日期"。

select f.新增日期,a.*,e.其他卡源,b.新增激活不同,c.其他卡源并且激活异常,d.总数 from (select HomeAreaID as 归属中心,Reseau as 网格  fr...
  • lzzyxiaopeng
  • lzzyxiaopeng
  • 2011年02月25日 11:09
  • 2452

EXT JS4与EXT JS3的区别

布局 1.ComponentLayout 布局 在响应调整大小的请求时,复杂组件运用ComponentLayout来完成内部元素的定型。比如FieldLayout管理组件中的标签和输入元素的尺寸和...
  • loveforever89
  • loveforever89
  • 2012年05月10日 14:53
  • 1423

【redis 基础篇四】集群的搭建

上篇文章我们主要讲述的是单个redis搭建,本篇则重点讲述redis的搭建过程: 简要过程如下所示: 首先需要安装ruby环境 yuminstall ruby yuminstall ru...
  • huo065000
  • huo065000
  • 2016年07月24日 11:25
  • 199

习题3:编写一个控制台应用程序,完成下列功能。

 编写一个控制台应用程序,完成下列功能。1) 创建一个类,用无参数的构造函数输出该类的类名。2) 增加一个重载的构造函数,带有一个string类型的参数,在此构造函数中将传递的字符串打印出来。3) 在...
  • QS8844_LOTUS
  • QS8844_LOTUS
  • 2010年01月06日 16:23
  • 1998
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在Ext JS 4,第1部分架构您的应用程序
举报原因:
原因补充:

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