AngularJS學習筆記（二）MVVM

什麼是MVVM

MVVM模式是Model-View-ViewMode模式的簡稱。

由視圖(View)、視圖模型(ViewModel)、模型(Model)三部分組成，經過這三部分實現UI邏輯、呈現邏輯和狀態控制、數據與業務邏輯的分離。

各層的職責

Model用於封裝與應用程序的業務邏輯相關的數據以及對數據的處理方法。它具備對數據直接訪問的權利，例如對數據庫的訪問，Model不依賴於ViewModel，也就是說，Model不關心會被如何顯示或是如何被操做，也不包含任何用戶使用的與界面相關的邏輯。

View層依賴於ViewModel層，根據定義好的結構去顯示數據，構建頁面便可。

ViewModel是Model層和View層的橋樑，也就是所謂的協議，有了協議，Model層和View層能夠各幹各的事情，而不用擔憂沒必要要的變更。

下圖是MVVM模式各層之間的訪問狀況：

MVVM的優勢

1. 低耦合。

視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。

2. 獨立開發。

開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計。

3. 可測試。

界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。

AngularJS是如何實現MVVM的

Controller是個控制器，是個組合裝置，可經過Service(Model)獲取數據，而後綁定到Controller的$scope對象的ViewModel上，而後經過數據的雙向綁定，體現到View頁面上。