Web前端中MVVM框架的應(yīng)用研究

◆莫文水

（廣西現(xiàn)代職業(yè)技術(shù)學(xué)院建筑與信息工程系 廣西 547000）

安全模型、算法與編程

Web前端中MVVM框架的應(yīng)用研究

◆莫文水

（廣西現(xiàn)代職業(yè)技術(shù)學(xué)院建筑與信息工程系 廣西 547000）

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

Web前端；MVVM框架；應(yīng)用研究

0 前言

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

1 Web前端及MVVM框架概述

在對(duì)MVVM框架在Web前端中應(yīng)用進(jìn)行研究之前，必須要對(duì)這兩個(gè)概念進(jìn)行簡(jiǎn)要的了解，明白其基本的含義，進(jìn)而才能夠開展下面的工作。

1.1 Web前端

Web在網(wǎng)頁(yè)設(shè)計(jì)中作為網(wǎng)頁(yè)被引用，現(xiàn)今被廣泛的翻譯為網(wǎng)絡(luò)、互聯(lián)網(wǎng)等技術(shù)領(lǐng)域，主要有三種形式，分別是超文本傳輸協(xié)議、超文本、超媒體[1]。而Web前端是一個(gè)新興的詞匯，是隨著Web的深入發(fā)展而產(chǎn)生的，其目的是為了滿足用戶交互需求。在此所指的前端泛指在 Web應(yīng)用中能夠看得見碰的著的東西，有Web頁(yè)面的結(jié)構(gòu)、Web層面的交互實(shí)現(xiàn)、Web的外觀視覺表現(xiàn)。

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

1.2 MVVM框架

MVVM實(shí)際上就是Model-View-View-Modle的簡(jiǎn)寫，此種框架是WPF與MVP相互結(jié)合形成的一種新型的架構(gòu)框架，其基本原理是在MVP框架的基礎(chǔ)上大力引進(jìn)WPF新特性，進(jìn)而滿足用戶多樣化的需求。此種框架強(qiáng)調(diào)的是以數(shù)據(jù)為核心，利用數(shù)據(jù)驅(qū)動(dòng)界面，而視圖則成為了從屬地位。

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

2 MVVM框架在Web前端開發(fā)中的優(yōu)勢(shì)

將MVVM框架應(yīng)用于Web前端開發(fā)很好地達(dá)到了交互界面的形成與擴(kuò)展，在 Web前端的開發(fā)中發(fā)揮了很大的作用，下面就簡(jiǎn)要對(duì)MWWM框架在Web前端開發(fā)中的優(yōu)勢(shì)進(jìn)行簡(jiǎn)要分析。

2.1 可重用性

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

2.2 低耦合

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

2.3 降低前度測(cè)試難度

在Web前端的運(yùn)行中需要進(jìn)行不定期的測(cè)試，保證Web前端運(yùn)行的質(zhì)量，但是傳統(tǒng)的測(cè)試模式十分復(fù)雜，不利于工作的正常開展。所以在此情況下MVVM框架的優(yōu)勢(shì)就顯現(xiàn)出來了，借助MVVM框架能夠很好對(duì)應(yīng)用結(jié)構(gòu)進(jìn)行組織，將項(xiàng)目模塊變得更加具有條理化、邏輯化，這樣一來就會(huì)使得代碼的可讀性增強(qiáng)，進(jìn)而降低Web前端的測(cè)試難度。

3 MVVM框架在Angular JS中的應(yīng)用簡(jiǎn)要分析

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

4 結(jié)束語(yǔ)

MVVM框架的出現(xiàn)無疑為Web前端的發(fā)展帶來了很大的動(dòng)力與優(yōu)勢(shì)，在互聯(lián)網(wǎng)技術(shù)逐漸發(fā)展的當(dāng)下，更應(yīng)該專注于MVVM框架性能的提高以及新產(chǎn)品技術(shù)的開發(fā)利用。MVVM框架實(shí)際上就是在原有MVC的基礎(chǔ)上進(jìn)行的深入的研究和優(yōu)化得到的，其性能卻遠(yuǎn)遠(yuǎn)高于MVC原有的性能，說明在Web前端的發(fā)展中需要更多的創(chuàng)新與借鑒，只有這樣才能夠更好地促進(jìn) Web前端的開發(fā)與發(fā)展。

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

[2]肖小嵐，劉振宇.基于MVVM模式的Extjs框架在前端界面設(shè)計(jì)中的應(yīng)用研究[J].電腦知識(shí)與技術(shù)，2016.