李雅雯+劉曉燕

摘 要：MVC模式是制作軟件的標(biāo)準(zhǔn)設(shè)計(jì)模式，前端開(kāi)發(fā)用戶體驗(yàn)良好。但是目前基于MVC模式的開(kāi)發(fā)框架存在成本高、效率低的問(wèn)題。為了避免前端開(kāi)發(fā)過(guò)程中產(chǎn)生代碼量過(guò)大、重用性過(guò)低、不易維護(hù)、擴(kuò)展性不好等技術(shù)難題，OMG提出了一種詳細(xì)的用來(lái)描述圖形界面的抽象模型：交互流建模語(yǔ)言（IFML）。它是一種可視化表達(dá)前端界面構(gòu)成、用戶交互和控制行為的工具。在IFML模型中結(jié)合MVC 架構(gòu)模式，對(duì)增強(qiáng)前端開(kāi)發(fā)的精確性和完備性具有重要意義。擴(kuò)展后的框架可以根據(jù)不同需求修改相關(guān)模型，增強(qiáng)了模型的可復(fù)用性，提高了應(yīng)用前端的開(kāi)發(fā)效率及代碼的可重用性。

關(guān)鍵詞：MVC模式；前端開(kāi)發(fā)；IFML；可視化；模型

DOIDOI：10.11907/rjdk.172257

中圖分類號(hào)：TP301

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2018）002-0038-03

0 引言

在過(guò)去幾十年中，各種各樣的操作系統(tǒng)用戶界面（Graphical User Interface，簡(jiǎn)稱 GUI）復(fù)雜，且復(fù)雜度隨時(shí)間而增加。一些強(qiáng)大的交互功能是在各種技術(shù)和平臺(tái)上實(shí)現(xiàn)的，其邊界變得越來(lái)越不可區(qū)分，例如：客戶端——服務(wù)器應(yīng)用程序、Web應(yīng)用程序、豐富的Internet應(yīng)用程序、移動(dòng)應(yīng)用程序等等。軟件開(kāi)發(fā)需要更加抽象的實(shí)踐，因此，軟件開(kāi)發(fā)研究開(kāi)始側(cè)重于用戶界面的抽象模型，并出現(xiàn)了新的建模語(yǔ)言標(biāo)準(zhǔn)，這些抽象層面上的表達(dá)要求變得更加強(qiáng)大。

對(duì)象管理組（OMG）提出了一種名為模型驅(qū)動(dòng)架構(gòu)（Model Driven Architecture，簡(jiǎn)稱MDA）[1]的工作，以配合軟件技術(shù)的飛速發(fā)展，使物理系統(tǒng)的抽象化水平得以提高。因此，產(chǎn)生了許多描述和生成圖形界面的方法，多數(shù)方法都是基于MDA的。IFML是被OMG定義為描述元素和用戶界面行為的語(yǔ)言，它允許捕獲用戶交互和前端（用戶界面）內(nèi)容，并為該系統(tǒng)用戶界面的控制行為建模。

1 IFML相關(guān)理論

交互流建模語(yǔ)言（Interaction Flow Modeling Language，簡(jiǎn)稱IFML）[2]是國(guó)際標(biāo)準(zhǔn)化組織OMG制定的可視化建模標(biāo)準(zhǔn)，目標(biāo)是為系統(tǒng)架構(gòu)師、軟件工程師和軟件開(kāi)發(fā)人員提供交互流模型的定義工具：視圖部分的應(yīng)用程序由視圖容器和視圖組件構(gòu)成，體現(xiàn)應(yīng)用程序的對(duì)象，以及對(duì)業(yè)務(wù)邏輯動(dòng)作的引用；視圖組件與數(shù)據(jù)對(duì)象和事件的綁定，確定事件發(fā)生后要執(zhí)行的動(dòng)作控制邏輯，以及在不同層次的架構(gòu)中分配控制、數(shù)據(jù)和業(yè)務(wù)邏輯。

IFML規(guī)范[3]由4個(gè)技術(shù)組件組成：①IFML元模型，使用MOF指定IFML構(gòu)造的結(jié)構(gòu)和語(yǔ)義；②IFML的 UML配置文件[4]定義了基于UML的語(yǔ)法，特別是UML配置文件擴(kuò)展了UML圖的概念：類圖、狀態(tài)機(jī)和復(fù)合結(jié)構(gòu)圖；③IFML視覺(jué)語(yǔ)法提供了一種專門的可視化語(yǔ)法，用于以特別簡(jiǎn)潔的方式表達(dá)IFML模型，具體就是提供了一個(gè)獨(dú)特的圖，能夠壓縮UML類圖、狀態(tài)機(jī)和復(fù)合結(jié)構(gòu)圖單獨(dú)表示的用戶界面；④IFML XMI提供IFML模型交換格式，方便工具的可移植性。

