MVVM架構原來是這樣來的

1、MVC

MVC模式,即軟件能夠分紅三個部分Model、View、Controller。vue

MVVM架構原來是這樣來的

  • 視圖(View):用戶界面。node

  • 控制器(Controller):業務邏輯react

  • 模型(Model):數據保存小程序

各部分之間的通訊方式以下。微信小程序

MVVM架構原來是這樣來的

  1. View 傳送指令到 Controller微信

  2. Controller 完成業務邏輯後,要求 Model 改變狀態架構

  3. Model 將新的數據發送到 View,用戶獲得反饋ionic

全部通訊都是單向的。spa

2、互動模式

接受用戶指令時,MVC 能夠分紅兩種方式。一種是經過 View 接受指令,傳遞給 Controller。雙向綁定

MVVM架構原來是這樣來的

另外一種是直接經過Controller接受指令。

MVVM架構原來是這樣來的

3、實例:Backbone

實際項目每每採用更靈活的方式,以 Backbone.js 爲例。

MVVM架構原來是這樣來的

1. 用戶能夠向 View 發送指令(DOM 事件),再由 View 直接要求 Model 改變狀態。

2. 用戶也能夠直接向 Controller 發送指令(改變 URL 觸發 hashChange 事件),再由 Controller 發送給 View。

3. Controller 很是薄,只起到路由的做用,而 View 很是厚,業務邏輯都部署在 View。因此,Backbone 索性取消了 Controller,只保留一個 Router(路由器) 。

4、MVP

MVP 模式將 Controller 更名爲 Presenter,同時改變了通訊方向。

MVVM架構原來是這樣來的

1. 各部分之間的通訊,都是雙向的。

2. View 與 Model 不發生聯繫,都經過 Presenter 傳遞。

3. View 很是薄,不部署任何業務邏輯,稱爲"被動視圖"(Passive View),即沒有任何主動性,而 Presenter很是厚,全部邏輯都部署在那裏。

5、MVVM

MVVM 模式將 Presenter 更名爲 ViewModel,基本上與 MVP 模式徹底一致。

MVVM架構原來是這樣來的

惟一的區別是,它採用雙向綁定(data-binding):View的變更,自動反映在 ViewModel,反之亦然。Angular和 Ember 都採用這種模式。

 


 

更多angular1/2/四、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目,請關注微信公衆號——全棧弄潮兒

相關文章
相關標籤/搜索