基于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