基于Web2.0的RIA框架設(shè)計(jì)與實(shí)現(xiàn)解析

王芳

?

基于Web2.0的RIA框架設(shè)計(jì)與實(shí)現(xiàn)解析

王芳

重慶商務(wù)職業(yè)學(xué)院出版?zhèn)髅较?，重慶 400036

根據(jù)Web2.0概念及RIA思想，淺析一種基于Web2.0的JavaScript RIA框架的設(shè)計(jì)與實(shí)現(xiàn)，以期增強(qiáng)Web前端RIA框架的實(shí)用性、降低使用難度及提高綜合性能。

Web2.0；RIA框架；JavaScript

引言

Web2.0是一種以AJAX等為依據(jù)、以Wiki、Biog等為核心，以Ryze、Flicki等為代表的概念和互聯(lián)網(wǎng)模式，其具有互動(dòng)性和親和性的特點(diǎn)。RIA是一種網(wǎng)絡(luò)應(yīng)用程序，其采用的是Web應(yīng)用程序，具有最佳用戶(hù)界面功能，且可實(shí)現(xiàn)多媒體通信的實(shí)時(shí)互動(dòng)。研究根據(jù)Web2.0概念及RIA思想淺析一種JavaScript RIA框架的設(shè)計(jì)與實(shí)現(xiàn)。

1 基于Web2.0的RIA框架設(shè)計(jì)與實(shí)現(xiàn)

在基于Web2.0的JavaScript RIA框架（AUI）的體系結(jié)構(gòu)中，首先建立AUI的核心包，即AUI?core?packet?js，然后再建立基于A(yíng)UI?core?packet?js的應(yīng)用層，以便為建立UI組件服務(wù)，繼而統(tǒng)一產(chǎn)品的功能及縮短開(kāi)發(fā)周期。關(guān)于A(yíng)UI的設(shè)計(jì)，其應(yīng)當(dāng)遵循以下原則：支持設(shè)計(jì)人員對(duì)語(yǔ)言特征進(jìn)行自由拼裝；不分析和創(chuàng)建新語(yǔ)法，以便在運(yùn)行中實(shí)現(xiàn)系統(tǒng)；避免對(duì)引擎產(chǎn)生全局影響；在規(guī)范的環(huán)境下實(shí)現(xiàn)系統(tǒng)。據(jù)此，本章節(jié)討論一種AUI設(shè)計(jì)與實(shí)現(xiàn)，以供開(kāi)發(fā)人員所用。

（1）建立AUI的對(duì)象。AUI實(shí)際上是Query，因此可把AUI對(duì)象視作查詢(xún)器，其查詢(xún)結(jié)果為DOM元素。關(guān)于DOM元素，AUI為之提供以下四種組建方式：AUI（callback）、AUI（elements）、AUI（html）及AUI（sxpression，[contest]），其實(shí)可用$取代AUI，其中AUI的參數(shù)具有不確定性，即任何參數(shù)均可參與組建AUI的對(duì)象。通常而言，AUI的參數(shù)支持DOM Element、String、Fn及Array四種類(lèi)型。據(jù)此可知，AUI對(duì)象的組建是指向AUI對(duì)象的集合中添加單個(gè)DOM元素或元素的集合。AUI可實(shí)現(xiàn)兼容CSS1-CSS3的Selector查詢(xún)功能。

（2）支持CSS選擇器。組建AUI對(duì)象的首要任務(wù)是找出與之相對(duì)應(yīng)的DOM對(duì)象，并以此為基礎(chǔ)進(jìn)行操作。CSS查詢(xún)DOM節(jié)點(diǎn)的方式組建AUI對(duì)象，注意CSS應(yīng)當(dāng)支持XPath。

CSS的選擇器主要包括以下幾種單一的選擇器：ID選擇器、Class選擇器、類(lèi)型選擇器、復(fù)合選擇器、屬性選擇器及偽類(lèi)選擇器等，其中在實(shí)際應(yīng)用中，可按需進(jìn)行組合。通常而言，復(fù)合選擇器均可先拆分選擇器，然后再分別操作組份，即先把CSS選擇器拆分為選擇、篩選兩部分，然后再根據(jù)結(jié)果集判定元素滿(mǎn)足表達(dá)式與否，據(jù)此可采用JavaScript間/直接引用DOM的方式，注意在此過(guò)程，需要理清選擇與篩選所需的選擇器。關(guān)于init參數(shù)，通過(guò)直輸DOM元素（集）便可組建AUI的對(duì)象，其中DOM元素主要采用直引節(jié)點(diǎn)的方式來(lái)獲得，其中DOM元素集便為AUI的對(duì)象，其中組成組合的元素為DOM對(duì)象的間接引用節(jié)點(diǎn)，繼而實(shí)現(xiàn)兄弟節(jié)點(diǎn)、子節(jié)點(diǎn)和父節(jié)點(diǎn)的操作。至此，需把所有的間接引用節(jié)點(diǎn)傳入AUI?fn的同名方法中。綜上，AUI支持選擇器的設(shè)計(jì)可以簡(jiǎn)化具體的開(kāi)發(fā)步驟。

