摘 ?要：MVC框架是Web前端開發(fā)中的一種創(chuàng)新的軟件構(gòu)建模式，在進行Web的設計開發(fā)中，要保證系統(tǒng)操作的有效性，保證系統(tǒng)測試性和延伸性等，才能保證系統(tǒng)設計的有效性。通過對于前端MVC框架概念介紹，分析前端MVC框架的意義，并探究Web前端MVC框架的前端發(fā)展方向，為促進Web前端MVC框架的有效應用和發(fā)展提供參考。

關鍵詞：Web;前端MVC框架;前端發(fā)展;意義

中圖分類號：TP399 ? ? 文獻標識碼：A

Abstract：MVC framework is an innovative software construction mode in Web front-end development.In the design and development of Web，it is necessary to ensure the effectiveness of system operation，system testing and extensibility，so as to ensure the effectiveness of system design.This paper introduces the concept of front-end MVC framework，analyzes the significance of front-end MVC framework，and probes into the direction of development of Web front-end MVC framework，which provides a reference for the effective application and development of Web front-end MVC framework.

Keywords：Web;front-end MVC framework;front-end development;significance

1 ? 引言（Introduction）

Web前端開發(fā)是在Web發(fā)展中逐漸細分出來的一種軟件開發(fā)模式，最初的前端開發(fā)相對比較單一，主要是以頁面為主要工作單元，對頁面中的內(nèi)容進行展示，這一時期的界面上的JavaScript邏輯較少，因此可以不用建設相應的框架。而在互聯(lián)網(wǎng)快速發(fā)展的今天，web頁面除了內(nèi)容展示外，還要實現(xiàn)與用戶的友好交互和突出一些炫麗的技術特效等，這樣就會導致前端代碼邏輯變得更加復雜多樣，尤其隨著4G時代開啟、5G時代的到來，移動通信技術和智能化移動通信設備進入了一個高速發(fā)展和全面普及的時期，這樣全段代碼的跨平臺、跨設備使用越來越頻繁，對代碼的復用性要求也越來越高，前端頁面的復雜性越來越高，系統(tǒng)維護性的要求不斷提升[1]。

MVC（Model View Controller）是一種軟件設計模式，最早應用于Desktop程序的開發(fā)中，后來隨著Web應用復雜程度的日益增加，MVC這種架構(gòu)模式被移植到WEB應用的后端（服務器端）的開發(fā)中，以使表示層與數(shù)據(jù)層實現(xiàn)分離[2]。而今隨著WEB前端應用程序開發(fā)研究的不斷發(fā)展，基于MVC框架在WEB應用的后端開發(fā)中的成功應用，很多軟件開發(fā)公司開始研究MVC框架在前端的應用，通過借助具有跨平臺、復用性且已維護的框架，實現(xiàn)web前端開發(fā)效率的大幅提升。

目前，MVC框架在前端的應用已由傳統(tǒng)的MVC框架產(chǎn)生了各種變體框架，如：MVP（Model-View-Presenter）、MVVM（Model-View-ViewModel）等[3]，其中代表性應用框架包括BackBone和AngularJS。

2 ? 前端MVC框架（Front-end MVC framework）

2.1 ? 傳統(tǒng)MVC框架

在MVC框架中，往往將一個應用劃分成三個層次，即模型層、視圖層和控制層[4]。這些不同層次擔任的工作任務也不盡相同。其中，模型層主要是數(shù)據(jù)模型，其主要作用是發(fā)揮對于應用程序的業(yè)務邏輯相關數(shù)據(jù)進行包裝和處理，在模型層能夠直接針對相關數(shù)據(jù)進行訪問。視圖層則是對于相關數(shù)據(jù)進行顯示。不過這種顯示往往是帶有一定目的，在視圖層中很少有程序邏輯存在，要想實現(xiàn)視圖層的新功能，則需要對于數(shù)據(jù)模型進行監(jiān)視和訪問?？刂茖咏柚刂破鲗τ谀Ｐ秃鸵晥D之間的關系進行有效的調(diào)控，這種控制更多的是對于應用程序流程進行控制，對于相應事件進行處理和響應，這些事件可能是用戶行為，還有數(shù)據(jù)模型上的改變，控制層對于用戶事件信息進行獲取，并通知模型層進行更新處理，最后將模型層的處理結(jié)果傳達給視圖層，視圖層的相關顯示信息也會發(fā)生改變，可以說，是控制器對于視圖層，以及模型層的一致性進行了有效的調(diào)節(jié)和控制[5]。具體的框架結(jié)構(gòu)圖如圖1所示。

