基于Ext JS框架MVC模式的復用技術研究

周 玉，聞金華，徐建良

(中國海洋大學 信息科學與工程學院，山東 青島 266100)

0 引言

復用概念的首次提出是在1968年NATO軟件工程會議上，在其后的發展過程中，有許多復用技術的研究成果和復用實踐活動[1]。目前國內外對復用技術的研究很熱門，但較多的研究是頂層設計和后端的軟件復用技術。文獻[1]中提出了軟件構件技術在軟件復用中的應用；文獻[2]中提出構件通用型MVC模式的設計方法；文獻[3]中提出組件級的建議，能更精確地提供可重用的代碼；文獻[4]中通過搜集開源代碼軟件開發的數量和質量研究代碼重用。而對前端的復用技術的研究也僅限于通用組件化的研究，文獻[5]中實現了一種聲明式組件開發的前端庫，使組件可以方便地遷移到其他項目中去。

后端復用技術已經趨于成熟，而隨著系統業務邏輯和用戶與系統交互量的增加，前端頁面的復雜度和代碼規模呈現數量級式增長，這樣就造成了一個普遍的問題——效率問題，包括前端代碼的加載次數、頁面的渲染時間、瀏覽器加載時間等。據相關數據顯示，前端代碼整個運行加載的時間占整個系統的70%以上[6]。所以，前端代碼的優化在提高整個系統的效率上會有事半功倍的效果。因此，前端應用的軟件復用技術成為研究熱點。針對前端復用技術的研究，僅僅有良好的頂層設計是遠遠不夠的[6]，如何在系統中進行具體的融合和應用，是真正解決問題并產生實際意義的關鍵。

本文在成果管理系統重構的基礎上，嚴格遵循重構設計原則，在滿足系統已有功能的前提下，運用MVC設計模式、OOP思想，將系統現有的前端框架Ext JS 2.0升級，采用全新的 Ext JS 4.2 重新編碼，將系統代碼進行重構。

成果管理系統是對研究成果進行管理的系統。研究成果有3種，即論文、專利、獎勵。對每一種成果進行添加、修改、查看、刪除、查詢和審核等操作。隨著業務的擴展，又增加了對軟件著作權、標準、品種和著作4種成果的管理。在目前的成果管理系統中，對每一種成果進行分別管理，開發過程彼此獨立。不難發現，不同成果有很多相似信息，而且對每一種成果的操作是一樣的。這樣就造成了在不同的成果代碼里有很多重復的代碼，不僅占用了很多空間，而且導致代碼讀取速度慢，響應時間長。并且在面對增加4種新成果的用戶需求時，會導致很多重復的工作，可維護性降低。

鑒于系統中的上述特點，充分利用Ext JS框架引入的MVC模式和OOP思想進行模型設計和編程。MVC模式提供了一個完善的代碼組織和維護的方向，將系統分解為模型、視圖、控制器三部分[7]，每一部分都相對獨立，職責單一，在實現過程中可以專注于自身的核心邏輯。其基本思想就是“關注點分離”。面對多種成果相似度較高又分屬不同組件的情況，將系統分解成一些相對獨立的、具有高度復用性的模塊組合[8], 既減少了冗余的代碼,也具有了對將來產生的問題和需求的通用性。使用OOP思想來對實體進行抽象，利用繼承和封裝的方式進行編程，是提高軟件生產效率和質量的現實可行的途徑。因此，基于Ext JS框架MVC模式的復用技術是值得研究的。

1 模型的復用技術

1.1 構建抽象模型及繼承層次

模型是應用程序提供信息存儲的對象。因此，良好的模型設計在系統的數據傳輸中占有很重要的地位，在OOP里的繼承概念是一種重用已有對象代碼的方式[9]。在Ext JS應用程序中，使用OOP思想，模型初步設計的UML類圖如圖1所示，為每一個實體構建一個Model。從圖1可以看出，模型重復字段的書寫，導致代碼規模大等問題。針對這個問題，提出了為成果和成果完成人分別構建一個包含共同字段的抽象模型，3個成果的特定模型繼承成果抽象模型，論文和專利的成果完成人特定模型繼承成果完成人抽象模型，而獎勵完成人因為沒有特殊字段，所以直接使用成果完成人抽象模型，從而實現復用技術在成果系統中的應用。改進后的UML類圖如圖2所示。

