Web前端中MVVM框架的應用研究

◆莫文水

（廣西現代職業技術學院建筑與信息工程系 廣西 547000）

安全模型、算法與編程

Web前端中MVVM框架的應用研究

◆莫文水

（廣西現代職業技術學院建筑與信息工程系 廣西 547000）

隨著人們需求的不斷提高，Web研究不斷深入，以期能夠最大程度地滿足人們當下對于信息等的需求。其中，Web逐漸出現前端和后端的分化，本文研究對象就是基于Web前端中進行的。MVVM框架在Web前端中具有很大的實踐意義，在一定程度上促進了Web前端的發展和進步。本文重點就是研究MVVM在Web前端中的應用研究，其中又將其與前端傳統開發思維進行了一定的對比，進一步呈現了MVVM在Web中的發展優勢。

Web前端；MVVM框架；應用研究

0 前言

Web應用逐漸趨向于復雜化，為了能夠加強Web中各組分的分工，實現Web高效率的行，引入了Web前端和后端的概念。Web前端中也逐漸形成了多種框架，比如：MVP、MVVM、MVC，本文將研究Web中MVVM框架的應用。

1 Web前端及MVVM框架概述

在對MVVM框架在Web前端中應用進行研究之前，必須要對這兩個概念進行簡要的了解，明白其基本的含義，進而才能夠開展下面的工作。

1.1 Web前端

Web在網頁設計中作為網頁被引用，現今被廣泛的翻譯為網絡、互聯網等技術領域，主要有三種形式，分別是超文本傳輸協議、超文本、超媒體[1]。而Web前端是一個新興的詞匯，是隨著Web的深入發展而產生的，其目的是為了滿足用戶交互需求。在此所指的前端泛指在 Web應用中能夠看得見碰的著的東西，有Web頁面的結構、Web層面的交互實現、Web的外觀視覺表現。

一般對于 Web前端人員的要求是精通 CSS、HTML、JavaScript，能夠清晰的了解常見瀏覽器兼容問題，對yahoo的性能優化有一定的了解。

1.2 MVVM框架

MVVM實際上就是Model-View-View-Modle的簡寫，此種框架是WPF與MVP相互結合形成的一種新型的架構框架，其基本原理是在MVP框架的基礎上大力引進WPF新特性，進而滿足用戶多樣化的需求。此種框架強調的是以數據為核心，利用數據驅動界面，而視圖則成為了從屬地位。

MVVM框架模式主要有三部分構成，分別是模型、視圖模型、視圖，在MVVM中單獨定制了一個Model，即是ViewModel，在此種的視圖邏輯可以利用數據的雙向綁定和命令綁定實現視圖和數據模型的自動同步。在MVVM中每個板塊都有不同的分工，視圖版塊主要的功能就是呈現界面，利用ViewModel和Model通信實現自身的獨立變化、修改等。在模型這一板塊中主要是對與業務邏輯相關的數據進行封裝和處理。至于視圖模型則是對視圖邏輯和View、Model模塊之間狀態的控制和封裝。

2 MVVM框架在Web前端開發中的優勢

將MVVM框架應用于Web前端開發很好地達到了交互界面的形成與擴展，在 Web前端的開發中發揮了很大的作用，下面就簡要對MWWM框架在Web前端開發中的優勢進行簡要分析。

2.1 可重用性

MVVM框架可以實現視圖邏輯的可重用性，將一些試圖邏輯放在一個ViewModel中，就可以讓許多的視圖來重用這段視圖邏輯，大大提高了MVVM在Web中的工作效率，為用戶節省了不少的時間。

2.2 低耦合

MVVM框架中十分重視視圖與模型的分離、獨立，其中，視圖能夠脫離模型而存在，并且能夠進行一定的變化和修改，也就是講在 Web 前端運行的過程中模型和視圖聯系不大，分工明確，兩者之間的工作互不影響，可以很好的保證MVVM框架的實際質量[2]。另外，視圖與模型之間的相對獨立，大大降低了這兩者之間的依賴性，使得相關結構更為穩定，在后期的開發或者改動中也有很大的發展空間和可行性，提高了開發成功的幾率以及開發深度。

2.3 降低前度測試難度

在Web前端的運行中需要進行不定期的測試，保證Web前端運行的質量，但是傳統的測試模式十分復雜，不利于工作的正常開展。所以在此情況下MVVM框架的優勢就顯現出來了，借助MVVM框架能夠很好對應用結構進行組織，將項目模塊變得更加具有條理化、邏輯化，這樣一來就會使得代碼的可讀性增強，進而降低Web前端的測試難度。

3 MVVM框架在Angular JS中的應用簡要分析

在日后互聯網技術的進一步發展下，MVVM框架的是進步還是落后取決于在互聯網背景下MVVM框架在Web前端中的實際應用。有關MVVM框架在Web中的應用研究是一項長期的任務，當下將MVVM框架作用發揮的很好地是Angular JS，該項模式技術是 Web前端應用中的一項最為關鍵的模式，基本上可以稱之為Web前端中JS的領導者。MVVM框架在Angular JS中的應用主要體現在視圖、模型以及視圖模型中，這三個方面全面展現了MVVM框架之于Web前端的重要作用，視圖主要作用于頁面的渲染和顯示，視圖模型則是將視圖與模型結合在一起一方面為視圖提供了數據，另一方面為模型運用提供了多種方式，在模型中主要充當面向業務數據、承載業務邏輯數據的載體。在Angular JS中十分強調模型思想，面向雙向數據，不同于以往傳統 Web前端，該項模式是一項新型的前端開發思維體現，將模型與視圖有機的結合在了一起，實現了兩者之間的分離和解耦，大大降低了Web前端的工作量，促進了Web前端開發的進步。

4 結束語

MVVM框架的出現無疑為Web前端的發展帶來了很大的動力與優勢，在互聯網技術逐漸發展的當下，更應該專注于MVVM框架性能的提高以及新產品技術的開發利用。MVVM框架實際上就是在原有MVC的基礎上進行的深入的研究和優化得到的，其性能卻遠遠高于MVC原有的性能，說明在Web前端的發展中需要更多的創新與借鑒，只有這樣才能夠更好地促進 Web前端的開發與發展。

[1]孫連山，李云倩. MVVM框架在Web前端的應用研究[J].電腦知識與技術，2016.

[2]肖小嵐，劉振宇.基于MVVM模式的Extjs框架在前端界面設計中的應用研究[J].電腦知識與技術，2016.