前端構架模式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來寫。