MVC——MVP——MVVM

DayDreame發表於2018-08-02

MVC什麼樣?

這裡我借用百度百科的一張圖片:MVC——MVP——MVVM


從這個圖中可以清楚的看到:

View:檢視層——這裡是使用者與之互動的介面。

Model:模型層——這裡面主要就是業務資料,並把資料提供給檢視層

Controller:控制器——他的主要功能世界收使用者的輸入並呼叫模型和檢視去響應使用者的需求

感覺他凸顯的優點就是:

1:java人員在業務邏輯上有明顯的增強,邏輯層程式碼接觸也很多;前端人員更專注於在html和jsp上集中精力,但是在這個時代,似乎這樣的前端是很難吃香的。

2:MVC在維護介面的技術上,感覺技術含量是降低了。

3:在layout層,他這個還是比較任性化的,能夠實現公用模板(頭部和底部),但是相對於VUE來說,個人感覺還是元件更好用

4:在與java的人員合作中,因為專案是沒有分離的,最另外煩惱的一點就是,我每次新件一個頁面,都要進入Controller層新增一個方法(類似於一個門,或者說開關),這讓我著實難受。

MVP什麼樣?

MVC——MVP——MVVM

這裡我也借用百度百科的一張圖

MVP和MVC其實很像,MVP是由MVC轉變而來的。

Presenter:Presenter和Controller都是負責邏輯的處理;

Model:提供資料;

View:檢視;


下面附上一個jq實現toDoList的一段程式碼:


MVC——MVP——MVVM

這段程式碼中沒有牽扯到Model層,大部分都是P和V。在這裡面用到了jq的幾個小方法:

1:$.proxy()——他可以基本描述為:接受一個函式,飯後返回一個新函式,並企鵝這個新函式始終保持了特定的上下文語境

$.proxy(function,context),

function為執行的函式,context為函式的上下文this值會被設定成這個object物件

2:$.extend()——可以理解為,用一個或者多個物件來擴充套件一個物件,返回被擴充套件的物件,一般我們在寫外掛的時候用到這個方法,這裡就不做過多解釋了,菜鳥教程上寫的已經很詳細了

MVVM什麼樣?

提到MVVM,我相信大部分的下夥伴都知道是什麼樣的了,這個是現在用的居多的。在前端框架中已經能深刻體現了。

這裡也去百度百科撈一張圖。~0.0~ MVC——MVP——MVVM


看了這個圖,然後再看一下vue中體現他的地方:

附上一段程式碼:

MVC——MVP——MVVM


我們看到了,在上面這個例子中,集中體現的是View和Model層。

MVVM是基於資料驅動的,而在MVP和MVC中是基於DOM驅動的。

在VUE中,ViewModel他可以說是vue.js的核心了。他將DOM和資料繫結起來,保持一個同步,當我們去變更資料的時候,Dom也會隨之更新。

這個例子中也提到vue中的全域性元件和區域性元件,大家可以看一下他們的寫法。

當然其實的props是通訊元件中父傳子的一個方法。

好了,今天就這麼多了,相信大家有了基本的瞭解了。

更深的講解,這裡附上一個小夥伴的詳解連結:www.jianshu.com/p/b0aab1ffa…


相關文章