淺談本身對前端MVC的理解

1、MVC的定義

  MVC全名Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫。MVC這一律念是來源於後端的框架構建思想，是一種軟件設計典範，用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯彙集到一個部件裏面，在改進和個性化定製界面及用戶交互的同時，不須要從新編寫業務邏輯。

• 視圖(view)是用戶看到並與之交互的界面。
• 模型(model)表示數據模型，並提供數據給視圖。
• 控制器(controller)是鏈接視圖和模型橋樑，處理業務邏輯操做，具體是指接受用戶的輸入並調用模型和視圖去完成用戶的需求。

  

2、MVC解決的問題

  隨着前端發展到面向模塊編程的時代，MVC架構就應運而生了，數據模型（modele）、頁面視圖（View）、業務邏輯（Controller）分離有效地解決以下問題：

• 用store數據更新代替頁面頻繁dom操做，簡化業務代碼；
• 全局暫存數據，避免重複請求數據資源；
• 模塊解耦，組件化開發，避免功能模塊間互相影響；
• 局部刷新，減小頁面刷新次數，提升用戶體驗。

3、MVC的推演過程

  咱們使用jQuery實現todolist，step by step優化代碼直至推演出MVC，使你們更好地理解MVC架構。
  只使用jQuery渲染視圖層list列表和count數字統計，並實現new、toggle、destroy、destroy finished、toggle all等交互操做，dom操做就比較頻繁，如圖所示：

  爲了持久化數據存儲，建立store將數據存儲到locationStorage，雖然不用MVC也能實現，但邏輯很是複雜，每一個功能函數都涉及到數據存儲改動，如圖所示：

  爲了簡化數據渲染操做，引入模板引擎，每當數據變化，調用render模板渲染便可，如圖所示：

  爲了實現頁面狀態持久化，引入router路由，經過不一樣的訪問URL區分頁面不一樣狀態，MVC架構就出現了，如圖所示：

4、MVC架構的擴展

一、MVC衍生的MVP

  MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出。和MVC的相同之處在於：Controller/Presenter負責業務邏輯，Model管理數據，View負責顯示；不一樣之處在於：在MVC裏，View是能夠直接訪問Model的，但MVP中的View並不能直接使用Model，而是經過爲Presenter提供接口，讓Presenter去更新Model，再經過觀察者模式更新View。

  與MVC相比，MVP模式經過解耦View和Model，徹底分離視圖和模型使職責劃分更加清晰；因爲View不依賴Model，能夠將View抽離出來作成組件，它只須要提供一系列接口提供給上層操做。

二、MVC衍生的MVVM

  MVVM（Model-View-ViewModel）將Presenter 更名爲 ViewModel，基本上與MVP模式徹底一致。惟一的區別是，它採用雙向綁定（data-binding）：View的變更，自動反映在 ViewModel，反之亦然。Vue、React、Angular框架都使用了MVVM模式。

  咱們就以Vue爲例子，分析一下MVVM模式：

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆轉消息</button>
</div>
複製代碼

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
複製代碼

  上面html部分至關於View視圖層，能夠看到這裏的View經過經過模板語法來聲明式的將數據渲染進DOM元素，當ViewModel對Model進行更新時，經過數據綁定更新到View。
  Vue實例中的data至關於Model模型層，而ViewModel層的核心是Vue中的雙向數據綁定，即Model變化時VIew能夠實時更新，View變化也能讓Model發生變化。
  總體看來，MVVM比MVC精簡不少，不只簡化了業務與界面的依賴，還解決了數據頻繁更新的問題，不用再用選擇器操做DOM元素。

總結

  MVC、MVP、MVVM...M-V-Whatever等模式，都下降了代碼的耦合性，組件化編程提升了代碼的可重用性，但各自有着本身的特色。咱們重要的是理解架構模式的思想，根據業務需求場景，因地制宜地選擇合適的架構模式。