1. 程式人生 > >架構模式之MVVM

架構模式之MVVM

架構模式之MVVM

前言

MVVM是一種架構模式,本文會涉及一小點vue程式碼,以及一篇簡單的springboot的程式碼,建議在閱讀本文件前先對這兩門技術做一些學習。

什麼是MVVM

MVVM是三個單詞的簡稱,分別是Model,View和ViewModel。

在闡述MVVM的概念之前,讓我們先看下這麼多年js的發展階段。

第一階段,使用原生的js直接操作DOM節點。

var dom = document.getElementById('name');
dom.innerHTML = 'HelloWorld!';

第二階段,原生API並不是那麼的易用,還要考慮瀏覽器的相容性,於是Jquery出現了。

$('#name').text('Homer').css('color', 'red');

第三階段,MVC模式

這個時候就需要服務端應用來配合開發了,用js來根據伺服器傳送過來的資料進行渲染。

現在,前端頁面越來越複雜,使用者的互動性操作也越來越多,要求也越來越高,僅僅是使用Jquery已經滿足不了前端的需求了,於是MVVM模型出現了。

MVVM借鑑了MVC的思想,在前端頁面中,View用於專門的顯示,而裡面的資料用Model來進行渲染,這樣兩者就做到了很大程度的分離。

而ViewModel就是用於把Model和View關聯起來,Model的資料同步到View顯示出來,把View的修改同步回Model,做到這兩件事的就是ViewModel。

而這種操作也被稱為“雙向繫結”。

雖然我們也可以用jquery甚至用原生js來實現MVVM,但Vue自己已經包含了這個功能以及主打的就是它(雙向繫結)。

因此Vue基本是MVVM的代言者(個人看法)。

而MVVM的特點也展現出來了。

MVVM的特點

1. 低耦合性。

View可以獨立於Model變化和修改,一個ViewModel可以繫結到不同的View上,當View變化的時候Model不可以不變,當Model變化的時候View也可以不變。

2. 可重用性。

把一些檢視邏輯放在一個ViewModel裡面,讓很多View重用這段檢視邏輯,也就是元件化思想。

3. 獨立開發。

開發人員可以專注於業務邏輯和資料的開發(ViewModel),設計人員可以專注於頁面設計。

MVVM的組成
在這裡插入圖片描述

組成已經在剛剛的對MVVM的介紹中已經說明的很明白了,轉換成更直觀一些的圖就是上面這張。

Model的資料利用ViewModel同步到View顯示出來,把View的修改利用ViewModel同步回Model。

View

介面和顯示,通常由HTML組成,可以使用各種UI框架組成頁面,例如element,不直接與Model互動。

ViewModel

包括介面邏輯和模型資料封裝 ,事件響應,繫結的屬性等,是View和Model的橋樑

Model

資料核心,連線著ViewModel。

MVVM與MVC

MVC和MVVM的區別其實已經討論過了,MVVM就是借鑑的MVC的思想,MVC的概念可以去參考另一篇文件。

MVC出現的時候前端還並不是很成熟,很多業務邏輯在後臺實現即可,因此當時前端甚至還沒有MVC這個概念,MVC的目的就是將Modle和Controller分離,也就是單向通訊,而MVVM則是將邏輯重點在前端實現,利用ViewModel進行雙向繫結。

MVVM的實現

首先建立一個Helloworld級的html頁面,在這裡我們使用Vue來感受下MVVM。

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<body>
		<div id="app">
			HelloWorld!
		</div>
	</body>
	
	<script>
	</script>
</html>

建立一個Vue物件

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	
	<body>
		<div id="app">
			HelloWorld!
		</div>
	</body>
	
	<script>
		var app = new Vue({
		})
	</script>
</html>

這時我們想要使用MVVM思想進行開發,那麼就要分別創建出View和Model。

<body>
    <div id="app">
        {{message}}
    </div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World!'
        }
    })
</script>

在這篇短小的程式碼中,{{message}}代表的就是View,而它則是利用了ViewModel繫結上了在Vue物件中的message變數也就是Model,這就是通過Vue來進行MVVM開發,我們嘗試提供給使用者一個通道能直接改變Model,看看View會發生生麼。

<body>
    <div id="app">
    	{{message}}</br>
    	<button @click="add">+1個感嘆號吧</button>
    </div>

</body>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello World!'
		},
		methods : {
			add : function(){
				this.message = this.message+"!"
			}
		}
	})
</script>

測試下點選這個按鈕會發生什麼,

在這裡插入圖片描述

感嘆號變成了兩個!

讓我們根據前面的理論知識來思考下發生了什麼,按鈕繫結的是methods裡面的add方法,在add方法中,我們使代表著Model的變數message的末尾加入了一個感嘆號。

Model的變化令ViewModel更新了與Model繫結的View,而此時與Model繫結的View就是{{message}}。

應用場景

首先,我們是不考慮後端模板的,後端模板不利於前後端分離,這是不可爭的公認事實,這就不在此處進行討論說明了。

但如果一些需求需要由前端非同步完成,並且是使用者修改UI的情況下,我們就需要先儲存一份現階段UI,然後去後臺請求完成之後在展示上需要與後端同步,甚至需要用jquery來直接操作dom。

那麼MVVM雙向繫結呢,我們只需要修改資料Model,因為Model和View是已經繫結好的,因此我們不用在意View怎麼樣,因為我們在Model改變的時候View就已經改變了。

它的優點

1.雙向繫結技術,這是MVVM思想主打的思想,也是它的最優點

2.View可以將後端控制器大量處理的業務放在自己這裡,雖然view幹了不屬於它職責範圍內的事,但卻將後端控制器大量瘦身了。

3.可以對View的資料處理部分抽象出來一個函式處理model,組成一個功能元件,多次使用。

也總會有不足之處

MVVM確實解決了現階段前端開發的很多問題,但再厲害的技術,也總會有些許不足。

1.資料繫結使得 Bug 很難被除錯。介面出現了異常,有可能是View的程式碼有問題,也可能是Model。

2.Model長期持有,不釋放記憶體,就造成了花費更多的記憶體