2.2 ? 前端MVC框架

隨著前端MVC框架的深入研究和發(fā)展，現(xiàn)階段基于MVC框架設計的相關應用程序較多，相關的框架都能夠?qū)崿F(xiàn)相應問題的處理。其中，在MVC框架研究中發(fā)展比較突出的有BackBoneJS、AngularJS、Ember JS、JavaScript MVC、knockout JS等。這里的BackBoneJS能夠?qū)τ趹弥械膶哟畏蛛x問題進行有效解決，還能夠?qū)τ诔志脤?，以及REST同步服務，模型、視圖、事件驅(qū)動、模板和定位等。這一框架還能實現(xiàn)在模型發(fā)生改變后的視圖及時更新，一些公司借助這一框架來完成應用構(gòu)建，且能夠得到很好的社區(qū)支持。Ember JS更適用于桌面級別的相關應用開發(fā)工作，這種模型中的模塊化和標準化界面比較突出，系統(tǒng)不用親自來處理相關的信息和數(shù)據(jù)，還能夠?qū)崿F(xiàn)對于持久化、計算相關的屬性支持，能夠自動更新模板，支持正確的狀態(tài)管理，且系統(tǒng)還具有正確的文檔和模板管理。AngularJS則是谷歌創(chuàng)建的一種JS框架，能夠?qū)崿F(xiàn)對于應用程序中的詞匯進行有效的拓展，能夠幫助web程序中使用HTML動態(tài)內(nèi)容。實際上，MVC框架模型之間存在的差異比較顯著，但是綜合來看，其中的相關層之間分工明確，相互分離又相互連接。具體來看，模型層主要是實現(xiàn)對于視圖層的數(shù)據(jù)保存和處理功能，視圖層主要是顯示模型層中提供的數(shù)據(jù)和接收用戶輸入信息，并對此做出響應，模型更新后能夠及時對用戶進行更新反饋。控制層負責業(yè)務邏輯處理以及事件邏輯處理?？刂茖油ㄟ^對于數(shù)據(jù)進行增減和檢查改動，將結(jié)果傳遞到視圖層，由視圖層向用戶進行顯示[6]。

3 ?前端MVC框架的意義（Significance of front-end

MVC framework）

前端MVC框架很容易讓人聯(lián)系到JQuery，實際上，兩者之間還是存在一定差異的。一些程序員認為JQuery已經(jīng)基本上實現(xiàn)了前端開發(fā)的需要，不需要在研究開發(fā)和利用前端MVC框架了，但是嚴格來說的話，JQuery并不是框架模式，而是一種算庫，兩者的區(qū)別就是，庫能夠?qū)τ诖a、模板級別的復用以及對于復雜度的封裝問題實現(xiàn)解決，屬于一種系統(tǒng)開發(fā)工具，這種算庫可以為前端開發(fā)提供有效的封裝方案，用戶可以選擇使用，也可以選擇不適用，就算是應用了，也不會對于用戶自身的代碼結(jié)構(gòu)產(chǎn)生影響。但是框架就不一樣了，框架是對模式級別的復用以及對程序組織的規(guī)范，屬于一種解決方案，能夠有效提升系統(tǒng)開發(fā)工作效率。使用框架進行前端開發(fā)，需要遵循一定的框架應用規(guī)則。實際上前端MVC框架和JQuery的區(qū)別還是很明顯的，JQuery主要是以DOM操作為中心的，MVC框架主要是以模型為中心的，兩者解決的問題是不同的，前端MVC框架的目標是帶來一整套工作流程變更，這樣后端工程師就可以對于前端模型代碼進行有效編輯，實現(xiàn)前端和后端的有效聯(lián)系，交互工程師能夠處理UI和模型的互動關系，UI工作人員也能夠進行有效的HTML源碼的處理，這樣相關的開發(fā)工作效率就會大大提升，符合軟件開發(fā)工業(yè)化的標準和發(fā)展需要。

