李雅雯+劉曉燕

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

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

DOIDOI：10.11907/rjdk.172257

中圖分類號：TP301

文獻標識碼：A 文章編號：1672-7800（2018）002-0038-03

0 引言

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

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

1 IFML相關理論

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

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

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

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

2 MVC模式

MVC（Model-View-Controller）[6]模式是一種 Web應用程序開發(fā)模式，通過將復雜的 Web 應用程序分成模型（Model）、視圖（View）和控制器（Controller）3個部分，實現Web 系統的職能分工。

2.1 MVC結構

MVC模型結構[7]如圖2所示。視圖負責界面數據和用戶請求的采集和顯示，將接收到的模型處理結果顯示給用戶，一個模型可以對應一個或多個視圖?？刂破魇悄Ｐ团c視圖的聯系紐帶，負責用戶請求的接收和轉發(fā)。模型封裝了系統的核心流程和業(yè)務規(guī)則，是 MVC設計模式[8]的核心，其接收來自視圖的用戶請求或數據，并將處理結果返回給視圖。

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

2.2 MVC模式下的IFML

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

控制器方面，IFML允許設計者通過定義控制器處理相關事件。

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

3 實例分析

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

3.1 用例圖

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

3.2 類圖

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

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

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

3.3 類圖信息系統

在MVC模式下，將系統的靜態(tài)視圖、動態(tài)視圖和功能視圖加以整合，重新構建成為一個類圖信息系統。類圖中的類在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 結語

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

參考文獻：

[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] 吳潔明，方英蘭.軟件工程實例教程[M].北京：清華大學出版社，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前端開發(fā)研究與應用[D].合肥：合肥工業(yè)大學，2016.

[7] 盧長利.基于MVC模式的Web框架構建與應用[D].西安：西安電子科技大學，2009.

[8] 李霞.MVC設計模式的原理與實現[D].長春：吉林大學，2004.

[9] 于春娜，王晨升，楊光，等.Web前端MVC框架的意義研究[J].產業(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的模型轉換研究與應用[J].計算機工程，2011，37（16）：84-85.

[12] 張?zhí)?，張巖，于笑豐，等.基于MDA的設計模式建模與模型轉換[J].軟件學報，2008，19（9）：2203-2217.endprint