（3）DOM元素的操作。DOM元素的操作主要包括元素內(nèi)容、屬性、insert和CSS的操作。在A(yíng)UI中，主要采用DOM元素的原始方法操作元素的屬性，且可提高AUI對(duì)瀏覽器的兼容性，同時(shí)為了降低使用難度，AUI通過(guò)把對(duì)象屬性整合在同一函數(shù)中，并根據(jù)缺省的屬性來(lái)判定采用何種調(diào)用方法，其中函數(shù)主要由以下部分組成：準(zhǔn)備工作的處理、元素屬性的設(shè)置值或取值，注意在此過(guò)程需要保存一些重要的數(shù)據(jù)，以滿(mǎn)足UI組件設(shè)計(jì)所需。

（4）AJAX的實(shí)現(xiàn)。通常而言，AJAX的請(qǐng)求步驟為：生成對(duì)象shr→建立連接→設(shè)計(jì)shr請(qǐng)求的頭部→發(fā)送數(shù)據(jù)至服務(wù)器端→對(duì)返回的數(shù)據(jù)進(jìn)行回調(diào)處理。任何Library均采用上述步驟通過(guò)相關(guān)拓展來(lái)實(shí)現(xiàn)自身的功能，但在此過(guò)程需將跨域請(qǐng)求考慮其中。純生AJAX通常不支持跨越請(qǐng)求，因此首先需要采用Script Tag來(lái)解決上述問(wèn)題，然后再以此為基礎(chǔ)進(jìn)行擴(kuò)展。AJAX的任務(wù)之一是提交form。針對(duì)AJAX的應(yīng)用，處理返回?cái)?shù)據(jù)的終極目標(biāo)是將之顯示在頁(yè)面上，其中AUI便是根據(jù)所需改變的DOM元素，利用AJAX獲取數(shù)據(jù)，然后再通過(guò)處理將之填入已知的元素中。

（5）FX的實(shí)現(xiàn)。實(shí)際上，F(xiàn)X主要通過(guò)對(duì)DOM元素的屬性進(jìn)行有序且連續(xù)地改變來(lái)使之獲得視覺(jué)效果，其中元素的屬性包括透明度、寬度、高度及顏色等；有序與連續(xù)是指分別在間隔的時(shí)間點(diǎn)上改變CSS的屬性，且所改變的數(shù)值具有序列化的特征，繼而獲得一種漸進(jìn)的工程效果。AUI提供的Fx函數(shù)主要包括以下幾種：Slide為滑出動(dòng)作；Fede為漸變動(dòng)作及AUI（）?toggle（）、AUI（）?hide（）、AUI（）?show（）采取更加優(yōu)美的方式顯示元素，其中show（）為元素的高、寬漸變；hide（）為透明度逐漸增加、寬度逐漸減小至消失；toggle（）為切換顯示上述兩種效果，而上述效果的實(shí)現(xiàn)手段為AUI提供的animate（）。

2 結(jié)語(yǔ)

綜上所述，JavaScript框架不僅可以減少冗余代碼，亦可建立有效的Web開(kāi)發(fā)前端標(biāo)準(zhǔn)，以方便框架的開(kāi)發(fā)和改善修改的效果。在科技更新周期日漸縮短的時(shí)代背景下，用戶(hù)對(duì)Web前端提出的要求越來(lái)越高，為了適應(yīng)這一發(fā)展需求，JavaScript框架在Web開(kāi)發(fā)中的應(yīng)用越來(lái)越受到社會(huì)的關(guān)注?？梢?jiàn)，AJAX RIA框架的研究具有現(xiàn)實(shí)意義。

[1]拓守恒.基于Flex+Spring+Hibernate框架技術(shù)的RIA教學(xué)測(cè)評(píng)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦開(kāi)發(fā)與應(yīng)用，2009，22（9）：20-22.

[2]王立峰，鄭燕林.JavaFX RIA框架下學(xué)習(xí)資源獲取MASHUP富客戶(hù)端設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代教育技術(shù)，2013，23（7）：90-94.

[3]李凱，龍翔，高小鵬，等.輕量級(jí)RIA程序框架的設(shè)計(jì)與實(shí)現(xiàn)[J].微計(jì)算機(jī)信息，2010，26（30）：165-167.

TP311.52

A

1009-6434（2016）03-0061-01