前端MVC框架應用到前端開發(fā)過程中的意義也是比較突出的。相對于后端開發(fā)程序來說，前端開發(fā)相對來說比較薄弱，但是很多程序員對于在前端開發(fā)利用MVC框架更是不理解，這就需要把握前端MVC框架應用的重要性，明確前端MVC框架的適用范圍。在一些項目體系中，模型部分并不是很復雜，而傳統(tǒng)的軟件開發(fā)系統(tǒng)中，模型層代碼最多，視圖層相對較少，但是在互聯(lián)網(wǎng)中，這種情況恰恰相反，因為模型層的復雜度不夠，使用前端MVC框架就會顯得有些大材小用，所以在前端MVC的使用范圍要做好確定，必須要確定產(chǎn)品類型，對于頁面型產(chǎn)品，可以使用一些基于服務器生成Web頁面和視圖，只需要借助一些簡單的JavaScript和JQuery就能夠?qū)崿F(xiàn)互動性增強的方法，這時候JQuery的應用效果比較好，因此也就不需要進行前端MVC框架使用，而針對應用軟件類的產(chǎn)品，就很需要應用軟件產(chǎn)品前端MVC框架應用了[7]。例如在進行程序開發(fā)的過程中需要API或是服務器通訊，就需要借助相應的視圖以及數(shù)據(jù)，將成熟的框架使用起來。

4 ?Web前端MVC框架發(fā)展方向（Development

direction of Web front-end MVC framework）

隨著信息技術的不斷發(fā)展，信息已經(jīng)成為全世界發(fā)展的主流資源，互聯(lián)網(wǎng)為信息交流更是提供了多種多樣的渠道，進一步加速了信息交流和傳播，在此背景下，Web前端MVC框架技術也在相關技術的發(fā)展推動下獲得了自身的不斷提升，Web前端MVC框架在互聯(lián)網(wǎng)軟件開發(fā)中的應用也越來越普遍，取得了一定的成效，目前，Web前端MVC框架也在積極探索和其他領域的合作，通過認證分析研究Web前端MVC框架的技術在數(shù)據(jù)處理、分析等方面的作用和效果，在軟件和網(wǎng)頁開發(fā)中，如何有效應用Web前端MVC框架等都需要進一步研究分析[8]。就Web前端MVC框架的發(fā)展趨勢來看，體現(xiàn)了Web前端MVC框架和時代發(fā)展相協(xié)調(diào)的趨勢，也體現(xiàn)了技術的進一步發(fā)展和完善。

在系統(tǒng)的軟件開發(fā)和網(wǎng)頁開發(fā)中，Web前端MVC框架發(fā)揮著關鍵作用，相對于以往的軟件和網(wǎng)頁開發(fā)工作來說，Web前端MVC框架在網(wǎng)頁和軟件的開發(fā)過程、操作流程、數(shù)據(jù)獲取等方面都顯得更加簡單易操作，而且借助這種框架進行開發(fā)設計的軟件和網(wǎng)頁質(zhì)量也更加可靠，此外，針對網(wǎng)頁和軟件開發(fā)，在進行靜態(tài)接口的查詢中，主要是采用HTML表單形式開展的，這就會導致在軟件和網(wǎng)頁的開發(fā)中，必須要遵循一定的規(guī)范要求，就會受到較多的限制。隨著信息技術的快速發(fā)展，相關的核心技術也在進一步優(yōu)化，Web前端MVC框架已經(jīng)被廣泛的應用到軟件、網(wǎng)頁的開發(fā)設計中了，成為軟件開發(fā)程序員廣泛使用的技術之一。不過，目前的Web前端MVC框架在進行軟件和網(wǎng)頁開發(fā)的過程中，存在的問題還是比較突出的，國內(nèi)外相關技術研究人員和學者也在積極探究相關的技術障礙和缺陷問題，為Web前端MVC框架技術的進一步完善奠定了基礎。

