Web前端MVC框架的發展方向以及意義

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

關鍵詞：Web;前端MVC框架;前端發展;意義

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

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

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

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

2.1 ? 傳統MVC框架

在MVC框架中，往往將一個應用劃分成三個層次，即模型層、視圖層和控制層[4]。這些不同層次擔任的工作任務也不盡相同。其中，模型層主要是數據模型，其主要作用是發揮對于應用程序的業務邏輯相關數據進行包裝和處理，在模型層能夠直接針對相關數據進行訪問。視圖層則是對于相關數據進行顯示。不過這種顯示往往是帶有一定目的，在視圖層中很少有程序邏輯存在，要想實現視圖層的新功能，則需要對于數據模型進行監視和訪問。控制層借助控制器對于模型和視圖之間的關系進行有效的調控，這種控制更多的是對于應用程序流程進行控制，對于相應事件進行處理和響應，這些事件可能是用戶行為，還有數據模型上的改變，控制層對于用戶事件信息進行獲取，并通知模型層進行更新處理，最后將模型層的處理結果傳達給視圖層，視圖層的相關顯示信息也會發生改變，可以說，是控制器對于視圖層，以及模型層的一致性進行了有效的調節和控制[5]。具體的框架結構圖如圖1所示。

2.2 ? 前端MVC框架

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

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

MVC framework）

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

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

4 ?Web前端MVC框架發展方向（Development

direction of Web front-end MVC framework）

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

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

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

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

5 ? 結論（Conclusion）

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

參考文獻（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].產業與科技論壇，2014，13（01）：52-53.

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

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

[7] 牟鳳瑞，劉志軍.面向對象軟件設計中的MVC框架及面向對象編程應注意的問題[J].滄州師范專科學校學報，2007? ? ?（02）：36-37.

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

作者簡介：

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