（计算机科学与技术专业论文）web设计开发过程中ext框架的应用与研究.pdf

中文摘要 摘要 随着i n t e m e t 的迅猛发展，网络规模的迅速扩大，网站技术的广泛应用，网络 用户对富客户端的要求也不断增高，从而提出了富界面应用程序r i a ( m c h i n t e r f a c ea p p l i c a t i o n s ) 。传统网络程序的开发是基于页面的、服务器端数据传递的 模式，把网络程序的表示层建立于h t m l 页面之上，而h t m l 是适合于文本的，传 统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求 了，而r i a 的出现正是为了解决这个问题。 e x t 是一个创建丰富互联网应用程序的跨浏览器的j a v a s c r i p 库。它包含：高效 率、可定制用户界面的小部件，设计漂亮的、可扩展的组成部件模型，容易使用 的、直观的应用程序接口。基于纯h t m l c s s + j s 技术，提供丰富的跨浏览器u i 组件， 灵活采用j s o n x m l 为交换格式，使得服务端的负荷真正减轻，从而达到客户端的 r i a 应用。 本文旨在研究e x t 框架的工作原理及与其他主流w e b 开发框架的整合，对其功 能与工作特性进行了详细的研究。根据所做的研究进行了系统的整体设计，框架 的选择与整合，编码实现到工程发布，最后实现了图书管理系统。 本文首先对e x t 框架进行了详细的介绍，并分析和研究了其基础构成与实现机 制。然后借鉴了对基于j 2 e e 架构w e b 开发的项目经验，成功引进了s t r u t s 、h i b e r n a t e 、 s p r i n g - - - 大框架，并对他们进行了整合。通过框架的使用，降低了代码的耦合性， 减少了开发周期，从而为该系统的开发提供了便利。该系统是基于b s 架构的框架 技术进行的开发。其目的一是为了实现对e x t 框架的研究，二是为了使那些对m i s 系统开发有兴趣的研究者少走弯路。 关键字：r i a ；e x t ；s t r u t s ：h i b e r n a t e ；s p r i n g 英文摘要 a b s t r a c t w i t ht h er a p i dd e v e l o p m e n to fi n t e r n e t ，t h er a p i de x p a n s i o no ft h en e t w o r ks c a l e ， t h ew i d e l yu s eo ft h ew e bs i t et e c h n o l o g y ，t h eu s e r sr e q u i r e m e n t so fr i c h - c l i e n th a v e b e e ni n c r e a s e d ，i no r d e rt op u tf o r w a r dar i c hi n t e r f a c ea p p l i c a t i o nr i a ( r i c hi n t e r f a c e a p p l i c a t i o n s ) t h ed e v e l o p m e n to ft h et r a d i t i o n a ln e t w o r k i sb a s e do nt h e p a g e ， s e r v e r - s i d ed a t at r a n s f e rm o d e l ，t h en e t w o r ks i d ep r o c e d u r e se s t a b l i s ht h eh t m lp a g e a b o v e ，a n di ss u i t a b l ef o rh t m lt e x t ，t h et r a d i t i o n a lp a g e - b a s e ds y s t e mh a sb e e n g r a d u a l l yc a nn o tm e e tt h et h eh i g h e r ，a l l - r o u n de x p e r i e n c er e q u i r e m e n t s ，a n dt h e e m e r g e n c eo fr i a i st os o l v et h ep r o b l e m e x ti sar i c hi n t e m e ta p p l i c a t i o n sj a v a s c r i pl i b r a r yt oc r e a t ec r o s s - b r o w s e r i t c o n t a i n s ：ah i g h l ye f f i c i e n ta n dc u s t o m i z a b l eu s e ri n t e r f a c e ，s m a l lp a r t s ，t h eb e a u t i f u l d e s i g n ，s c a l a b l e m o d e lf o rt h ec o m p o s i t i o no fc o m p o n e n t s ，e a s y - t o - u s e ，i n t u i t i v e a p p l i c a t i o np r o g r a m m i n gi n t e r f a c e b a s e do np u r eh t m l c s s + j st e c h n o l o g y ，p r o v i d e sa w e a l t ho fc r o s s - b r o w s e ru ic o m p o n e n t s ，af l e x i b l eu s eo fj s o n x m lf o r m a tf o rt h e e x c h a n g e ，t h ec l i e n tt h a tt h e1 e v e lo fs e r v i c et or e a l l yl i g h t e nt h el o a d ，s oa st oa c h i e v e t h er i ac l i e n ta p p l i c a t i o n t h ep a p e ri st os t u d yt h ee x tf r a m e w o r kh o wt ow o r ka n di n t e g r a t et h ee x t f r a m e w o r kw i t ho t e rm a i nw e bd e v e l o p m e n tf r a m e w o r k ，r e s e a r c hi t sf u n c t i o na n d o p e r a t i o n gc h a r a c t e r i s t i c si nd e t a i l a c c o r d i n gt ot h er e s e a r c h ，m a k et h es y s t e md e s i g n o v e r a l l ，t h es e l e c t i o na n di n t e g r a t i o no ft h ef r a m e w o r k ，a n dt h er e a l i z a t i o no ft h e p r o j e c t , a tl a s td e v e l o pt h el i b r a r ym a n a g e m e n ts y s t e m t h ep a p e ri n t r o d u c e st h ee x tf r a m e w o r ka tf i r s t ，a n a l y z e sa n dr e s e a r c ht h eb a s i so f t h em e c h a n i s ma n di m p l e m e n t a t i o no ft h ee x tf r a m e w o r k a n dt h e nd r a w so nt h ef r a m e w o r kb a s e do nj 2 e ee x p e r i e n c ei nw e b d e v e l o p m e n tp r o j e c t s ，s u c c e s s f u l l yi n t r o d u c e s t r u t s ，h i b e r n a t e ，s p r i n gf r a m e w o r k 一一t h et h r e ef r a m e w o r k s ，a n di n t e g r a t et h e m t h r o u g h t h eu s eo ft h ef r a m e w o r k s ，r e d u c et h ec o d ec o u p l i n ga n dt h ed e v e l o p m e n tc y c l e s oh e l p t h es y s t e m s d e v e l o p m e n t t h es y s t e m sd e v e l o p m e n t f i r s ti st or e s e a r c ht h ee x t f r a m e w o r k ，t h es e c o n di st oh e l pt h e mw h oa r ei n t e r e s t e di nt h ed e v e l o p m e n to fm i s w a l kl e s sd e t o u r s k e yw o r d s ：r i a ；e x t ；s t r u t s ；h i b e r n a t e ；s p ri n g 大连海事大学学位论文原创性声明和使用授权说明 原创性声明 本人郑重声明：本论文是在导师的指导下，独立进行研究工作所取得的成果， 撰写成博硕士学位论文= = 里堂逡盐珏筮蕉猩主星丕! 挺翌鲍廛旦量鲤究：。除 论文中已经注明引用的内容外，对论文的研究做出重要贡献的个人和集体，均已 在文中以明确方式标明。本论文中不包含任何未加明确注明的其他个人或集体已 经公开发表或未公开发表的成果。本声明的法律责任由本人承担。 学位论文作者签名：堇垒塑 学位论文版权使用授权书 本学位论文作者及指导教师完全了解大连海事大学有关保留、使用研究生学 位论文的规定，即：大连海事大学有权保留并向国家有关部门或机构送交学位论 文的复印件和电子版，允许论文被查阅和借阅。本人授权大连海事大学可以将本 学位论文的全部或部分内容编入有关数据库进行检索，也可采用影印、缩印或扫 描等复制手段保存和汇编学位论文。同意将本学位论文收录到中国优秀博硕士 学位论文全文数据库( 中国学术期刊( 光盘版) 电子杂志社) 、中国学位论 文全文数据库( 中国科学技术信息研究所) 等数据库中，并以电子出版物形式 出版发行和提供信息服务。保密的论文在解密后遵守此规定。 本学位论文属于：保密口在年解密后适用本授权书。 不保密囤( 请在以上方框内打“，) 论文作者签名：寺 w e b 设计开发过程中e x t 框架的应用与研究 1 1 课题背景及意义 第1 章绪论 1 1 1 课题背景 随着互联网作为第四媒体的载体深入应用，w e b 开发的下一站众望所归必然是 富界面应用程序( r i ar i c hi n t e r f a c ea p p l i c a t i o n s ) 。 由于h t m l 天生是一种描述性的语言，使得当今w e b 交互程序虽然丰富多彩， 但互动缺乏，就像在看一页页的书稿一样，对于企业级应用程序的u i 表现能力， h t m l 表单提供的i n p u t 、s e l e c t 、c h e c k b o x 等元素很难满足复杂的业务需求。于是 人们相对于这种较简单的用户交互方式而言，提出“富界面”程序的概念，力求 提供桌面程序级水平的网络应用，从而带来丰富的客户端操作体验，与此同时， 各大i t 厂商亦纷纷积极参与实施，提出各自的解决方案，如s u i l 的j a v a a p p l e t j s f 、 m a c r o m e d i a a d o b e 的f l a s h f l e x a i r 、m i c r o s o f t 的w p f s i l v e r l i 曲t _ 当然也包括不 属于任何场商的a a x 【1 1 。 作为a i a ) 【的一个优秀框架，e x t 框架主要用来开发r i a 应用，即富客户端应用。 r i a 具有的桌面应用程序的特点包括： ( 1 ) 在消息确认和格式编排方面提供互动用户界面； ( 2 ) 在无刷新页面之下提供快捷的界面响应时间； ( 3 ) 提供通用的用户界面特性如拖放式( d r a ga n d d r o p ) 以及在线和离线操 作能力。r i a 具有的w e b 应用程序的特点包括如立即部署、跨平台、采 用逐步下载来检索内容和数据以及可以充分利用被广泛采纳的互联网 标准。 在实现r i a 的技术方面，现在也形成了两个分支，一种是以f l e x 和s l i v e r l i g h t 为代表的运行于浏览器插件中的r i a 应用；另一种是以e x t j s 、b i n d o w s 等为代表的 利用h t m l 、c s s 和j a v a s r i p t 等实现的富客户端组件技术的r i a 。 自从a i a ) 【一词于2 0 0 5 年由j e s s s ej a m e sg a r r e t t 提出以来，a j a x 的应用日益增多， 最著名的就是g o o g l e 的g m a i l 和g m a p j 艮务，以及照片共享站f l i c k e r 这些站点的用 第一章绪论 户交互界面突破了原有的方式，使得浏览页面时更为流畅和便捷于是这种技 术迅速流行，加上w e b2 0 的概念推波助澜，使得a j a x 成为业界的明星、不少开发 者研究的对象。 y a h o o ! u s e ri n t e r f a c e ( y u i ) l i b r a r y 是一套稳定而强大的界面开发套件，于2 0 0 6 年上半年由著名互联网运营商雅虎公司以免版税的方式推出，为浏览器运行 内容交互平台带来了一系列的基础设施建设，然而在提供用户界面的控件方面却 显得相对不足，此时浏览器已被业界证明并广泛接受为一种能与传统桌面相媲美 的新型舞台，迎接着w e b 技术的二次复兴。那是一种富界面的、渐进增强的w e b 应用。与此同时，由于y u il i b r a r y 本身是一套比较清晰的o p p 设计框架，其他开发 者理解j a c k 的代码并不太困难，有时还为y u i e x t 进行二次开发。 为期一年的紧张投入开发后，j a c ks l o c u m 正式宣布了独立的解决方案并更名 为e x tj s ，这时e x t 已经是一套覆盖企业级应用的界面库，由于采用了“命名空间” 的技术隔离，开发者可以确保e x t 的控件不会受其他j a v a s c r i p t 代码的影响。数月之 后，随着开发过程的进展，e x t 自己的适配器也出现了。随着更多开发人员的加入 和持续蓬勃的社区活动的进行，在2 0 版发布之后，e x t 已经成为业内首屈一指的前 端j a v a s c d p t 库【9 。 1 1 2 课题意义 如今w e b 应用不只局限于简单的网页、网站，随着w e b 应用的发展和成熟，w e b 程序已经发展成了大型而又复杂的应用软件，一个w e b 应用程序甚至包括上千个页 面，而且客户的要求和期望也越来越高，因此在程序开发过程中w e b 的界面设计成 了一个很重要的部分，当然程序的业务逻辑和易维护性也很重要。 早期的页面都是一个个设计完成的，这样的开发方式对于现在规模的w e b 程序 显然是不能满足要求的，而是需要对整个w e b 界面进行设计，一个好的设计可以大 大提高开发效率和满足需求的变化以及程序的维护。传统的开发模式已经远远不 能满足开发者与客户的要求。随着w e b 开发技术的逐渐成熟，越来越多的开发人员 开始使用w e b 应用框架，框架为w e b 的应用提供了预先的软件架构和相关的软件 包，大大提高了开发的速度与效率。 w e b 设计开发过程中e x t 框架的应用与研究 s t r u t s 框架是目前最成熟、应用最广泛的开放源代码j a v aw e b 框架，它提供了 模型视图控制器框架，该框架为j a v aw e b 应用系统的开发者提供了一个结构清 晰、功能强大、成本低廉、容易扩展及方便维护的平台。 s 研n g 框架的核心是个轻量级的容器，它是实现i o c ( i n v e r s i o no fc o n t r 0 1 ) 容器 和非侵入性( n o i n t r u s i v e ) 的框架，并且提供a o p ( a s p e c to r i e n t e dp r o g r a m m i n g ) 概念 的实现方式；提供了对持久层( p e r s i s t e n c e ) ，事务( t r a n s a c t i o n ) 的支持；提供m v cw e b 框架的实现，并对于一些常用的企业服务a p i ( 耳p a p p l i c a t i o ni n t e r f a c e ) 提供一致的模 型封装，是一个全方位的应用程序框架，除此之外，对于现存的各种框架( s t r u t s ， j s f ，h i b e r n a t e 等) ，s p r i n g 也提供了与它们相整合的方案。 j 2 e e 模型中出现了比较经典而且实用的持久层框架h i b e r n a t e ，它是对j d b c 的 轻量级的封装，可以应用在任何j d b c 的场合，不但如此h i b e r n a t e 还可以在e j b 中 取代c m p ，完成数据持久化。在具体的项目中，h i b e r n a t e 还可以与大多数的应用 平稳地集成，同时h i b e r n a t e 还有独立作战能力，可以用一般的测试程序进行测试。 随着网络的发展，h i b e r n a t e 越来越受到开发者的欢迎，运用h i b e r n a t e 作为数据持久 化的开源框架也越来越多。 e x t 可以用来开发r i a 也即富客户端的a j a x 应用，是一个用j a v a s c r i p t 写的，主 要用于创建前端用户界面，是一个与后台技术无关的前端a j a x 框架。因此，可以 把e x t j s 用在n e t 、j a v a 、p h p 等各种开发语言开发的应用中。e x t j s 最开始基于y u i 技术，由开发人员j a c k s l o c u m 开发，通过参考j a v a s w i n g 等机制来组织可视化组件， 无论从u i 界面上c s s 样式的应用，到数据解析上的异常处理，都可算是一款不可多 得的j a v a s c r i p t 客户端技术的精品。 本文的意义在于，深入研究上述三个主流w e b 开发框架的设计模式、设计原则 及功能实现，重点研究基于r i a 富客户端开发的e x t 框架的原理和机制，并将它们 进行整合实现了图书管理系统，通过e x t 技术对w e b 应用系统布局功能的设计和实 现，系统展示了如何使用e x t 来提高页面易用性和改善用户体验。并总结出它们之间 整合的方法与具体协同合作的原理，为w e b 开发者在实现过程中提出些可供参考经 验。 第一章绪论 1 2 论文的研究内容及组织 1 2 1 论文的主要研究内容 本文所做的工作主要有以下几点： ( 1 ) 本文系统、详细的介绍- y e x t 框架的技术特点和实现方法； ( 2 ) 深入探讨了e x t 框架与当前主流j 2 e e 开源框架的协同工作，并对其框架结 构与配置使用做了简单的介绍； ( 3 ) 将e x t 框架与s t r u t s 、h i b e m a t e 、s p r i n g 框架进行整合，完成图书管理系统。 1 2 2 论文的组织 本文共分为五章，各章的内容如下： 第1 章绪论 概述了论文的研究背景，介绍了论文的研究内容及论文的组织。 第2 章e x t 的基本理论与关键技术 系统地研究和阐述了e x t 框架的基本工作原理与实现特性，并对基于r i a 开发 的开源框架e x t 的优点与不足进行了介绍。 第3 章系统的总体设计 对系统的数据库的设计、w e b 应用的层次结构与开源框架的选择策略、系统 的功能模块及业务流程进行了具体的阐述。 第4 章系统的实现 通过应用e x t 框架开发界面，s t r u t s 2 作为表示层，h i b e r n a t e 作为模型层，s p r i n g 作为控制层，进行框架的整合，开发出具有c s 架构程序部分特点的图书管理系统， 界面漂亮，格式新颖并且能实现动态更新。 第5 章结束语 对全文进行总结，并提出未来研究的发展方向和有待进一步研究的问题。 w e b 设计开发过程中e x t 框架的应用与研究 2 1a j a x 概述 第2 章e x t 的基本理论与关键技术 2 1 1a j a x 的技术概述 a j a x 全称为“a s y n c h r o n o u sj a v a s c r i p ta n dx m l ”( 异步j a v a s c r i p t 和x m l ) ， 是指一种创建交互式网页应用的网页开发技术。a j a x 这个名词的首次出现是在 2 0 0 5 年2 月1 8 日美国一位叫做杰西詹姆斯加勒特( j e s s ej a m e sg a r r e t t ) 发表的 一篇题为( a j a x 一个w e b 应用的新途径的论文中。文章认为a j a x 不是一种技 术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。a j a x 包含【2 q ： ( 1 ) 使用x h t m l 和c s s 标准化呈现； ( 2 ) 使用d o m ( d o c u m e n to b j e c tm o d e l ) 进行动态显示和交互； ( 3 ) 使用x m l 和x s l t 进行数据交换与处理； ( 4 ) 使用x m l n t t p r e q u e s t 与服务器进行异步通信； ( 5 ) 使用j a v a s c r i p t 绑定和处理所有数据。 a j a x 技术是目前在浏览器中通过j a v a s c r i p t 脚本可以使用的所有技术的集 合。a j a x 并没有创造出某种具体的新技术，它所使用的所有技术都是在很多年前 就已经存在了，然而a j a x 以一种崭新的方式来使用所有的这些技术，使得古老的 b s 方式的w e b 系统焕发了新的活力【。 2 1 2a j a x 的基本工作原理 a j a x ( a s y n c h r o n o u sj a v a s c r i p ta n dx m l ) 结合了j a v a 技术、x m l 以及 j a v a s c r i p t 的w e b 开发模式，可以构建基于j a v a 技术的w e b 应用，和传统的w e b 更新技术有所不同，相当于在客户端和服务器之间加了中间层_ a j a x 引擎，这 样并不是所有的用户请求都提交给服务器，一些数据的验证和处理由a j a x 自己来 做，只有确实需要从服务器读取新数据时，才由客户端通过j a v a s c r i p t ，调用a j a x 引擎，向服务器端发出h t t p 请求。当服务器端的数据以x m l 形式返回时，a j a x 第2 章e x t 的基本理论与关键技术 引擎接收数据，并指定j a v a s c f i p t 函数来完成相应的处理或页面的更新，而不是刷 新整个页面，从而实现用户操作与服务器响应的异步化【2 1 。如2 1 所示： h t t 客户端 用户接口 jl ) 请求 h t t p 传输 h t m l + c s 1r w e b 服务器 上t 数据仓库 服务器端 h 用户接口 客 i 产 j a v a s c r i ph t m l + c s s 湛 i 0 1 i u a j a x 引擎 j l ：t p 请求 h t t p 传输 弛i l 型 r 服 w e b 和或x m l 服务器 缝 量 上t 自口 端 数据仓库 ( a ) 传统的w e b 体系结构( a ) a j a x 的w e b 体系结构 ( b ) s t r u c t u r eo ft h et r a d i t j o n a l ( b ) a j a xs t r u c t u r eo ft h ew e b 图2 1w e b 体系结构比较图 f i g2 1c o m p a r i s o nc h a r to fw e bs t r u c t u r e 2 1 3a j a x 的异步数据传输实现方法 ( 1 ) 发出h t t p 请求 指定响应处理函数之后，就向服务器发出h t t p 请求，这一步是通过调用 x m l h t t p r e q u e s t 对象的o p e n 和s e n d 方法。 h t t p _ r e q u e s t lo p e n ( “m e t h o d ，”u r l ”，t r u e ) ； h t t p _ r e q u e s t1s e n d ( n u l l ) ； o p e n 第一个参数是h t t p 请求的方法，可以为g e t 、p o s t ； 据 w e b 设计开发过程中e x t 框架的应用与研究 o p e n 第二个参数是目标u r l ； o p e n 第三个参数是指定h t t p 请求异步执行。 s e n d 的参数是客户端发往服务器的请求实体，可以是x m l 格式文档，也可 以是其他的字符串。 之后在服务器端其处理与普通的w e b 应用程序一样【。 ( 2 ) 处理服务器返回的信息 从w 3 c 官方网站查到，响应处理函数首先要检查x m l h t t p r e q u e s t 对象的 r e a d y s t a t e 值，以判断请求目前的状态，当r e a d y s t a t e = 4 ，代表h t t p 请求发送成功且 服务器已经返回所有的信息，可以处理信息并更新页面。其代码为【4 i 】： i f ( h t t p r e q u e s t 1r e a d y s t a t e = = 4 ) 处理信息并更新页面 ) e l s e 信息没返回，等待 ) 2 1 4a j a x 的优势与弊端 与传统的w e b 开发不同，a j a x 并不是以一种基于静态页面的方式来看待 w e b 应用的。从a j a x 的角度看来，w e b 应用仅由少量的页面组成，其中每个页 面其实是一个更小型的a j a x 应用。 a j a x 应用的优势主要表现在以下几个方面： ( 1 ) 减轻服务器的负担。a j a x 的原则是“按需取数据”，可以最大程度的 减少冗余请求，和响应对服务器造成的负担。 ( 2 ) 无刷新更新页面，减少用户心理和实际的等待时间。a j a x 利用了客户 端强大的计算资源，减轻了服务器负担，使服务器能承载更多的连接访 问量可以同时进行多个数据更新操作，实现真正的多任务处理。例如： 检查用户名是否可用。传统的检查必须要弹出一个新的窗口，显示结果 页面，而在弹出过程中，用户是只能干等结果而不能做其它的事情的( 即 不能填其它信息，因为页面已经被锁定了) ，a j a x 技术的应用，可以使 第2 章e x t 的基本理论与关键技术 用户在等待结果的时间段内，处理其它的任何数据( 填写其它信息) ，相 互不受影响。特别的，当要读取大量的数据的时候，不用像r e l o a d 那 样出现白屏的情况，a j a x 使用x m l h t t p 对象发送请求并得到服务器响 应，在不重新载入整个页面的情况下用j a v a s c r i p t 操作d o m 最终更新 页面。所以，在读取数据的过程中，用户所面对的不是白屏，是原来的 页面内容( 也可以加一个l o a d i n g 的提示框让用户知道处于读取数据过 程) ，只有当数据接收完毕之后才更新相应部分的内容。这种更新是瞬 间的，用户几乎感觉不到【3 1 。 ( 3 ) 带来更好的用户体验。 ( 4 )可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的 能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。 ( 5 ) 可以调用外部数据。 ( 6 ) 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 ( 7 ) 一步促进页面呈现和数据的分离【3 1 。 a j a x 应用的弊端主要表现在以下几个方面： ( 1 ) 所谓的无刷新，这在客户端经常出现代码错误，导致有些功能不能使用。 用j a v a s c r i p t 作的a j a x 引擎，j a v a s c r i p t 的兼容性是一个问题，并且调 试b u g 不是很容易的事，方法比较单一，而且有时从抛出的异常很难 进行错误的定位。 ( 2 ) 开发效益不高，如果使用a j a x ，编写大量的冗余的j a v a 代码，经常在 客户端出现错误提示，代码不简洁，倒不如直接使用p h p 服务器端相当 简洁的代码完成项引1 1 。 ( 3 ) a j a x 的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容 易给用户带来困扰用户不太清楚现在的数据是新的还是已经更新 过的：现有的解决有：在相关位置提示、数据更新的区域设计得比较明 显、数据更新后给用户提示等。 w e b 设计开发过程中e x t 框架的应用与研究 ( 4 ) a j a x 本身就存在着如果客户端的带宽不够，它的展示就会一塌糊涂的这 个问题，是它的先天缺陷，也是它崛起的先天因素由于网速和带宽的 不断增大，使得服务端与客户端的频繁通信成为可能( 8 】。 a j a x 技术的使用要适可而止，不可泛滥使用。使用得当则妙笔生辉，反之过 度使用很容易让自己系统陷入麻烦之中，系统复杂性剧增，程序也只能用i e 访问。 测试的时候这边a j a x 的j a v a s c r i p t 的b u g 满天飞，那边调试这种错误极不方便， 没有好的j s 的调试器，更看不到实际输出的h t m l 代码。维护那就糟糕，加个新功 能，j s p 文件、标签、j s 、后台类全要过一遍。 2 。2e x t 框架的概述 2 2 1e x t 框架简介 e x t 是一种j a v a s c 却t 开发框架，这种强大的j a v a s c r i p t 库提供了可重用的对象 和部件，简化了a j a x 开发和丰富了客户端界面效果，通过使用该框架可以使w e b 层的开发使用到面向对象的特性，比如可复用性和可继承性等。该框架的核心思想 是通过j a v a s c r i p t 来动态创建页面的标记元素，从而使得页面更灵活。其实e x t 本身 并没使用到新技术，而是在j a v a s c r i p t 基础上结合这些设计思想发展过来的，它与普 通的j a v a s c r i p t 相比具有以下一些优点和特性： ( 1 ) e x t 所有j a v a s c r i p t 库都是跨浏览器支持的，这种支持使开发人员在构建 w e b 应用程序时不需要考虑目标浏览器。 ( 2 ) 完全面向对象且可扩展的。 ( 3 ) 复用性高，便于统一w e b 程序的界面设计【9 】。 e x tj s 提供大量用户界面元素，这些元素包括表单、对话框、选项卡、树和网 格、页面布局等，用户可以直接使用这些元素来快速开发自己的页面，同时也可以扩 展自己的页面元素以供使用。通过e x t 技术可以使页面效果达到部分桌面应用程序 的风格，给用户提供一个友好的人机交互界面，同时可以提高其操作的方便性。 e x t 是一个工具库( l i b r a r y ) ，还是一套框架。“框架”字眼似乎有“专制 的味道一因为人们总想冲破各种条条框框。实际上使用了e x t 就可以满足一般性的 第2 章e x t 的基本理论与关键技术 软件g u i 开发要求，因此按照作者j a c k 的原话，e x t 定位于“真正的整合好的完 整的程序开发平台。它的获取方法很简单只要登陆e x t 的官方网站下载即可，现 在已经发展到e x t3 0 【9 1 。 e x t 在经典的w e b 开发三层架构中仍扮演着表示层( p r e s e n t a t i o nl a y e r ) 的角 色，对其他两层业务逻辑层、数据层原有设计影响不大，可认为采用e x t 框架后总 体的架构仍然沿用传统的“请求响应( r e q u e s t r e s p o n s e ) ”的设计。因此对服务 器端的最基本要求就是，它能处理h t t p 请求，然后返回如x m l 、j s o n 或h t m l 片段的数据【9 】。 2 2 2e x t 的技术特点与优势 随着开发过程的进展，e x t 自己的适配器也出现了，伴随更多专业开发人员的 加入和持续蓬勃的社区活动的进行，在2 o 版发布之后，e x t 已经成为业内首屈一 指的前端j a v a s c r i p t 库。 e x t 针对一个典型的r i a 标准，有着下列技术特点： e x t 提供大量高级的用户界面元素，这是开发r i a 所必需的。e x t 包包含 消息框、组合框、数据网络和工具栏等控件。另外，还可以通过布局管理器指定 元素在页面上的显示方式。还有用于操作表单和窗口的其他特性，这种支持使开 发人员在构建w e b 应用程序时不需要太多思考浏览器的底层细节。 良好的兼容性，能在多种平台下运行兼容主流浏览器。e x t 是相中了y u i l i b r a r y 的跨浏览器方面的特性和0 0 架构才在此基础上开发，不是从零开始的。 e x t 这个框架是完全面向对象且可扩展的。y u il i b r a r y 的一个关键方面是 把真正的面向对象开发实践带到前端开发中，该特性也可以在e x t 中找到。这种强 大的面向对象思维透过使用可重用的对象和部件简化了a j a x 开发。 ， 良好的用户体验、响应速度快、运行核心快速高效。e x t 参考了象s u ns w i n g 框架那样的设计，根据浏览器特性设计合理的组件。对于大量使用浏览器控件的 应用场合，j a v a s c r i p t 引擎亦不会捉襟见肘。 考察一个框架是否符合企业级a j a x 框架的要求时，除了强调框架的功能、 w e b 设计开发过程中e x t 框架的应用与研究 性能外，掌握难度和相关的文档、范例也是参考要素。e x t 通过一个易用、直观、 简洁的开发模型实现了简化和加快应用程序开发的承诺。文档、范例的完善度也 较高。 服务端方面，客户端的j a v a s c r i p t 是一种与服务器中立的语言，使得其他 特定语言的库亦可用于e x t 处理a j a x 服务。只要能返回e x t 可以处理的数据，任 何一种类型的服务端都是可以的，也就是说可以把e x t 与其他常用的服务器端w e b 开发框架一起使用，包括p h p 、j a v a 平台、m i c t o s o f f n e t , r u b yo nr a i l s 和 c o l d f u s i o n 等【1 0 1 。 e x t 不仅美观实用，而且满足了开发者对稳定性、易用性、可维护性的要求， 填补了企业级前端应用的空白，脱颖而出一举成为a j a x 框架中的佼佼者。 与所有优秀技术一样，a j a x 已经催生出大量框架，然而新的a j a x 框架仍不断 诞生，现有的框架也在持续推出新的版本。其中绝大多数都有开源实现，但也有 少数是专用的。较其他框架，e x t 框架有以下优势： 良好的用户体验，响应速度快运行时快速高效。 基于互联网的开放标准进行数据传输。 丰富的组件，基于事件驱动，能进行快速开发。 良好的兼容性，能在多种平台下运行1 9 。 2 3e x t 基础构成与理论 e x t 提供的组件之丰富，远超过其他的开发框架，其凸显的价值之广可谓一举 赢得用户和开发者的喜爱。这也为界面程序员省下许多时间，令系统开发速度倍 增，同时减少了因编码增加而使错误率升高的可能性。不少开发者坦言有了这些 丰富的u i 组件，邮箱界面、日历、通信平台、信息管理等一下就能装配好了。当 然这是对于宏观的角度而言，在实际开发中，细节功夫往往就是最需要基础知识 的，所以需要我们仔细的研究探讨【l 们。 第2 章e x t 的基本理论与关键技术 2 3 1 构成用户界面的元素 在接触一个完整的e x t 组件之前，我们先了解构成这些组件的元素 e x t e l e m e n t 。正所谓“磨刀不误砍柴工 。这样做的目的主要是理解e x t 中最基础 的部分元素，同时也训练自己的思维和熟悉一些在编程中常犯的错误。更重 要的是理解并能运用页面内的各种元素、c s s 控制方法，这些在以后的开发中都 会有很大的帮助，特别是利用e x t 进行底层开发的朋友对e x t e l e m e n t 各种方法一 定能能熟练运用，才能理解整个e x t 的宏观结构【10 1 。 在传统的标准桌面程序中，窗体上用于输入、输出信息的图形或字符为“控 件( c o n t r 0 1 ) ”。控件在b r o w s e r s e r v e r 程序的进化总亦演变为网页中h t m l 元 素。这些网页元素是浏览器内核本身提供的资源，如常用的按钮有下拉列表框、 单选按钮、复选框等。也是一些为创建更复杂的界面元素或更美观的用户界面或 捆绑数据源，而另外在服务端( s e r v e r - s i d e ) 自定义的复合控件。 e x t 提供了纯客户端的“控件”。其中提供了许多有用的“控件”供用户选择 使用，不过在讨论e x t 的时候，往往倾向于使用更专注于界面构成方式的“组件” 一词代替，当然继续使用“控件”一词去理解也未尝不可；这些组件并非都是网 页原生的控件对象，而是利用h t m l c s s 的资源复合而成的，在某种意义上也体 现了a i a x 是基于通用标准的技术方法而实现的。组件的原代码在s o u r c e 文件夹下 的这些组件可称为e x t 基本组件；小部件w i d g e t 就泛指为一套用于建立带有各种 复合组件的各种高级界面的组件，被安排在s o u r c e w i d g e t 文件夹中，如果这些自 带的组件仍不能满足指定的要求，可以充分发挥e x t 可扩展的强大特性，通过“扩 展( e x t e n d ) ”或“插件( p l u g i n s ) ”的方式满足自己特定的u i 组件的要求【1 0 1 。 一个直观的e x t 组件很容易了解，但我们还是先了解一下构成这些组件的基础元 素：e x t e l e m e n t 。e x t e l e m e n t 元素属于e x t 的基本概念，如同原子一般，无论界 面多么复杂都离不开它，可看作是在标准h t m l 元素的基础上进行的高级封装， 可完成像加入事件侦听器( e v e n tl i s t e n e r ) 、对d o m 的操作以及样式属性存取等 的常规操作。 w e b 设计开发过程中e x t 框架的应用与研究 大多数的j a v a s c r i p t 操作都需要先获取页面上的某个元素，引用其为当前脚本 中的一个对象，然后加以操作获取节点属性。w 3 c 标准推荐的语法是通过d o c u m e n t 文档对象获取d o m 树内的某个元素，常见的方法有g e t e l e m e n t b y l d ( ) 、 g e t e l e m e n t b y n a m e 0 和g e t e l e m e n t b y t a g n a m e o ，他们的作用分别是通过i d 属性、 n a m e 属性标签名称返回单个节点或节点集合【1 i 】。 2 3 2 获取页面元素及元素常见的使用方法 e x t g e t 与e x t f l y 同是e x t 中获取元素的静态方法，不同之处在于e x t f l y 不会 缓存任何元素，元素的引用可能会被后来的元素冲掉；e x t g e t 方法执行时会为每 个d o m 元素建立一个新的e x t e l e m e n t 对象，如果获取的是相同对象的话，则只 是从缓存中提取。e x t f l y 方法则显得更轻盈，建立一次实例只变动d o m 对象，总 的来说e x t f l y 用的资源较少，例如e x t q u i c k t i p s 中的实现采用了e x t w e i g h t 模式， 即n y 方法不需要缓存任何元素。这是一个很形象的例子提示区域在计算机屏幕上 同一时间内只有一个实例，当鼠标移开后重新绘制