用戶基于網(wǎng)絡(luò)開展的各種活動已不滿足于簡單的頁面瀏覽,而要求的是更多的功能與互動,導(dǎo)致網(wǎng)站的功能越來越多、復(fù)雜度也越來越高。在網(wǎng)站功能實現(xiàn)中,很多功能的組成部分已逐漸從后端移向前端,導(dǎo)致前端功能也越來越多、越來越復(fù)雜。在大量的前端功能開發(fā)過程中,發(fā)現(xiàn)有很多共性部分,其代碼是相似的,為了實現(xiàn)這些相似部分功能的復(fù)用,避免重復(fù)開發(fā),也需要采用框架來對一些共性進行提取,以提高開發(fā)效率,所以進行前端框架的研究至關(guān)重要。如今國內(nèi)外涌現(xiàn)出很多優(yōu)秀的前端框架,這些框架實現(xiàn)了功能分層,方便地進行功能修改,但結(jié)合實際的業(yè)務(wù)需求仍然有一些相似的邏輯需要重復(fù)開發(fā)。另外,用戶對數(shù)據(jù)處理能力、及時響應(yīng)和交互能力、數(shù)據(jù)安全機制的要求越來越高,在前端實現(xiàn)中也需要考慮適應(yīng)這種需求。針對這些問題,進行了前端框架的研究。首先進行了框架總體設(shè)計,借鑒后端數(shù)據(jù)驅(qū)動思想,采用AngularJS的數(shù)據(jù)綁定、依賴注入機制,提供了良好的數(shù)據(jù)處理與交互能力。然后選取MVVM開發(fā)模式,將前端分成Model、View、ViewModel三層,對頁面顯示規(guī)則、自定義標簽庫、自定義指令、數(shù)據(jù)通用操作、數(shù)據(jù)驗證等方面進行詳細設(shè)計,提高了數(shù)據(jù)安全性,... 

【文章來源】：大連海事大學(xué)遼寧省 211工程院校

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

【學(xué)位級別】：碩士

【部分圖文】：

Web和AJAX工作原理對比圖

ＭＶＣ設(shè)計模式最初由挪威計算機科學(xué)家Ｔｒｙｇｖｅ?Ｒｅｅｎｓｋａｕｇ在７０年代提出并??應(yīng)用在Ｘｅｒｏｘ?ＰＡＲＣ的Ｓｍａｌｌｔａｌｋ系統(tǒng)上，成功的將數(shù)據(jù)模型從系統(tǒng)內(nèi)容中分離出??來［３３］。前端使用ＭＶＣ模式易于前端程序的開發(fā)與維護。ＭＶＣ模式如圖２．２所示。??控制器??（Ｃｏｎｔｒｏｌｌｅｒ）??用戶－侏，／??棚選擇?狀態(tài)改變龍回模塊??／／＿?＼＼??＾?變化通知?Ｉ??視圖?＜??模型??（Ｖｉｅｗ）??？?（Ｍｏｄｅｌ）??獲取數(shù)據(jù)??圖２．２ＭＶＣ模式圖??Ｆｉｇ．?２．２?Ｔｈｅ?ＭＶＣ?ｐａｔｔｅｒｎ??模型（Ｍｏｄｅｌ）：是指應(yīng)用程序中處理數(shù)據(jù)邏輯的部分［３４］。模型和視圖是一對??多的關(guān)系，即一個模型可以向很多的視圖提供數(shù)據(jù)。多個視圖共用同一個模型，??大大減少了代碼量。在前端框架中，當(dāng)控制器從服務(wù)器端獲取數(shù)據(jù)時，就將數(shù)據(jù)??包裝成模型實例，然后將這些數(shù)據(jù)模型暴露給視圖層。模型也可以封裝用戶請求??的數(shù)據(jù)，并將數(shù)據(jù)封裝成某種格式，比如ＸＭＬ，ＪＳＯＮ格式，然后發(fā)送給服務(wù)器??端進行處理。??－１３－??

