[TOC] * * * * * ## MVX模式是什么？ MVC框架最早出現在Java領域，然后慢慢在前端開發中也被提到，后來又出現了MVP，以及現在最成熟的MVVM，下面我們來簡單介紹一下各種模式。 ### MVC MVC全名是Model View Controller，是模型(model)-視圖(view)-控制器(controller)的縮寫，一種軟件設計典范，用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯聚集到一個部件里面，在改進和個性化定制界面及用戶交互的同時，不需要重新編寫業務邏輯。 * Model(模型)是應用程序中用于處理應用程序數據邏輯的部分。 * View(視圖)是應用程序中處理數據顯示的部分。 * Controller(控制器)是應用程序中處理用戶交互的部分。 通常控制器負責從視圖讀取數據，控制用戶輸入，并向模型發送數據。 **優點：** 耦合性低、重用性高、生命周期成本低、部署快、可維護性高、有利軟件工程化管理 **缺點：** 由于模型和視圖要嚴格的分離，這樣也給調試應用程序帶來了一定的困難。每個構件在使用之前都需要經過徹底的測試。 對于小項目，MVC反而會帶來更大的工作量以及復雜性。 接受用戶指令時，MVC 可以分成兩種方式。一種是通過 View 接受指令，傳遞給 Controller。  另一種是直接通過controller接受指令。  ### MVP MVP是單詞Model View Presenter的首字母的縮寫，分別表示數據層、視圖層、發布層，它是MVC架構的一種演變。作為一種新的模式，MVP與MVC有著一個重大的區別：在MVP中View并不直接使用Model，它們之間的通信是通過Presenter (MVC中的Controller)來進行的，所有的交互都發生在Presenter內部，而在MVC中View會直接從Model中讀取數據而不是通過 Controller。 MVP 模式將 Controller 改名為 Presenter，同時改變了通信方向。  * 各部分之間的通信，都是雙向的。 * View 與 Model 不發生聯系，都通過 Presenter 傳遞。 * View 非常薄，不部署任何業務邏輯，稱為"被動視圖"（Passive View），即沒有任何主動性，而 Presenter非常厚，所有邏輯都部署在那里。 ### MVVM MVVM(Model View ViewModel)是一種基于MVC的設計，開發人員在HTML上寫一些Bindings,利用一些指令綁定，就能在Model和ViewModel保持不變的情況下，很方便的將UI設計與業務邏輯分離，從而大大的減少繁瑣的DOM操作。 相比前面兩種模式，MVVM 模式只是把MVC的Controller和MVP的Presenter 改名為 ViewModel，它采用雙向綁定（data-binding）：View的變化會自動更新到ViewModel，ViewModel的變化也會自動同步到View上顯示。MVVM代表框架有：Knockout、Ember.js、AngularJS、Vue.js。 **Model** 作為MV*家族中的一員，MVVM中的M代表著Model。Model代表我們整個webapp所需要的數據模型，一個典型的例子就是用戶信息Model,它應該含有(姓名，年齡等屬性)。Model含有大量信息，但它并不具有任何行為邏輯，它只是數據，因而它不會影響瀏覽器如何展示數據。 **View** View這個詞出現頻率最多的地方應該是MVC。在MVC設計中，View是唯一與用戶交互的地方，或者說它是Model變化后的直觀反映。在MVVM中，View被認為是主動的而非被動的。一個被動的View時只它只能任由“他人”（Controller）擺布，自己卻不能改變任何東西，如利用jQuery操作DOM。而MVVM中View是具有主動性的，因為它包括了一些數據綁定，事件，和行為，這些都會直接影響Model和ViewModel的。它不但負責保持View自身的行為（展示），而還會將自身的變化同步到ViewModel中。 **ViewModel** ViewModel可以被看作是MVC中的Controller,它主要負責數轉換（用一定的業務邏輯），它負責將Model的變化反應到View上，而當View自身有變化時也會同步Model進行改變。你可以把ViewModel看作一個藏在View后面的好幫手，它把View需要的數據暴露給它，并且富于View一定的行為能力。 !