Web前端MVC框架實際上也屬于一種語言環(huán)境，并通過在軟件和網(wǎng)頁開發(fā)中的應用，實現(xiàn)自身的不斷完善。在進行Web前端MVC框架的相關研究中，一直將研究重點放在對于相關數(shù)據(jù)的整合和功能生成上。Web前端MVC框架應用過程中，軟件開發(fā)人員需要對于相關的軟件開發(fā)過程進行細致分析，在網(wǎng)頁查詢中，進行接口識別以及語言環(huán)境接觸，針對黑名單和白名單的識別送禮用，能夠為查詢接口的效率提升提供有效參考和幫助，在進行查詢接口的使用中，相關的框架語言環(huán)境也能夠發(fā)揮積極作用。這對于今后軟件和網(wǎng)頁的開發(fā)能夠發(fā)揮一定的促進作用。借助Web前端MVC框架進行軟件構(gòu)建，針對后臺數(shù)據(jù)節(jié)進行梳理，才能獲得更多的有價值的信息。在進行信息處理階段，必須要做到將信息和數(shù)據(jù)作為處理的重點對象，例如，對于實體概念等進行處理的過程中，首先是使用HTML表單進行處理，再進行后臺填充，最后通過有效查詢來獲得有用的信息，而在選擇使用哪種形式進行表單填充、進行數(shù)據(jù)信息獲取等方面，都需要針對Web前端MVC框架進行探究，也需要在進行Web前端MVC框架的開發(fā)中，進行相應的處理分析，才能有效提升語言環(huán)境的真實性。此外，Web前端MVC框架本身就屬于軟件開發(fā)中的操作步驟之一，對于相關的語言、數(shù)據(jù)等處理發(fā)揮著關鍵作用，對于網(wǎng)頁開發(fā)和軟件開發(fā)來說是一種新的技術發(fā)展領域。

近年來，軟件開發(fā)行業(yè)發(fā)展火熱，已經(jīng)成為我國國民經(jīng)濟的重要支柱型產(chǎn)業(yè)，軟件和網(wǎng)頁開發(fā)應用，也是信息時代、網(wǎng)絡時代發(fā)展的必然產(chǎn)物。開展Web前端MVC框架研究，對于進一步促進信息技術發(fā)展和互聯(lián)網(wǎng)金融進步等都具有重要意義。針對Web前端MVC框架而言，相關數(shù)據(jù)獲得、語言環(huán)境構(gòu)建的有效性和準確性等都是進行Web前端MVC框架身份驗證的重要依據(jù)，借助接口對于相關數(shù)據(jù)進行處理分析，能夠為軟件、網(wǎng)頁開發(fā)研究提供更廣闊的思路。例如，在進行Web前端MVC框架查詢操作后，將靜態(tài)和動態(tài)數(shù)據(jù)有效結(jié)合起來，能夠?qū)崿F(xiàn)更快的資源數(shù)據(jù)生成。在軟件開發(fā)領域中能夠發(fā)揮積極作用。隨著社會的進步發(fā)展，中小企業(yè)都傾向于構(gòu)建自己的網(wǎng)站，發(fā)揮企業(yè)的宣傳作用，打響企業(yè)聲譽、樹立企業(yè)形象。這進一步推動了我國軟件和網(wǎng)頁開發(fā)行業(yè)的發(fā)展，要求相關軟件和網(wǎng)頁開發(fā)企業(yè)要加快提升自身的工作效率，還要不斷提升軟件和網(wǎng)頁質(zhì)量。在Web前端MVC框架技術逐漸走進軟件、網(wǎng)頁開發(fā)的過程中，相關的程序設計人員也將這一技術和相關的軟件開發(fā)技術結(jié)合起來，實現(xiàn)相關技術的進一步融合和利用，實現(xiàn)了Web前端MVC框架技術流程的不斷簡化，為軟件和網(wǎng)頁開發(fā)提供了有效的技術選擇。作為一種軟件和網(wǎng)頁開發(fā)新技術，Web前端MVC框架技術在目前的網(wǎng)頁和軟件開發(fā)中占據(jù)著重要地位，且隨著該技術的進一步發(fā)展進步，Web前端MVC框架還在進一步完善中，將來Web前端MVC框架將在軟件和網(wǎng)頁開發(fā)中發(fā)揮更大的作用。

