王芳

?

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

王芳

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

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

Web2.0；RIA框架；JavaScript

引言

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

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

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

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

（2）支持CSS選擇器。組建AUI對象的首要任務是找出與之相對應的DOM對象，并以此為基礎進行操作。CSS查詢DOM節(jié)點的方式組建AUI對象，注意CSS應當支持XPath。

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

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

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

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

2 結(jié)語

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

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

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

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

TP311.52

A

1009-6434（2016）03-0061-01