## 一、MVC **MVC**中的**M**就是單純的從網絡獲取回來的數據模型，**V**指的我們的視圖界面，而**C**就是我們的ViewController； 在其中，ViewController負責View和Model之間調度，View發生交互事件會通過target-action或者delegate方式回調給ViewController，與此同時ViewController還要承擔把Model通過KVO、Notification方式傳來的數據傳輸給View用于展示的責任。 隨著業務越來越復雜，視圖交互越復雜，導致Controller越來越臃腫，負重前行。臟活累活都它干了，到頭來還一點不討好。福報修多了的結果就是，不行了就重構你，重構不了就換掉你； 經典的MVC模式圖：  ## 二、MVVM 為了解決MVC的問題，MVVM就閃亮登場了。它把View和Contrller都放在了View層（相當于把Controller一部分邏輯抽離了出來），Model層依然是服務端返回的數據模型；  * **View層**：視圖展示。包含UIView以及UIViewController，View層是可以持有ViewModel的； * **ViewModel層**：視圖適配器。暴露屬性與View元素顯示內容或者元素狀態一一對應。一般情況下ViewModel暴露的屬性建議是readOnly的，至于為什么，我們在實戰中會去解釋。還有一點，ViewModel層是可以持有Model的； * **Model層**：數據模型與持久化抽象模型。數據模型很好理解，就是從服務器拉回來的JSON數據。而持久化抽象模型暫時放在Model層，是因為MVVM誕生之初就沒有對這塊進行很細致的描述。按照經驗，我們通常把數據庫、文件操作封裝成Model，并對外提供操作接口。（有些公司把數據存取操作單拎出來一層，稱之為**DataAdapter層**，所以在業內會有很多MVVM的變種，但其本質上都是MVVM）； **Binder**：MVVM的靈魂。可惜在MVVM這幾個英文單詞中并沒有它的一席之地，它的最主要作用是在View和ViewModel之間做了雙向數據綁定。如果MVVM沒有Binder，那么它與MVC的差異不是很大； >[danger] 把Model用純JavaScript對象表示，View負責顯示，把Model和View關聯起來的就是ViewModel。ViewModel負責把Model的數據同步到View顯示出來，還負責把View的修改同步回Model； ## 三、MVVM和Jquery操作DOM的區別 這個問題，是深刻理解MVVM框架的一個關鍵； 先看用jQuery實現的修改兩個DOM節點的例子： ~~~ <p>Hello, <span id="name">Bart</span>!</p> <p>You are <span id="age">12</span>.</p> ~~~ ### **用jQuery修改name和age節點的內容：** ``` var name = 'Homer'; var age = 51; $('#name').text(name); $('#age').text(age); ``` ### **用MVVM框架來實現同樣的功能** 使用MVVM框架來實現同樣的功能，我們首先并不關心DOM的結構，而是關心數據如何存儲。最簡單的數據存儲方式是使用JavaScript對象： ~~~ var person = { name: 'Bart', age: 12 }; ~~~ 我們把變量`person`看作Model，把HTML某些DOM節點看作View，并假定它們之間被關聯起來了； 借助MVVM框架并不需要并不操作DOM，而是直接修改JavaScript對象： ``` person.name = 'Homer'; person.age = 51; ``` 這讓我們的關注點從如何操作DOM變成了如何更新JavaScript對象的狀態，而操作JavaScript對象比DOM簡單多了； >[danger] 這就是MVVM的設計思想：關注Model的變化，讓MVVM框架去自動更新DOM的狀態，從而把開發者從操作DOM的繁瑣步驟中解脫出來！