MVVM

1.第一階段，直接用JavaScript操做DOM節點，使用瀏覽器提供的原生API：

var dom = document.getElementById('name'); dom.innerHTML = 'Homer'; dom.style.color = 'red';

第二階段，因爲原生API很差用，還要考慮瀏覽器兼容性，jQuery橫空出世，以簡潔的API迅速俘獲了前端開發者的芳心：

$('#name').text('Homer').css('color', 'red');

第三階段，MVC模式，須要服務器端配合，JavaScript能夠在前端修改服務器渲染後的數據。

如今，隨着前端頁面愈來愈複雜，用戶對於交互性要求也愈來愈高，想要寫出Gmail這樣的頁面，僅僅用jQuery是遠遠不夠的。MVVM模型應運而生。

MVVM最先由微軟提出來，它借鑑了桌面應用程序的MVC思想，在前端頁面中，把Model用純JavaScript對象表示，View負責顯示，二者作到了最大限度的分離。

把Model和View關聯起來的就是ViewModel。ViewModel負責把Model的數據同步到View顯示出來，還負責把View的修改同步回Model。

ViewModel如何編寫？須要用JavaScript編寫一個通用的ViewModel，這樣，就能夠複用整個MVVM模型了。

這就是MVVM的設計思想：關注Model的變化，讓MVVM框架去自動更新DOM的狀態，從而把開發者從操做DOM的繁瑣步驟中解脫出來！

2.MVC簡介

Model——數據模型。

View——頁面視圖。

Controller——頁面控制器,負責處理View和Model的事件。

 

數據關係

 

• View 接受用戶交互請求
• View 將請求轉交給Controller
• Controller 操做Model進行數據更新
• 數據更新以後，Model通知View更新數據變化
• View 更新變化數據

 

 

方式

 

全部方式都是單向通訊

 

結構實現

 

View ：使用 Composite模式 （混合模式）
View和Controller：使用 Strategy模式 （策略者模式）
Model和 View：使用 Observer模式同步信息（觀察者模式）

2.MVP

mvp的全稱爲Model-View-Presenter，Model提供數據，View負責顯示，Controller/Presenter負責邏輯的處理。MVP與MVC有着一個重大的區別：在MVP中View並不直接使用Model，它們之間的通訊是經過Presenter (MVC中的Controller)來進行的，全部的交互都發生在Presenter內部，而在MVC中View會直接從Model中讀取數據而不是經過 Controller。

 

 

數據關係

 

• View 接收用戶交互請求
• View 將請求轉交給 Presenter
• Presenter 操做Model進行數據更新
• Model 通知Presenter數據發生變化
• Presenter 更新View數據

 

 

MVP的優點

 

1. Model與View徹底分離，修改互不影響
2. 更高效地使用，由於全部的邏輯交互都發生在一個地方—Presenter內部
3. 一個Preseter可用於多個View，而不須要改變Presenter的邏輯（由於View的變化老是比Model的變化頻繁）。
4. 更便於測試。把邏輯放在Presenter中，就能夠脫離用戶接口來測試邏輯（單元測試）

 

 

方式

 

各部分之間都是雙向通訊

 

3.MVVM簡介

ViewModel: 相比較於MVC新引入的視圖模型。是視圖顯示邏輯、驗證邏輯、網絡請求等代碼存放的地方。

4.MVVM框架

MVVM框架主要包括三個部分Model、View和ViewModel，
Model指的是數據部分，對應到前端就是一些Javascript對象，
View指的視圖部分，對應到前端就是DOM，
ViewModel就是鏈接數據和視圖的中間件，
在MVVM的框架下視圖和數據是不能直接通訊的，它們經過ViewModel來通訊，ViewModel一般要實現一個observer觀察者，
當數據發生變化，ViewModel可以監聽到數據的這種變化，而後通知到對應的視圖作自動更新，
而當用戶操做視圖，ViewModel也能監聽到視圖的變化，而後通知數據作改動，
這實際上就實現了數據的雙向綁定。

MVVM框架的主要應用場景

1）針對具備複雜交互邏輯的前端應用 2）提供基礎的架構抽象 3）經過Ajax數據持久化，保證前端用戶體驗 好處就是當先後端進行一些數據交互的時候，前端能夠經過Ajax請求對後端作數據持久化，不須要刷新整個頁面，只須要改動DOM裏須要改動的那部分數據和內容，
特別是對於移動端應用場景，刷新頁面的代價太昂貴，會從新加載不少資源，雖然有些資源會被緩存，可是頁面的DOM、JS、CSS都會被瀏覽器從新解析一遍，
所以，移動端頁面常常會作成SPA單頁應用，在這個基礎上就誕生了不少MVVM框架，如Angular、React、Vue

Vue.js的核心思想

Vue.js的核心思想包括兩個方面：數據驅動和組件化

數據驅動：DOM是數據的一種天然映射，在vue.js中只須要操做數據，vue.js經過directives指令去對DOM作一層封裝，當數據發生變化，會通知指令去修改對應的DOM，數據驅動DOM變化，DOM是數據的一種天然映射，vue.js還會對操做作一些監聽，當咱們修改視圖的時候，vue.js監聽到這些變化，從而去改變數據，這樣就實現了數據的雙向綁定。 組件化的目的是擴展HTML元素，封裝可重用的代碼 組件設計原則： 1）頁面上每一個獨立的可視/可交互區域視爲一個組件， 2）每一個組件對應一個工程目錄，組件所須要的各類資源在這個目錄下就近維護， 3）頁面不過是組件的容器，組件能夠嵌套自由組合造成完整的頁面。

MVVM設計模式的優勢 
 1. 低耦合。View能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的」View」上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。 
 2. 可重用性。你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。 
 3. 獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，生成xml代碼。 
 4. 可測試。界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。