圖1顯示IFML模型的簡(jiǎn)單示例，用戶可以在相冊(cè)搜索表單中輸入一些條件來(lái)搜索相冊(cè)，匹配項(xiàng)目顯示在列表中。選擇一個(gè)項(xiàng)目觸發(fā)刪除操作，刪除完成后，再次顯示更新的相冊(cè)列表。

可將IFML概念定型為描述更精確的行為。例如，可定義描述網(wǎng)頁(yè)（特定類型的視圖容器）的特定原型，表格、清單和細(xì)節(jié)（特定種類的視圖組件），提交或選擇事件等等[5]。

2 MVC模式

MVC（Model-View-Controller）[6]模式是一種 Web應(yīng)用程序開(kāi)發(fā)模式，通過(guò)將復(fù)雜的 Web 應(yīng)用程序分成模型（Model）、視圖（View）和控制器（Controller）3個(gè)部分，實(shí)現(xiàn)Web 系統(tǒng)的職能分工。

2.1 MVC結(jié)構(gòu)

MVC模型結(jié)構(gòu)[7]如圖2所示。視圖負(fù)責(zé)界面數(shù)據(jù)和用戶請(qǐng)求的采集和顯示，將接收到的模型處理結(jié)果顯示給用戶，一個(gè)模型可以對(duì)應(yīng)一個(gè)或多個(gè)視圖?？刂破魇悄Ｐ团c視圖的聯(lián)系紐帶，負(fù)責(zé)用戶請(qǐng)求的接收和轉(zhuǎn)發(fā)。模型封裝了系統(tǒng)的核心流程和業(yè)務(wù)規(guī)則，是 MVC設(shè)計(jì)模式[8]的核心，其接收來(lái)自視圖的用戶請(qǐng)求或數(shù)據(jù)，并將處理結(jié)果返回給視圖。

MVC有如下優(yōu)點(diǎn)[9]：①低耦合性：MVC模式中，模型與視圖兩部分相互解耦，模型不會(huì)依賴視圖，而視圖也只是從模型中獲取所需展示的數(shù)據(jù)，不與其邏輯功能關(guān)聯(lián)；②低開(kāi)發(fā)成本： MVC模式將各模塊職責(zé)進(jìn)行了明確地劃分，使開(kāi)發(fā)人員可以有明確的分工、各司其責(zé)，后端程序員只負(fù)責(zé)業(yè)務(wù)邏輯功能實(shí)現(xiàn)，即模型部分；前端程序員只用實(shí)現(xiàn)界面展示效果即視圖部分即可；③低維護(hù)難度：MVC模式下模型和視圖部分明確分開(kāi)，并使其解耦。如果改變軟件需求，便可相互之間互不影響進(jìn)行修改，使應(yīng)用程序更易于修改、維護(hù)及擴(kuò)展，從而使應(yīng)用的靈活性和復(fù)用性大大提升。

2.2 MVC模式下的IFML

互動(dòng)應(yīng)用程序模型—視圖—控制器（MVC）模型，IFML的重點(diǎn)在于視圖。此外，IFML描述了視圖引用或由應(yīng)用程序的模型和控制部分所依賴的方式。視圖元素ViewElements是在用戶界面級(jí)別可見(jiàn)的主要IFML模型元素。此元素包括專門的視圖容器ViewContainers和視圖組件ViewComponents。ViewContainers（如HTML頁(yè)面或Windows）是其它ViewContainers或ViewComponents的容器，而ViewComponents是顯示內(nèi)容或接受用戶輸入的界面元素。ViewComponents僅存在于ViewContainers中。

控制器方面，IFML允許設(shè)計(jì)者通過(guò)定義控制器處理相關(guān)事件。

模型方面，IFML允許引用數(shù)據(jù)對(duì)象及交互觸發(fā)操作。用戶界面的建模及與IFML的交互，相當(dāng)于將每個(gè)模型分為獨(dú)立可視化單元，可以同時(shí)顯示或互斥顯示，并可以分層次嵌套[10]。endprint

3 實(shí)例分析

本文根據(jù)MVC的3個(gè)經(jīng)典建模視圖，分割了房屋租賃系統(tǒng)PIM模型，包括靜態(tài)、動(dòng)態(tài)和功能視圖[11]。建模視圖和UML模型的交點(diǎn)如下：狀態(tài)圖模型表現(xiàn)了動(dòng)態(tài)視圖，類和包圖的模型表現(xiàn)了靜態(tài)視圖，用例模型呈現(xiàn)功能視圖。最后，根據(jù)模型—視圖—控制器（MVC）的設(shè)計(jì)模式構(gòu)建了所有類的信息系統(tǒng)。

3.1 用例圖

用例圖[12]是從用戶角度描述系統(tǒng)功能， 是用戶所能觀察到的系統(tǒng)功能模型圖，用例是系統(tǒng)的一個(gè)功能單元。本系統(tǒng)中，租房者是參與者，他的用例包括了Add accommodation options、Specify room、Display catalog、Start reservation、eliminate from cart product quantity 、Change accommodation options，它們之間是包含關(guān)系，如圖3所示。

