簡單清晰了解 前端構架模式MVC與MVVM

本文主要講解MVC和MVVM兩大常見的前端架構模式，進入正題之前，有必要了解一下前端的發展歷史和某些關鍵概念，

前端構架模式演變歷程

1.最早期，將HTML頁面置于Web服務器中，根據用戶請求的URL不同，回傳對應的HTML頁面到瀏覽器以渲染頁面， 存在局限性：HTML是靜態頁面，如果要針對不同的用戶顯示不同的頁面，需要為不同用戶準備不同的HTML檔案，顯然難以完成，

2.利用C、C++這些編程語言，直接向瀏覽器輸出拼接后的字串，這種技術被稱為CGI：Common Gateway Interface，服務器就可以針對不同的用戶，動態生成不同的html檔案， 存在局限性：復雜的頁面難以通過拼字串得到，

3.動態HTML的方式：ASP、JSP和PHP，如一個asp檔案就是一個HTML，需要替換的變數用特殊的<%=var%>標記出來了，再配合回圈、條件判斷，創建動態HTML就比CGI要容易得多，存在局限性：更新頁面內容，唯一的方法就是重新向服務器獲取一份新的HTML內容

4.JavaScript被引入到瀏覽器，

• 第一階段，直接用JavaScript操作DOM節點，使用瀏覽器提供的原生API對頁面進行一些修改，；
• 第二階段，由于原生API不好用，還要考慮瀏覽器兼容性，jQuery橫空出世，以簡潔的API迅速俘獲了前端開發者的芳心；
• 第三階段，MVC模式，需要服務器端配合，JavaScript可以在前端修改服務器渲染后的資料，
  現在，隨著前端頁面越來越復雜，用戶對于互動性要求也越來越高，想要寫出Gmail這樣的頁面，僅僅用jQuery是遠遠不夠的，同期，MVVM模型應運而生，
• 第四階段，資料驅動視圖和Flux模式，資料變成了單向傳遞的，這就避免了雙向系結時區域狀態和APP全域狀態沖突的矛盾，

經過幾十年的發展和演變，從MVC架構模式到MVVM架構模式，出現了諸多的實作方式，但本質是不變的，其核心是關注點的分離，需要將不同的模塊和功能分布到合適的位置中，減少依賴和耦合，

框架、設計模式、軟體架構和架構模式

框架（Framework）

一個系統的可重用設計，表現為一組抽象的可互動方法，它就像若干類的構成，涉及若干構件，以及構件之間的相互依賴關系、責任分配和流程控制等，

比如，C++語言的QT、MFC、GTK，Java語言的SSH、SSI，PHP語言的Smarty（MVC模式），Python語言的Django（MTV模式）等，

設計模式（Design Pattern）

一套被反復使用、多數人知曉的、經過分類的代碼設計經驗總結，其目的是為了代碼的可重用性、讓代碼更容易被他人理解、保證代碼的可靠性，

比如，工廠模式、配接器模式和策略模式等，

軟體架構（Software architecture）

一系列相關的抽象模式，用于指導大型軟體系統各個方面的設計，軟體架構是一個系統的草圖，軟體體系結構是構建計算機軟體實踐的基礎，

架構模式（風格）

也可以說成框架模式，一個架構模式描述軟體系統里基本的結構組織或綱要，架構模式提供一些事先定義好的子系統，指定它們的責任，并給出把它們組織在一起的法則和指南，

一個架構模式常常可以分解成很多個設計模式的聯合使用，MVC模式就屬于架構模式，還有MTV、MVP、CBD和ORM等，

補充： 框架 vs 設計模式

框架與設計模式相似，但根本上是不同的，

設計模式是對某種環境中反復出現的問題及解決該問題方案的描述，比框架更加抽象；

框架可以用代碼表示，也能直接執行或復用，而對模式而言只有實體才能用代碼表示；

設計模式是比框架更小的元素，一個框架中往往含有一個或多個設計模式，框架總是針對某一特定應用領域，但同一模式卻可適用于各種應用，

可以說，框架是軟體，而設計模式是軟體的知識，

MVC

MVC（Model View Controller），是Model（模型）－View（視圖）－Controller（控制器）的縮寫，MVC不是框架，不是設計模式，也不是軟體架構，而是一種架構模式，MVC的出現是為了讓應用的業務邏輯、資料和界面顯示分離的方法來組織代碼，

