网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 网页素材 > AJAX代码 > 正文
ExtJS体系结构
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 11/01/18

返回深入学习ExtJS 2.2开发系列连载教程目录
1.3 Ext
体系结构

在决定使用或学习Ext之后,我们得了解一下Ext的整个体系结构。它有一百多个类,几十个组件和众多的方法,基本上为客户端开发提供了所有必要的功能。从整体上来讲它可以分成四大模块,每个模块又可以分成各个小模块。它采用了分层架构方式,如下图:

从上图中可以看出,Ext的整体架构分成了四个部分:核心,元素,数据,组件。这四大部分采用分层梯形结构。核心功能是为元素扩展、数据处理、UI组件而服务的,它是Ext中最基础最低层的实现。元素扩展则是对javaScriptdom元素进行扩展,使其使用起来更为方便。数据处理是Ext和服务器进行数据传递交互的功能。开发者只要使用UI组件及数据处理的功能就可以完成应用系统的绝大多数任务。下面我们就简要分析其各个模块。

核心功能

核心功能Ext的最底层架构,它提供一些通用的方法或属性。所有上层的类及组件的实现都是建立在它基础之上。核心功能包含事件处理,模板功能,继承特性,原生对象扩展等。就是有这些核心功能Ext组件架构才有着良好的扩展性和伸缩性。这些核心功能还使UI组件有有着良好的易用性、代码重用等。

 Ext即是一个命名空间,也是一个静态类。它提供统一的入口。这个入口实现了如继承(extend),扩展(apply)等功能,同时还对浏览器的兼容做了处理。继承支撑着整个Ext的组件架构。

对于UI的设计,事件机制是必不可少的部分。Ext的事件可以分成浏览器原始事件和自定义事件两部分。对于原始事件,它采用了包裹封装成组件的事件。对于自定义事件,主要是为了扩展组件的目的而设计的。通过组件自定义事件,开发者可以在组件运行的某一时刻扩展组件的功能。达到各自需要的效果。

模板功能也是为重用而设计的,与组件重用不同,它是为了重用HTML片断。组件的重用是通过继承来重用其方法和属性,模板的重用是通过插值的方法来重用相同的HTML标签内容。

在其核心功能,有很大一部分是用来对JavaScript的原生对象或原生方法进行扩展。如FunctionDateStringArray及定时任务等。JavaScript中的九个原生对象中有一部分是直接对于其进行扩展,有一部分是在其基础上构建其的类,如Ext.util.MixedCollection,它就是用来集合的功能,与Array的功能相似但更强大。

这一部分内容将在第346章进行详细地讲解。

数据处理

数据处理是客户端的数据统一操作的接口。不管是从服务器返回的数据还是客户端自行生成的数据。都可以通过该接口来统一操作。这样就为组件的数据操作提供了极大的方便。

Extdata处理分成三部分,store是统一对组件或开发的接口,它的数据是通过proxy从服务器端(包含跨域)或本地的客户浏览器中获取原始数据。从原始数据到store的统一格式的中间还有一步,那就是对于不同的形式的原始数据(xml,json)进行去解析。Reader就是完成解析功能。

通过代理,分析,储存三步,呈现给开发者的数据就如数据库储存的二维表的结构数据一样。有着排序,统计、查询,更新的功能。完全可以把store看成一个客户端的临时数据库。这就是组件对数据的操作提供巨大的方便。

Ext的实现中,它并没有完全把data使用统一的开发的接口。data采用了两维表的形式,其数据应用的是针对于大量的数据处理。Ext针对于如表格、相关的列表(list)这样的需要多行的数据的组件采用了data来进行统一的处理。

对于Tree组件,它采用TreeLoad来单独进行其数据处理,在Form的提交中,它采用直接的URLAjax的请求提交。尽管它们的数据格式和二维表的形式有点差距,但是还是通过一定的方式统一在Data接口。这样所有的数据请求都是通过data来处理,那样对于测试、开发等方面都能提供更大的优势。

这一部分内容主要是在第5章进行分析,对于分散的数据处理,如TreeLoad将在各自己的组件讲解中进行分析。

元素扩展