5 ? 結(jié)論（Conclusion）

MVC概念最早是在桌面應用開發(fā)中使用的，這種設計模式強制性地將程序的輸入、處理和輸出分開，最典型的MVC就是JSP+servlet+javabean的模式：Jsp代表視圖，也就是負責與用戶進行交互，既向用戶輸出數(shù)據(jù)也接收用戶輸入;servlet代表控制，接收來自視圖的請求、控制跳轉(zhuǎn)和工作流;javabean代表模型，主要負責業(yè)務數(shù)據(jù)和業(yè)務邏輯處理。隨著Asynchronous Javascript And XML（異步JavaScript和XML）的興起、B/S模式應用程序的不斷發(fā)展和web應用軟件開發(fā)工作的進一步細分，MVC的應用可使整個WEB項目前端開發(fā)的清晰度、明朗性和可擴展性方面得到大大改善，尤其是對需工程化開發(fā)的大型項目MVC的應用更加必要。根據(jù)本文分析，Web前端MVC框架技術的應用優(yōu)勢比較突出，相關的技術發(fā)展也在進一步完善中，對此，開發(fā)和利用Web前端MVC框架技術對于提升軟件和網(wǎng)頁開發(fā)的工作效率具有積極意義，Web前端MVC框架技術的發(fā)展也將帶動軟件和網(wǎng)頁開發(fā)技術走向一個嶄新的高度。

參考文獻（References）

[1] Yingan Shao.Research on the reform of Web front-end courses based on Internet+Mode[A].Institute of Management Science and Industrial Engineering.Proceedings of 2018 3rd International Conference on Education，Sports，Arts and Management Engineering[C].Institute of Management Science and Industrial Engineering，2018（5）：180-184.

[2] Gunawan Gunawan，Armin Lawi，Adnan Adnan.Analisis Arsitektur Aplikasi Web Menggunakan Model View Controller（MVC）pada Framework Java Server Faces[J].Scientific Journal of Informatics，2016，3（1）：24-28.

[3] Jia-ying WANG.The Design and Application of Front End MVVC Framework Based on Management Platform[A].Science And Engineering Research Center.Proceedings of 2016 International Conference on Electrical Engineering and Automation[C].Science And Engineering Research Center，2016（5）：486-490.

[4] 于春娜，王晨升，楊光，等.Web前端MVC框架的意義研究[J].產(chǎn)業(yè)與科技論壇，2014，13（01）：52-53.

[5] 霍福華，尹宇孚.基于J2EE架構(gòu)的五層Web開發(fā)模型研究[J].通訊世界，2017（01）：225-226.

[6] 喬淑夷.基于MVC模式的Web前端框架關鍵技術研究與實現(xiàn)[D].中國海洋大學，2014.

[7] 牟鳳瑞，劉志軍.面向?qū)ο筌浖O計中的MVC框架及面向?qū)ο缶幊虘⒁獾膯栴}[J].滄州師范?？茖W校學報，2007? ? ?（02）：36-37.

[8] 苗潔.基于EasyUI框架與Spring MVC框架的權(quán)限管理系統(tǒng)的設計與實現(xiàn)[J].電腦知識與技術，2015，11（15）：53-55.

作者簡介：

霍福華（1984-），男，碩士，講師.研究領域：WEB應用開發(fā)，數(shù)據(jù)分析與處理.