圖1 初步設計的UML類圖

圖2 改進后的UML類圖

1.2 初步設計和改進后的模型對比

通過構建抽象模型和繼承層次，由圖1改進到圖2所示的模型，根據成果管理系統用Firfox瀏覽器的測試，初步設計和改進后的模型設計的文件大小和加載時間的對比如表1所示。

由于服務器響應時間和網絡傳輸原因，測試的數據可能存在誤差，表1的數據是多次測試數據的平均值，從表1可以看出，雖然改進后的模型多了兩個抽象模型，但是其他模型的代碼規模均減少，所以總體來看，文件大小和加載時間都有接近一半的縮小，提高了系統的執行效率，降低了代碼規模，這對于精簡和優化前臺代碼有重大意義。

表1 文件大小和加載時間的對比

在面對增加4種新成果的用戶需求時，改進后的模型的優越性更加突出。只需要構建這4種成果的特定模型；成果完成人只有著作成果有編者角色的特殊字段，所以只需要構建一個著作完成人的特定模型。這樣，既減少了重復的代碼和工作量，也提高了系統的可重用性和可維護性。

在系統的列表界面，需要通過Window的形式展示獨立的成果完成人的Grid。那么，此Grid的另一位開發人員可以直接引用這里創建的成果完成人的抽象模型和特定模型，有助于團隊之間的協作。

2 封裝通用面板

2.1 成果錄入面板引用通用面板

視圖層是影響用戶交互體驗的直接因素，面板復用是減少頁面渲染時間的有效途徑。所以，在成果系統中，以成果的錄入面板為例，由初步設計一個面板對應一個View，改進到由圖3所示的面板類圖。封裝了通用面板OwnerGrid、ProjectGrid、PlatformGrid和AbstractBasicInfo供3類成果錄入面板復用。由于論文成果相對于其他成果多了一個收錄情況，因此為論文成果創建了特定面板PaperAddForm，其他成果的錄入面板通過AbstractAddForm創建，使AbstractAddForm被擴展成了能表示3種成果的錄入面板，而3種成果的特定信息放在各自的BasicInfo面板中。

圖3 成果錄入面板引用通用面板類圖

2.2 封裝通用面板的優化體現

不同復用角度優化體現：

(1)從3種成果錄入面板引用通用面板角度，減少了2次AbstractAddForm、2次OwnerGrid、ProjectGrid和PlatformGrid、2次AbstractBasicInfo的重復代碼，同時在時間上減少了450 ms。

(2)從創建3種成果編輯面板角度，只需要創建一個包含3個Button的AbstractEditForm面板，引用封裝好的通用面板即可，這樣錄入面板和編輯面板幾乎可以同時完成。

(3)從面對增加4種新成果的用戶需求角度，只需要創建4種成果特有信息面板，既減少了成倍的代碼和工作量，又提高了系統的可擴展性。

(4)從系統中其他面板角度，有需要通過Window的形式展示獨立的成果完成人的Grid、所屬項目的Grid和所屬平臺的Grid。上述 Grid的另一位開發人員可以直接引用這里封裝好的通用面板，體現了高內聚、松耦合的特性。

3 封裝通用控制器

3.1 通用控制器的監聽和通用方法實現

控制器在MVC框架中充當了粘合劑的角色，是一系列事件處理器函數的集合。所以，在時間的占用上起關鍵作用。因此，提高系統的響應速度，控制器占有舉足輕重的地位。改進前的控制器設計是一個面板對應一個控制器，導致重復功能的監聽和實現。改進后的通用控制器是對多個成果視圖的統一控制。以添加界面的保存監聽方法為例，通過繼承方式構建的通用面板，其xtype為abstractaddform, 因此通用選擇器的監聽如圖4所示。

圖4 通用選擇器的監聽

