基于Ext JS框架MVC模式的復(fù)用技術(shù)研究

周 玉，聞金華，徐建良

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

0 引言

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

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

本文在成果管理系統(tǒng)重構(gòu)的基礎(chǔ)上，嚴(yán)格遵循重構(gòu)設(shè)計(jì)原則，在滿足系統(tǒng)已有功能的前提下，運(yùn)用MVC設(shè)計(jì)模式、OOP思想，將系統(tǒng)現(xiàn)有的前端框架Ext JS 2.0升級(jí)，采用全新的 Ext JS 4.2 重新編碼，將系統(tǒng)代碼進(jìn)行重構(gòu)。

成果管理系統(tǒng)是對(duì)研究成果進(jìn)行管理的系統(tǒng)。研究成果有3種，即論文、專利、獎(jiǎng)勵(lì)。對(duì)每一種成果進(jìn)行添加、修改、查看、刪除、查詢和審核等操作。隨著業(yè)務(wù)的擴(kuò)展，又增加了對(duì)軟件著作權(quán)、標(biāo)準(zhǔn)、品種和著作4種成果的管理。在目前的成果管理系統(tǒng)中，對(duì)每一種成果進(jìn)行分別管理，開發(fā)過程彼此獨(dú)立。不難發(fā)現(xiàn)，不同成果有很多相似信息，而且對(duì)每一種成果的操作是一樣的。這樣就造成了在不同的成果代碼里有很多重復(fù)的代碼，不僅占用了很多空間，而且導(dǎo)致代碼讀取速度慢，響應(yīng)時(shí)間長。并且在面對(duì)增加4種新成果的用戶需求時(shí)，會(huì)導(dǎo)致很多重復(fù)的工作，可維護(hù)性降低。

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

1 模型的復(fù)用技術(shù)

1.1 構(gòu)建抽象模型及繼承層次

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

圖1 初步設(shè)計(jì)的UML類圖

圖2 改進(jìn)后的UML類圖

1.2 初步設(shè)計(jì)和改進(jìn)后的模型對(duì)比

通過構(gòu)建抽象模型和繼承層次，由圖1改進(jìn)到圖2所示的模型，根據(jù)成果管理系統(tǒng)用Firfox瀏覽器的測(cè)試，初步設(shè)計(jì)和改進(jìn)后的模型設(shè)計(jì)的文件大小和加載時(shí)間的對(duì)比如表1所示。

由于服務(wù)器響應(yīng)時(shí)間和網(wǎng)絡(luò)傳輸原因，測(cè)試的數(shù)據(jù)可能存在誤差，表1的數(shù)據(jù)是多次測(cè)試數(shù)據(jù)的平均值，從表1可以看出，雖然改進(jìn)后的模型多了兩個(gè)抽象模型，但是其他模型的代碼規(guī)模均減少，所以總體來看，文件大小和加載時(shí)間都有接近一半的縮小，提高了系統(tǒng)的執(zhí)行效率，降低了代碼規(guī)模，這對(duì)于精簡(jiǎn)和優(yōu)化前臺(tái)代碼有重大意義。

表1 文件大小和加載時(shí)間的對(duì)比

在面對(duì)增加4種新成果的用戶需求時(shí)，改進(jìn)后的模型的優(yōu)越性更加突出。只需要構(gòu)建這4種成果的特定模型；成果完成人只有著作成果有編者角色的特殊字段，所以只需要構(gòu)建一個(gè)著作完成人的特定模型。這樣，既減少了重復(fù)的代碼和工作量，也提高了系統(tǒng)的可重用性和可維護(hù)性。

在系統(tǒng)的列表界面，需要通過Window的形式展示獨(dú)立的成果完成人的Grid。那么，此Grid的另一位開發(fā)人員可以直接引用這里創(chuàng)建的成果完成人的抽象模型和特定模型，有助于團(tuán)隊(duì)之間的協(xié)作。

2 封裝通用面板

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

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

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

2.2 封裝通用面板的優(yōu)化體現(xiàn)

不同復(fù)用角度優(yōu)化體現(xiàn)：

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

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

(3)從面對(duì)增加4種新成果的用戶需求角度，只需要?jiǎng)?chuàng)建4種成果特有信息面板，既減少了成倍的代碼和工作量，又提高了系統(tǒng)的可擴(kuò)展性。

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

3 封裝通用控制器

3.1 通用控制器的監(jiān)聽和通用方法實(shí)現(xiàn)

控制器在MVC框架中充當(dāng)了粘合劑的角色，是一系列事件處理器函數(shù)的集合。所以，在時(shí)間的占用上起關(guān)鍵作用。因此，提高系統(tǒng)的響應(yīng)速度，控制器占有舉足輕重的地位。改進(jìn)前的控制器設(shè)計(jì)是一個(gè)面板對(duì)應(yīng)一個(gè)控制器，導(dǎo)致重復(fù)功能的監(jiān)聽和實(shí)現(xiàn)。改進(jìn)后的通用控制器是對(duì)多個(gè)成果視圖的統(tǒng)一控制。以添加界面的保存監(jiān)聽方法為例，通過繼承方式構(gòu)建的通用面板，其xtype為abstractaddform, 因此通用選擇器的監(jiān)聽如圖4所示。

圖4 通用選擇器的監(jiān)聽

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

圖5 保存成果的通用方法

這樣只用了一個(gè)通用的監(jiān)聽和方法，就實(shí)現(xiàn)了3種成果的保存功能，為保存面板數(shù)據(jù)提供了通用功能。

3.2 升級(jí)通用控制器

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

表3 升級(jí)的通用控制器文件大小和加載時(shí)間

圖6 升級(jí)的通用控制器

3.3 升級(jí)的通用控制器和改進(jìn)前的控制器比較

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

(2)從組合通用方法方面，每個(gè)通用控制器只需組件監(jiān)聽，調(diào)用mixins融入的組合通用方法即可，使得通用控制器的大小縮小。而改進(jìn)前的控制器則會(huì)導(dǎo)致添加和編輯、編輯和查看之間功能的重復(fù)。

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

表2 改進(jìn)前控制器文件大小和加載時(shí)間

4 結(jié) 論

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

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

下一步主要工作是繼續(xù)研究更多可復(fù)用的技術(shù)，構(gòu)建基于Ext JS4.2的復(fù)用框架。

[1] 楊芙清,梅宏,李克勤.軟件復(fù)用與軟件構(gòu)件技術(shù)[J].電子學(xué)報(bào),1999,27(2):68-75， 51.

[2] 劉亮,霍劍青,郭玉剛,等.基于MVC的通用型模式的設(shè)計(jì)與實(shí)現(xiàn)[J].中國科學(xué)技術(shù)大學(xué)學(xué)報(bào),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].長春:吉林大學(xué),2016.

[6] 王悅.基于Extjs4的Web前端框架設(shè)計(jì)與應(yīng)用[D].青島:中國海洋大學(xué),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.