基于Web2.0的RIA框架设计与实现解析

王芳



基于Web2.0的RIA框架设计与实现解析

王芳

重庆商务职业学院出版传媒系，重庆 400036

根据Web2.0概念及RIA思想，浅析一种基于Web2.0的JavaScript RIA框架的设计与实现，以期增强Web前端RIA框架的实用性、降低使用难度及提高综合性能。

Web2.0；RIA框架；JavaScript

引言

Web2.0是一种以AJAX等为依据、以Wiki、Biog等为核心，以Ryze、Flicki等为代表的概念和互联网模式，其具有互动性和亲和性的特点。RIA是一种网络应用程序，其采用的是Web应用程序，具有最佳用户界面功能，且可实现多媒体通信的实时互动。研究根据Web2.0概念及RIA思想浅析一种JavaScript RIA框架的设计与实现。

1 基于Web2.0的RIA框架设计与实现

在基于Web2.0的JavaScript RIA框架（AUI）的体系结构中，首先建立AUI的核心包，即AUI▪core▪packet▪js，然后再建立基于AUI▪core▪packet▪js的应用层，以便为建立UI组件服务，继而统一产品的功能及缩短开发周期。关于AUI的设计，其应当遵循以下原则：支持设计人员对语言特征进行自由拼装；不分析和创建新语法，以便在运行中实现系统；避免对引擎产生全局影响；在规范的环境下实现系统。据此，本章节讨论一种AUI设计与实现，以供开发人员所用。

（1）建立AUI的对象。AUI实际上是Query，因此可把AUI对象视作查询器，其查询结果为DOM元素。关于DOM元素，AUI为之提供以下四种组建方式：AUI（callback）、AUI（elements）、AUI（html）及AUI（sxpression，[contest]），其实可用$取代AUI，其中AUI的参数具有不确定性，即任何参数均可参与组建AUI的对象。通常而言，AUI的参数支持DOM Element、String、Fn及Array四种类型。据此可知，AUI对象的组建是指向AUI对象的集合中添加单个DOM元素或元素的集合。AUI可实现兼容CSS1-CSS3的Selector查询功能。

（2）支持CSS选择器。组建AUI对象的首要任务是找出与之相对应的DOM对象，并以此为基础进行操作。CSS查询DOM节点的方式组建AUI对象，注意CSS应当支持XPath。

CSS的选择器主要包括以下几种单一的选择器：ID选择器、Class选择器、类型选择器、复合选择器、属性选择器及伪类选择器等，其中在实际应用中，可按需进行组合。通常而言，复合选择器均可先拆分选择器，然后再分别操作组份，即先把CSS选择器拆分为选择、筛选两部分，然后再根据结果集判定元素满足表达式与否，据此可采用JavaScript间/直接引用DOM的方式，注意在此过程，需要理清选择与筛选所需的选择器。关于init参数，通过直输DOM元素（集）便可组建AUI的对象，其中DOM元素主要采用直引节点的方式来获得，其中DOM元素集便为AUI的对象，其中组成组合的元素为DOM对象的间接引用节点，继而实现兄弟节点、子节点和父节点的操作。至此，需把所有的间接引用节点传入AUI▪fn的同名方法中。综上，AUI支持选择器的设计可以简化具体的开发步骤。

（3）DOM元素的操作。DOM元素的操作主要包括元素内容、属性、insert和CSS的操作。在AUI中，主要采用DOM元素的原始方法操作元素的属性，且可提高AUI对浏览器的兼容性，同时为了降低使用难度，AUI通过把对象属性整合在同一函数中，并根据缺省的属性来判定采用何种调用方法，其中函数主要由以下部分组成：准备工作的处理、元素属性的设置值或取值，注意在此过程需要保存一些重要的数据，以满足UI组件设计所需。

（4）AJAX的实现。通常而言，AJAX的请求步骤为：生成对象shr→建立连接→设计shr请求的头部→发送数据至服务器端→对返回的数据进行回调处理。任何Library均采用上述步骤通过相关拓展来实现自身的功能，但在此过程需将跨域请求考虑其中。纯生AJAX通常不支持跨越请求，因此首先需要采用Script Tag来解决上述问题，然后再以此为基础进行扩展。AJAX的任务之一是提交form。针对AJAX的应用，处理返回数据的终极目标是将之显示在页面上，其中AUI便是根据所需改变的DOM元素，利用AJAX获取数据，然后再通过处理将之填入已知的元素中。

（5）FX的实现。实际上，FX主要通过对DOM元素的属性进行有序且连续地改变来使之获得视觉效果，其中元素的属性包括透明度、宽度、高度及颜色等；有序与连续是指分别在间隔的时间点上改变CSS的属性，且所改变的数值具有序列化的特征，继而获得一种渐进的工程效果。AUI提供的Fx函数主要包括以下几种：Slide为滑出动作；Fede为渐变动作及AUI（）▪toggle（）、AUI（）▪hide（）、AUI（）▪show（）采取更加优美的方式显示元素，其中show（）为元素的高、宽渐变；hide（）为透明度逐渐增加、宽度逐渐减小至消失；toggle（）为切换显示上述两种效果，而上述效果的实现手段为AUI提供的animate（）。

2 结语

综上所述，JavaScript框架不仅可以减少冗余代码，亦可建立有效的Web开发前端标准，以方便框架的开发和改善修改的效果。在科技更新周期日渐缩短的时代背景下，用户对Web前端提出的要求越来越高，为了适应这一发展需求，JavaScript框架在Web开发中的应用越来越受到社会的关注。可见，AJAX RIA框架的研究具有现实意义。

[1]拓守恒.基于Flex+Spring+Hibernate框架技术的RIA教学测评系统的设计与实现[J].电脑开发与应用，2009，22（9）：20-22.

[2]王立峰，郑燕林.JavaFX RIA框架下学习资源获取MASHUP富客户端设计与实现[J].现代教育技术，2013，23（7）：90-94.

[3]李凯，龙翔，高小鹏，等.轻量级RIA程序框架的设计与实现[J].微计算机信息，2010，26（30）：165-167.

TP311.52

A

1009-6434（2016）03-0061-01