之。于ＡｎｇｕｌａｒＪＳＭＶＶＭＶＶＭ的提出源于ＷＰＦ，主要是用于分離應(yīng)用界面層和業(yè)務(wù)邏輯層［３＇Ｍ訪問層，同ＭＶＣ和ＭＶＰ模式一樣，來負責(zé)業(yè)務(wù)邏輯和數(shù)據(jù)封裝。ＶｉｅＵＩ界面，只負責(zé)界面的顯示。ＶｉｅｗＭｏｄｅｌ層將模型（Ｍｏｄｅｌ）層上處進行封裝，并定義了顯示層的邏輯，通知Ｖｉｅｗ層進行ＵＩ的更新，即視圖的交互。??ＭＷＭ模式中，視圖模型（ＶｉｅｗＭｏｄｅｌ）負責(zé)了所有的顯示邏輯，用型數(shù)據(jù)，控制視圖顯示，處理用戶操作等。只需要綁定一個屬性或方法就可以顯示數(shù)據(jù)，顯示邏輯以及用戶的操作處理方法等［４＜）］。從而使得視示邏輯分離開，視圖層只負責(zé)顯示頁面樣式，同時一個視圖模型（ＶｉｅｗＭ為多個視圖服務(wù)，即視圖層只需選擇視圖模型中對應(yīng)屬性和方法來進。使用這種模式開發(fā)的系統(tǒng)的前端是松耦合的，可以使得前端開發(fā)人員開發(fā)，也增加了前端的靈活性。ＭＶＶＭ模式的層次之間的關(guān)系如圖２．４

【參考文獻】：
期刊論文
[1]MVVM框架在Web前端的應(yīng)用研究[J]. 孫連山,李云倩.  電腦知識與技術(shù). 2016(06)
[2]基于JSON的數(shù)據(jù)交換模型[J]. 張滬寅,屈乾松,胡瑞蕓.  計算機工程與設(shè)計. 2015(12)
[3]主流Javascript框架比較與分析[J]. 李紅.  鞍山師范學(xué)院學(xué)報. 2015(04)
[4]簡談AngularJS在下一代Web開發(fā)中的應(yīng)用[J]. 董英茹.  軟件工程師. 2015(05)
[5]動態(tài)web應(yīng)用程序開發(fā)框架AngularJS的特性分析[J]. 王貫飛.  電子技術(shù)與軟件工程. 2014(06)
[6]淺談CSS3在網(wǎng)頁開發(fā)中的特性[J]. 毛沖.  江西廣播電視大學(xué)學(xué)報. 2014(01)
[7]用AngularJS開發(fā)下一代Web應(yīng)用[J]. 格林,夏德瑞,大漠窮秋.  中國科技信息. 2013(23)
[8]JavaScript與Java在Web開發(fā)中的應(yīng)用與區(qū)別[J]. 冀瀟,李楊.  通信技術(shù). 2013(06)
[9]MVVM模式分析與應(yīng)用[J]. 劉立.  微型電腦應(yīng)用. 2012(12)
[10]基于ZK的MVVM與MVP設(shè)計模式應(yīng)用研究[J]. 林亞明.  重慶文理學(xué)院學(xué)報(自然科學(xué)版). 2012(06)

碩士論文
[1]基于Angular和SSH的后勤管理系統(tǒng)的設(shè)計與實現(xiàn)[D]. 王新江.吉林大學(xué) 2016
[2]基于MVVM的Web前端響應(yīng)式框架的研究與集成[D]. 賈叢叢.云南大學(xué) 2016
[3]基于MVP的前端框架CASFront的設(shè)計與實現(xiàn)[D]. 郭佳寧.天津大學(xué) 2016
[4]基于JSON的信息交互系統(tǒng)的研究與實現(xiàn)[D]. 邢四為.安徽大學(xué) 2013
[5]嵌入式JavaScript引擎并行化研究與設(shè)計[D]. 余啟洋.電子科技大學(xué) 2013
[6]JSON序列化機制與傳輸效率研究[D]. 高靜.山東師范大學(xué) 2011
[7]基于Ajax框架和MVC設(shè)計模式的Web應(yīng)用研究[D]. 張迪.華東師范大學(xué) 2008
[8]面向RIA的MVC架構(gòu)設(shè)計與實現(xiàn)[D]. 楊萬兵.華中科技大學(xué) 2006
[9]物流配送系統(tǒng)規(guī)劃和設(shè)計研究[D]. 張國營.吉林大學(xué) 2004



本文編號：3445555