通用控制器的通用方法，根據成果類型和組件關鍵字等，自動配置成所需面板的功能。以3種成果使用同一個保存成果方法為例，保存成果的通用方法的主要代碼如圖5所示，其中有兩個重點，分別用文本框標出:(1)取得要保存的數據，這個getData方法也是一個通用方法，通過傳遞的3個關鍵字來判斷取何種成果的數據；(2)把URL通過achievementType變量的形式擴展成3個成果通用的URL。

圖5 保存成果的通用方法

這樣只用了一個通用的監聽和方法，就實現了3種成果的保存功能，為保存面板數據提供了通用功能。

3.2 升級通用控制器

為了盡可能地簡化和復用方法，在一個控制器里實現有相似功能面板的通用功能[9]。采用組合機制(mixins)對通用控制器進行了升級。以添加、查看和編輯為例，升級的通用控制器如圖6所示，不僅使3種成果的添加、編輯和查看視圖統一控制，而且通過mixins方式將組合通用方法融入到3種通用控制器。

表3 升級的通用控制器文件大小和加載時間

圖6 升級的通用控制器

3.3 升級的通用控制器和改進前的控制器比較

(1)從3種成果方面，再次升級的通用控制器，使3種成果的同種功能只需要一個通用控制器來實現。這就使得文件大小縮小為1/3，文件的縮小，必然會使加載時間變小。而改進前的控制器則會導致不同成果的控制器功能重復。

(2)從組合通用方法方面，每個通用控制器只需組件監聽，調用mixins融入的組合通用方法即可，使得通用控制器的大小縮小。而改進前的控制器則會導致添加和編輯、編輯和查看之間功能的重復。

(3)后期加入4種新成果，控制器層不用寫，為維護人員省略了最復雜的部分；更重要的是，增加新成果，改進前控制器的時間和大小會隨之成倍地增加，而升級的通用控制器的時間和大小是不變的。

表2 改進前控制器文件大小和加載時間

4 結 論

本文研究了基于Ext JS框架MVC模式的復用技術，使代碼得到精簡和優化。構建抽象模型及其繼承層次，減少了前端代碼的加載時間，同時提高了系統的可重用性。封裝了通用面板，減少了代碼的冗余，明顯縮短了頁面渲染時間。又封裝了通用控制器，實現了最通用的代碼，通用控制器采用組合機制進行升級，解決了多個控制器監聽重復功能的問題，使創建新的界面也變得更加容易。

這種基于MVC的復用技術適用于所有基于Ext JS的具有相似信息的前端界面。用成果系統進行測試，將30個具有共同信息的列表縮減為3個通用列表，整個成果系統的前端代碼由8.11 MB縮減為4.36 MB，顯示了此方法的切實可行和優越性。此方法使基于Ext JS框架MVC模式復用技術研究前進一小步，使軟件生產效率和質量顯著提高。

下一步主要工作是繼續研究更多可復用的技術，構建基于Ext JS4.2的復用框架。

[1] 楊芙清,梅宏,李克勤.軟件復用與軟件構件技術[J].電子學報,1999,27(2):68-75， 51.

[2] 劉亮,霍劍青,郭玉剛,等.基于MVC的通用型模式的設計與實現[J].中國科學技術大學學報,2010,40(6): 635-639.

[3] OHTANI A,HIGO Y, Ishihare T,et al.On the level of code suggestion for reuse[C]// IEEE International Workshop on Software Clones IEEE.2015.

[4] HAEFLIGER S, KROGH G V, SPAETH S. Code reuse in open source software[J]. Management Science, 2008, 54(1): 180-193.

[5] 戴翔宇.Web前端工程組件化的分析與改造[D].長春:吉林大學,2016.

[6] 王悅.基于Extjs4的Web前端框架設計與應用[D].青島:中國海洋大學,2015.

[7] VILLA C,GONZALEZ A.Learning Ext JS 4[EB/OL]. (2013-01-25)[2017-6-25]https://www.packtpub.com/web-development/learning-ext-js-4.

[8] CHEN L Y,QING G.Research on framework developing technology based on MVC[J].Advances in Information Sciences and Service Sciences, 2011,3(3): 25-31.

[9] GRONER L.精通Ext JS(1版)[M].盧俊祥,譯.北京:人民郵電出版社,2014.