隨著Web技術(shù)的快速發(fā)展和移動互聯(lián)網(wǎng)的到來,前端領(lǐng)域?qū)崿F(xiàn)了大跨步發(fā)展。然而,傳統(tǒng)的Web開發(fā)操作較繁瑣復雜、開發(fā)周期較長、性能低、后期維護困難,特別在插件使用方面存在命名沖突、修改插件樣式困難等問題�；诓寮_發(fā)的應(yīng)用程序,可減少開發(fā)時間、提高應(yīng)用程序性能及降低后期維護困難度,論文提出一種基于MVVM模式的前端框架插件庫,實現(xiàn)對插件的高效管理。論文首先在研究MVVM模式、VirtualDOM構(gòu)建方法、插件的主要特性、國內(nèi)外主流插件的體系架構(gòu)及實現(xiàn)原理的基礎(chǔ)上,提出了一種前端框架插件及插件庫架構(gòu)設(shè)計并進行了實現(xiàn)。插件及插件庫采用模塊式設(shè)計,各功能之間相互獨立,降低耦合度;底層使用VirtualDOM,通過VirtualDOM擴展DOM節(jié)點屬性及數(shù)據(jù)處理方法,提高DOM節(jié)點的靈活性和頁面的編譯、渲染性能。論文其次對插件庫定義了一套標準化命名方式,減少插件使用時因命名沖突引起的格式問題;提供在線配置服務(wù),減少前端開發(fā)者修改插件的時間;實現(xiàn)自動化編譯、動態(tài)打包、下載及API文檔,降低插件對硬件配置的要求,提高插件的易用性。論文最后對插件和插件庫進行功能及性能測試,測試結(jié)果表明,基于MVVM模式... 

【文章來源】：西南科技大學四川省

【文章頁數(shù)】：82 頁

【學位級別】：碩士

【部分圖文】：

圖１－１?Ｖｕｃ組件樹結(jié)構(gòu)圖??雖然國內(nèi)有多款帶有插件的前端框架，但是大多數(shù)框架是基于ＭＶＣ模式的，Ｍｏｄｅｌ??

將ＭＶＣ模式中Ｖｉｅｗ的行為和狀態(tài)抽象化，從而讓開發(fā)者將視圖ＵＩ和業(yè)務(wù)邏輯分開，??同時使用ＶｉｅｗＭｏｄｅ丨實現(xiàn)數(shù)據(jù)的雙向綁定。ＭＶＶＭ模式使用數(shù)據(jù)綁定基礎(chǔ)結(jié)構(gòu)，可以??快速、便捷的構(gòu)建Ｕｌｔ３％它的技術(shù)模型如圖２－１所示。??ＨＴＭＬ?Ｊ?ＨＴＭＬ?Ｌ?Ｖｉｅｗ??雖綁定１１行為處理１１視圖腦｜?ＶｉｅｗＭｏｄｅｌ??１?ＪＳＯＮ?￣］?＾?數(shù)據(jù)?’?Ｍｏｄｅｌ???ｉｉ????１＇???｜?ＪＱＵＥＲＹＡＪＡ）Ｔ｜?Ｉ?通’訊?｜?Ｓｅｒｖｉｃｅ??服務(wù)??圖２－１?ＭＶＶＭ模式技術(shù)模型圖??在應(yīng)用程序開發(fā)過程中，數(shù)據(jù)是程序的核心，代碼的實現(xiàn)總是和數(shù)據(jù)結(jié)構(gòu)緊密相??關(guān)。數(shù)據(jù)驅(qū)動可將復雜的程序代碼邏輯轉(zhuǎn)移到數(shù)據(jù)，從而降低邏輯復雜性。ＭＶＶＭ以??數(shù)據(jù)為中心，使視圖處于從屬地位，因此，在開發(fā)過程中，需將模板代碼和數(shù)據(jù)界限劃??分清楚，以降低Ｍｏｄｅｌ和Ｖｉｅｗ之間的稱合度。這樣，在改變程序邏輯的時候，只需修??改數(shù)據(jù)，而不需要修改模板代碼。相對于傳統(tǒng)的程序邏輯解決問題，使用ＭＶＶＭ模式??具有以下優(yōu)點：??（１）

進行初始化處理，初始化指令集接口函數(shù)為ｉｎｉｔＶｉｅｗＤｉｒｅｃｔｉｖｅｓ（ｅｌ），?ｅｌ表示視圖ｖｉｅｗ，??最后就是進行遍歷待編譯的Ｅｌｅｍｅｎｔ的孩子節(jié)點，進行文本節(jié)點、注釋節(jié)點以及元素節(jié)??點的處理。具體的編譯流程如圖２－２所示。??（開始）??Ｉ??創(chuàng)建Ｍｏｄｕｌｅ??Ｉ?￣￣??生成?ｖｉｒｔｕ?ａｌＤｏｍ??Ｌ?ｉ??組合??ｖｉｒｔｕａｌ?ＤｏｍｉｎｎｅｒＨＴＭＬ???Ｎ?＞｜?ｒＭｅｌｅｍｅｎｔ＾￣??處理屬性值為表達式的指令??－?Ｉ??初始化指令集??＜ａＳ？＾＞?Ｎ??Ｙ?Ｙ??▼???ｉ???移除注釋??／?ｎ?￣＾?ｉ?丄??——？麟?＾???????圖２－２?ＶｉｒｔｕａｌＤＯＭ編譯流程??１２??

【參考文獻】：
期刊論文
[1]淺議MVC設(shè)計模式在JavaWeb中的作用[J]. 張雪敏.  科技風. 2018(22)
[2]基于JQuery多關(guān)鍵字組合無刷新分頁技術(shù)的實現(xiàn)[J]. 孫仁鵬,劉富國.  軟件工程. 2017(08)
[3]Web前端中MVVM框架的應(yīng)用研究[J]. 莫文水.  網(wǎng)絡(luò)安全技術(shù)與應(yīng)用. 2017(04)
[4]Bootstrap在Web移動開發(fā)中的應(yīng)用[J]. 余楷鑫.  電腦知識與技術(shù). 2017(06)
[5]Web新興前端框架與模式研究[J]. 占東明,洪家偉,陳希楊,徐禮飛,辛鄢放.  電子商務(wù). 2016(10)
[6]基于Node.js平臺的天線控制軟件開發(fā)實例解析[J]. 賀祥.  廣播電視信息. 2016(05)
[7]簡談AngularJS在下一代Web開發(fā)中的應(yīng)用[J]. 董英茹.  軟件工程師. 2015(05)
[8]Node.js:一種新的Web應(yīng)用構(gòu)建技術(shù)[J]. 王金龍,宋斌,丁銳.  現(xiàn)代電子技術(shù). 2015(06)
[9]MVVM模式分析與應(yīng)用[J]. 劉立.  微型電腦應(yīng)用. 2012(12)
[10]試談計算機軟件中的插件技術(shù)[J]. 陳國棟.  電腦編程技巧與維護. 2010(16)

碩士論文
[1]基于React的前端廣告組件庫的設(shè)計與實現(xiàn)[D]. 裴春艷.山東大學 2018
[2]基于AngularJS的前端開發(fā)框架的設(shè)計與應(yīng)用[D]. 王少麗.大連海事大學 2018
[3]基于Web的測試用例管理及生成系統(tǒng)[D]. 陳穎超.西安電子科技大學 2017
[4]基于jQuery的Web前端組件開發(fā)研究與應(yīng)用[D]. 施人銅.東南大學 2015



本文編號：3432602