3.2 類圖

類圖[12]以反映類的結(jié)構(gòu)（屬性、操作）以及類之間的關(guān)系為主要目的，描述了軟件系統(tǒng)結(jié)構(gòu)，是一種靜態(tài)建模方法。

本系統(tǒng)主要有Catalog類、Reservation類、Room類和AccommodationOption類。其中，Catalog類和Room類的操作都是顯示（display），AccommodationOption類的操作是增加、刪除和修改。Room類和Catalog類、Reservation類是一對(duì)多的關(guān)系，Room類和AccommodationOption類是多對(duì)多的關(guān)系，如圖4所示。

包裝是組織和管理對(duì)象類的容器，可用來(lái)組織其它模型元素，如界面。一個(gè)包裝里的各個(gè)類相互合作，共同給使用者提供一組完整的服務(wù)。一個(gè)類或包裝只能為一個(gè)包裝所容納。包裝也可以互相引用，形成依賴關(guān)系。本系統(tǒng)中兩個(gè)包裝分別是Realize reservation和Deal accommodation，如圖5所示。

3.3 類圖信息系統(tǒng)

在MVC模式下，將系統(tǒng)的靜態(tài)視圖、動(dòng)態(tài)視圖和功能視圖加以整合，重新構(gòu)建成為一個(gè)類圖信息系統(tǒng)。類圖中的類在Model模式下整合成為Model Catalog類、Model Reservation類、Mode lRoom類和Model AccommodationOption類，在View模式下整合成為View Catalog類、View Reservation類、View Room類和View AccommodationOption類，在Controller模式下整合成為Controller Catalog類、Controller Reservation類、Controller Room類和Controller AccommodationOption類，如圖6所示。

4 結(jié)語(yǔ)

基于MVC的軟件開(kāi)發(fā)模式提供了3部分并行開(kāi)發(fā)機(jī)會(huì)，使程序員能集中精力負(fù)責(zé)數(shù)據(jù)封裝和業(yè)務(wù)邏輯，頁(yè)面制作員集中精力負(fù)責(zé)頁(yè)面的展示，控制器則盡量選用或編寫一些可重用的控制流程。IFML是一種最新的標(biāo)準(zhǔn)化建模語(yǔ)言，旨在捕獲應(yīng)用程序用戶界面的結(jié)構(gòu)和屬性。本文討論了IFML模型適用MVC結(jié)構(gòu)并生成MVC模式下的類圖信息系統(tǒng)，如果能開(kāi)發(fā)出基于此模式的一個(gè)通用軟件框架，將為軟件工程化管理開(kāi)創(chuàng)一個(gè)新局面。

參考文獻(xiàn)：

[1] MILLER J， MUKERJI J. MDA guide version 1.0.1[EB/OL]. OMG，2003，http：//www.omg.org/docslomg/03.06.01.pdf.

[2] BRAMBILLA M， BONGIO A， BUTTI S，et al. Web applications design and development with WebML and WebRatio 5.0[EB/OL]. https：//link.springer.com/chapter/10.1007/978-3-319-17716-8.

[3] M BRAMBILLA， P FRATERNALI. Interaction flow modeling language—model-driven UI engineering of Web and mobile Apps with IFML[M]. Morgan Kauffman， USA，2014.

[4] 吳潔明，方英蘭.軟件工程實(shí)例教程[M].北京：清華大學(xué)出版社，2010.

[5] OBJECT MANAGEMENT GROUP.Interaction flow modeling language.Version 1.0[EB/OL]. http：//www.omg.org/spec/IFML/1.0/. IFML，2015.

[6] 姚騰輝.基于MVC模式的Web前端開(kāi)發(fā)研究與應(yīng)用[D].合肥：合肥工業(yè)大學(xué)，2016.

[7] 盧長(zhǎng)利.基于MVC模式的Web框架構(gòu)建與應(yīng)用[D].西安：西安電子科技大學(xué)，2009.

[8] 李霞.MVC設(shè)計(jì)模式的原理與實(shí)現(xiàn)[D].長(zhǎng)春：吉林大學(xué)，2004.

[9] 于春娜，王晨升，楊光，等.Web前端MVC框架的意義研究[J].產(chǎn)業(yè)與科技論壇，2014（1）：28-29.

[10] MARCO BRAMBILLA， ANDREA MAURI， ERIC UMUHOZA. Extending the interaction flow modeling language （IFML） for model driven development of mobile applications front end[EB/OL]. http：//www.doc88.com/p-3327742399440.html.

[11] 王永濤，劉勇.基于MDA的模型轉(zhuǎn)換研究與應(yīng)用[J].計(jì)算機(jī)工程，2011，37（16）：84-85.

[12] 張?zhí)?，張巖，于笑豐，等.基于MDA的設(shè)計(jì)模式建模與模型轉(zhuǎn)換[J].軟件學(xué)報(bào)，2008，19（9）：2203-2217.endprint