Ext元素对Dom元素进行功能扩展,它解决Dom元素的兼容、内存泄露等众多问题。它包含dom原生元素本身扩展、CSS Selector实现,动画特效处理及拖曳等方面的内容。这些能完成绚丽多彩的显示效果,也构成组件多彩的基础。

首先Ext元素扩展CSSDom等方面的操作方法。提供了更为强大方便的使用方法。对于Dom的操作包括如何对于元素元素实现创建、插入、删除、复制等方法的操作。对于CSS,它扩展相对、绝对等方面的元素定位操作。还提供了如可视、移动、Scroll等方面对于样式上的操作。

第二在Dom树中查找需要的元素也是元素扩展中要解决的问题。通过document.getElementByIdelement.getElementsByTagName是可以找根据名字或id来找到所需的元素,但是这样不能满足于要求。为了对于元素的查找能如Css Selector一样方便,Ext也提供了CSS Selector的实现,用来查找Dom元素。

第三拖曳是原生Dom元素所没有功能,它是事件与元素的结合体。通过拖曳,使得web应用系统能如桌面软件一样有点强大的易用性同进美妙其伦。很多功能的完成能通过简单的拖曳来实现。

第四动画是javascript中最吸引人的地方。通过Ext的动画特效函数,我们通过只要一行简单的调用就可以实现动态十足的效果。同时动画特效也内致到元素的创建、销毁等可视方面的操作函数中,只要通过一个简单的参数配置就可以实现元素的动画特效。

第五为了实现Ext元素数组特性(如同jquery对象一样),它还在Ext元素的基础上构建一个复合元素。专门用来对一组元素进行统一的同类的操作。Ext元素采用了flyWeight模式来提供性能同时还采用垃圾回收机制处理元素的内存泄露问题。

这一部分内容将在第78910111213章行详细地分析。

UI组件

ExtUI组件是一个很奇妙的东西,它的实质就是一个HTML标签所表现的区域,然而它使静态标签变成动态的有生命的周期,每个组件都有着其自身的特性和生命周期。同时每个组件都有着良好的扩展性和易用性。

Ext组件并不是一个个分散的结构,它的采用继承方式紧密关联的的倒树结构。它把组件的共性的东西抽象出来为父类,这个类实现了创建—>渲染—>销毁的生命周期。同时其基础上又提供了另外的抽象类来实现UI组件的形状及可视化操作。这就是UI组件的组件模型。

在基于这种UI形式的设计中,所有UI共性是其都有着着,把这个生命周期的操作抽象成组件类(Component类)。每个继承它的组件都有着自己的生命周期。在设计组件类时,尽量地通用,给每个组件生命周期中都扩展私有的功能的能力。UI的最终目标还是显示出来,达到可视的效果,但是有的组件从渲染之后其形状就不会发生变化(如大小,位置等),于是把这个有形的或者说需要进行可视渲染的功能抽象到另外一个类中(BoxComponent类),它继承于组件类,同时它做为所有需要进行可视渲染的组件的基类。

组件模型中的BoxComponent类并不能处理其中间排放多个其它的组件。而且这是一个经常用到功能,于是Ext给出了容器模型,把容器的功能抽象到Container类,这个类继承于BoxComponen,其内部可以包括其它的组件,这些其它的组件可以是任何的组件。包含在容器的组件不是无序地排放着,而是要按着一定的布局来摆放。这就有容器布局的概念。

Container类是所有容器的基类,在container基类的基础,它提供一个使用频率最高的组件panel类。Panel可以翻译成平板,面板,也就是排放东西的一个平面。Panel是容器最重要的应用,它为组件的排放布局提供了统一的方法或属性。

Ext中的组件继承树中ComponentàBoxComponenàContaineràPanelExt的组件的主干,也是其支柱。它融合了组件模型和容器模型两大模型的应用。这四个类的继承链方式构建了Ext组件的骨架。在这一主干的旁还有许多其它的组件或继承方式等。

  • 上一篇资讯: 为什么要学习ExtJS
  • 下一篇资讯: 如何学习ExtJS
  • 网学推荐

    免费论文

    原创论文

    浏览:
    设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
    版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
    湘ICP备09003080号