1.3 Ext体系结构
在决定使用或学习Ext之后,我们得了解一下Ext的整个体系结构,
skechers shoes online。它有一百多个类,几十个组件和众多的方法,基本上为客户端开发提供了所有必要的功能。从整体上来讲它可以 分成四大模块,每个模块又可以分成各个小模块。它采用了分层架构方式,如下图:
从上图中可以看出,Ext的整体架构分成了四个部分:核心,元素,数据,组件。这四大部分采用分层梯形结构 。核心功能是为元素扩展、数据处理、UI组件而服务的,它是Ext中最基础最低层的实现。元素扩展则是对j avaScript中dom元素进行扩展,使其使用起来更为方便。数据处理是Ext和服务器进行数据传递交 互的功能。开发者只要使用UI组件及数据处理的功能就可以完成应用系统的绝大多数任务。下面我们就简要分析 其各个模块。
核心功能
核心功能是Ext的最底层架构,它提供一些通用的方法或属性。所有上层的类及组件的实现都是建立在它基础之 上。核心功能包含事件处理,模板功能,继承特性,原生对象扩展等。就是有这些核心功能,Ext组件架构才有 着良好的扩展性和伸缩性。这些核心功能还使UI组件有有着良好的易用性、代码重用等。
Ext即是一个命名空间,也是一个静态类。它提供统一的入口。这个入口实现了如继承(extend),扩展 (apply)等功能,同时还对浏览器的兼容做了处理。继承支撑着整个Ext的组件架构。
对于UI的设计,事件机制是必不可少的部分。Ext的事件可以分成浏览器原始事件和自定义事件两部分。对于 原始事件,
skechers outlet,它采用了包裹封装成组件的事件。对于自定义事件,主要是为了扩展组件的目的而设计的。通过组件自定义事件 ,开发者可以在组件运行的某一时刻扩展组件的功能。达到各自需要的效果。
模板功能也是为重用而设计的,与组件重用不同,它是为了重用HTML片断。组件的重用是通过继承来重用其方 法和属性,模板的重用是通过插值的方法来重用相同的HTML标签内容。
在其核心功能,有很大一部分是用来对JavaScript的原生对象或原生方法进行扩展。如Functio n、Date、String、Array及定时任务等。JavaScript中的九个原生对象中有一部分是 直接对于其进行扩展,有一部分是在其基础上构建其的类,如Ext.util.MixedCollectio n,它就是用来集合的功能,与Array的功能相似但更强大。
这一部分内容将在第3、4、6章进行详细地讲解。
数据处理
数据处理是客户端的数据统一操作的接口。不管是从服务器返回的数据还是客户端自行生成的数据。都可以通过该 接口来统一操作。这样就为组件的数据操作提供了极大的方便。
Ext的data处理分成三部分,store是统一对组件或开发的接口,它的数据是通过proxy从服务器 端(包含跨域)或本地的客户浏览器中获取原始数据。从原始数据到store的统一格式的中间还有一步,那就 是对于不同的形式的原始数据(xml,json等)进行去解析。Reader就是完成解析功能 。
通过代理,分析,储存三步,呈现给开发者的数据就如数据库储存的二维表的结构数据一样。有着排序,统计、查 询,更新的功能。完全可以把store看成一个客户端的临时数据库。这就是组件对数据的操作提供巨大的方便 。
在Ext的实现中,它并没有完全把data使用统一的开发的接口。data采用了两维表的形式,其数据应用 的是针对于大量的数据处理。Ext针对于如表格、相关的列表(list)这样的需要多行的数据的组件采用了 data来进行统一的处理,
skechers shape ups。
对于Tree组件,它采用TreeLoad来单独进行其数据处理,在Form的提交中,它采用直接的URL 的Ajax的请求提交。尽管它们的数据格式和二维表的形式有点差距,但是还是通过一定的方式统一在Data 接口。这样所有的数据请求都是通过data来处理,那样对于测试、开发等方面都能提供更大的优 势。
这一部分内容主要是在第5章进行分析,对于分散的数据处理,如TreeLoad将在各自己的组件讲解中进行 分析。
元素扩展
Ext元素对Dom元素进行功能扩展,它解决Dom元素的兼容、内存泄露等众多问题。它包含dom原生元素 本身扩展、CSS Selector实现,动画特效处理及拖曳等方面的内容。这些能完成绚丽多彩的显示效果,也构成组件多彩的 基础。
首先Ext元素扩展CSS、Dom等方面的操作方法。提供了更为强大方便的使用方法。对于Dom的操作包括 如何对于元素元素实现创建、插入、删除、复制等方法的操作。对于CSS,它扩展相对、绝对等方面的元素定位 操作。还提供了如可视、移动、Scroll等方面对于样式上的操作。
第二在Dom树中查找需要的元素也是元素扩展中要解决的问题。通过document.getElement ById或element.getElementsByTagName是可以找根据名字或id来找到所需的 元素,但是这样不能满足于要求。为了对于元素的查找能如Css Selector一样方便,Ext也提供了CSS Selector的实现,用来查找Dom元素。
第三拖曳是原生Dom元素所没有功能,它是事件与元素的结合体。通过拖曳,使得web应用系统能如桌面软件 一样有点强大的易用性同进美妙其伦,
shape up shoes。很多功能的完成能通过简单的拖曳来实现。
第四动画是javascript中最吸引人的地方。通过Ext的动画特效函数,我们通过只要一行简单的调用 就可以实现动态十足的效果。同时动画特效也内致到元素的创建、销毁等可视方面的操作函数中,只要通过一个简 单的参数配置就可以实现元素的动画特效。
第五为了实现Ext元素数组特性(如同jquery对象一样),它还在Ext元素的基础上构建一个复合元素 。专门用来对一组元素进行统一的同类的操作。Ext元素采用了flyWeight模式来提供性能同时还采用 垃圾回收机制处理元素的内存泄露问题,
shape up skechers。
这一部分内容将在第7,8,9,10、11、12、13章行详细地分析。
UI组件
Ext的UI组件是一个很奇妙的东西,它的实质就是一个HTML标签所表现的区域,然而它使静态标签变成动 态的有生命的周期,每个组件都有着其自身的特性和生命周期。同时每个组件都有着良好的扩展性和 易用性。
Ext组件并不是一个个分散的结构,它的采用继承方式紧密关联的的倒树结构。它把组件的共性的东西抽象出来 为父类,这个类实现了创建―>渲染―>销毁的生命周期。同时其基础上又提供了另外的抽象类来实现UI组件的 形状及可视化操作。这就是UI组件的组件模型。
在基于这种UI形式的设计中,所有UI共性是其都有着着,把这个生命周期的操作抽象成组件类(Compon ent类)。每个继承它的组件都有着自己的生命周期。在设计组件类时,尽量地通用,给每个组件生命周期中都 扩展私有的功能的能力。UI的最终目标还是显示出来,达到可视的效果,但是有的组件从渲染之后其形状就不会 发生变化(如大小,位置等),于是把这个有形的或者说需要进行可视渲染的功能抽象到另外一个类中(BoxC omponent类),它继承于组件类,同时它做为所有需要进行可视渲染的组件的基类。
组件模型中的BoxComponent类并不能处理其中间排放多个其它的组件。而且这是一个经常用到功能, 于是Ext给出了容器模型,
skechers women,把容器的功能抽象到Container类,这个类继承于BoxComponen,其内部可以包括其它的组 件,这些其它的组件可以是任何的组件。包含在容器的组件不是无序地排放着,而是要按着一定的布局来摆放。这 就有容器布局的概念。
Container类是所有容器的基类,在container基类的基础,它提供一个使用频率最高的组件p anel类。Panel可以翻译成平板,面板,也就是排放东西的一个平面。Panel是容器最重要的应用, 它为组件的排放布局提供了统一的方法或属性。
在Ext中的组件继承树中ComponentàBoxComponenàContaineràPanel是 Ext的组件的主干,也是其支柱。它融合了组件模型和容器模型两大模型的应用。这四个类的继承链方式构建了 Ext组件的骨架。在这一主干的旁还有许多其它的组件或继承方式等。
本文来自:.Net中文社区(
www.aspxcs.net) 详细出处参考:
http://www.aspxcs.net/HTML/094538320.html