MVC允許在不改變視圖的情況下改變視圖對用戶輸入的回應方式，用戶對View的操作交給了Controller處理，在Controller中回應View的事件呼叫Model的介面對資料進行操作，一旦Model發生變化便通知相關視圖進行更新，

模型、視圖和控制器

MVC把軟體工程分為三部分：模型、視圖和控制器，這三者各有分工：

• 視圖（View）：負責圖形界面展示，一個View一般都對應著一個Model，可以讀取或編輯Model，
• 模型（Model）：通常模型物件負責在資料庫中存取資料，它的資料被View所使用，當Model發生改變時，它會通知視圖作出對應的改變，
• 控制器（Controller）：通常控制器負責從視圖讀取資料，控制用戶輸入，并向模型發送資料，Controller的本質就是為了控制程式中Model與View的關聯，Controller的存在是為了讓視圖和模型能同步，Controller本身不輸出任何內容，也不做任何處理，它只是接收請求并決定呼叫哪個模型構件去處理請求，然后確定用哪個視圖來顯示回傳的資料，

前端MVC優缺點

優點：

1. 耦合性低；
2. 重用性高；
3. 部署快；
4. 可維護性高；
5. 有利于軟體的工程化管理

缺點：

1. 視圖對模型資料的低效率訪問；
2. 視圖與控制器之間過于緊密的連接；
3. 簡單的界面如果嚴格按照MVC去開發會增加結構復雜性，降低運行效率，并且不適合中小型專案，中小型專案中使用MVC會得不償失，增加專案復雜度，
4. 沒有明確的定義，它的內部原理比較復雜，所以要完全理解MVC需要花費很多時間；
5. 在前端開發領域中，MVC還擁有一個致命的缺點——資料流管理混亂，隨著專案越來越大、邏輯關系越來越復雜，就會明顯發現資料流十分混亂，難以維護，

MVC組件運行流程

程式啟動，首先進入控制器，查看是否需要操作模型的資料，并控制進入對應的視圖，視圖則去對應模型中獲取資料顯示到視圖中，

在前端開發的應用中，一個事件的發生需要經歷以下幾步：

• 用戶與應用產生互動，
• 事件處理器事件被觸發，
• 控制器從模型請求資料，并將其交給視圖，
• 視圖呈現，

用戶操作視圖，觸發事件以發起用戶請求，控制器接受請求并聯系模型處理資料，而后控制器控制進入對應的視圖，模型告知視圖有資料更新，視圖獲取模型層資料并呈現，

MVVM

Model-View-ViewModel的縮寫，而本質上還是MVC的改進版，其設計思想是關注Model變化，讓MVVM框架去自動更新DOM，MVVM要求View不能和Model直接通信，

MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開，當然這些事 ViewModel已經幫我們做了，它可以取出 Model 的資料同時幫忙處理 View 中由于需要展示內容而涉及的業務邏輯，

MVVM 的核心實作是由 ViewModel 層資料系結，它的核心思想是分離，也就是通過 ViewModel 讓 View 層和 Model 層解耦，這樣有什么好處呢？初衷是想讓設計師專注 View 層的設計和撰寫，軟體工程師專注 Model 層的業務邏輯撰寫，

MVVM與MVC最大的區別就是：它實作了View和Model的自動同步，也就是當Model的屬性改變時，我們不用再自己手動操作Dom元素，來改變View的顯示，而是改變屬性后該屬性對應View層顯示會自動改變，

這也是AngularJS的核心，它實作了資料系結（Data Binding），將原來MVC中的C（Controller）用VM（ViewModel）來取代，相當于對MVC做了拓展，目前MVVM的前端框架有Angular、Vue、Backbone.js和Ember等，

以下在Vue中實作資料系結：

效果圖：

MVVM優點

MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大優點：

1. 低耦合，視圖（View）可以獨立于Model變化和修改，一個ViewModel可以系結到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變，
2. 可重用性，你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯，
3. 獨立開發，開發人員可以專注于業務邏輯和資料的開發（ViewModel），設計人員可以專注于頁面設計，使用Expression Blend可以很容易設計界面并生成xaml代碼，
4. 可測驗，界面素來是比較難于測驗的，測驗可以針對ViewModel來寫，