Web前端MVC框架的發(fā)展方向以及意義

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

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

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

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

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

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

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

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

2.2 ? 前端MVC框架

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

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

MVC framework）

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

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

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

direction of Web front-end MVC framework）

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

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

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

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

5 ? 結(jié)論（Conclusion）

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

參考文獻(xiàn)（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前端框架關(guān)鍵技術(shù)研究與實現(xiàn)[D].中國海洋大學(xué)，2014.

[7] 牟鳳瑞，劉志軍.面向?qū)ο筌浖O(shè)計中的MVC框架及面向?qū)ο缶幊虘?yīng)注意的問題[J].滄州師范?？茖W(xué)校學(xué)報，2007? ? ?（02）：36-37.

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

作者簡介：

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