發(fā)布時(shí)間：2021-10-19 20:32

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

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

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

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

【部分圖文】：

Web和AJAX工作原理對(duì)比圖

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

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

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

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



本文編號(hào)：3445555