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

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

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

【學位級別】：碩士

【部分圖文】：

Web和AJAX工作原理對比圖

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

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

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

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



本文編號：3445555