MVC設計模式的發展及變遷

在幾十年以前，軟體設計人員就開始思考，如何將軟體畫分成不同的組成，進而形成具備良好特質的架構。

其中，在1974年的時候，針對具有使用者操作介面的軟體類型，有一個名為MVC（Model-View-Controller）的設計模式被提出。

在這個設計模式中，將軟體依其責任，分為三個組成，分別為：

●負責處理圖形化操作介面的View。

●負責封裝和事務邏輯相關資料，以及處理資料方法的Model。

●負責控制應用程式流程、回應資料模型變化，以及使用者操作事件的Controller。

應用MVC輔助設計的優點
這個設計模式，洞察出具圖形化操作介面軟體的共通特性，巧妙的將軟體依此分責原則畫分。這麼一來，可以得到諸多優點，包括了：

（1）各組成相互獨立，單一組成具有高聚合力，而不同的組成間耦合力低，一個組成內的變化，波及到其他組成的機會相對低。

（2）各組成基於其分責原則，可以各自隸屬於不同專業，例如View由專業的使用者介面設計人員所發展，Model由熟悉事務邏輯及演算法的程式設計人員開發。這種相互獨立的特性，有利於軟體開發的分組進行。

由於軟體中最常變化的部份，往往是使用者操作介面的部份，而使用MVC的設計模式，對於使用者操作介面上的變化對其他部份所造成的大衝擊，可以有效降低。因此，在近年來，MVC逐漸成為一種主流的設計方式，各種主流的軟體開發語言、工具及平臺，都以MVC做為畫分使用者操作介面及其他組成的架構。

不論是原生的使用者操作介面應用程式框架，或是Web-based的網站應用程式框架，幾乎都是基於MVC概念的產物。

前者著名的，像是Java的SWING、.Windows Form或是Cocoa中的AppKit、UIKit，而後者則有像Java的Struts、Ruby的RoR、Python的Django等等。

現今，想要開發具有使用者操作介面的軟體，幾乎都脫離不了MVC的概念。

MVC經歷從原生應用程式，到網頁應用程式的發展過程

MVC的發展最早是從原生的應用程式開發，不論是Model、View或是Controller，多半都是運行在同一臺電腦之上。

而到了Web應用程式開始成為應用軟體的重要類型之後，也開始採用MVC的設計概念，其中，MVC的所有組成也都是運行在伺服器端。

伺服器端的程式，會負責取得使用者的輸入、取得儲存在伺服器端的資料、依事務邏輯進行運算、最後產生出HTML頁面內容，傳送至位在客戶端的瀏覽器上。

在這種模式底下，瀏覽器只是個很簡單的終端設備，其作用不過只是呈現頁面內容罷了。

不過這種MVC的實作模式，隨著瀏覽器的程式設計環境及技術的進化，也產生了變化，其中影響最為深遠的，莫過於JavaScript了。

JavaScript的重要性逐漸提升，MVC應用的方式也隨之改變
最早，JavaScript之所以被發明出來，只是因為要在瀏覽器上執行一些動態的頁面視覺化效果。那時，由於效能以及穩定度的關係，並沒有太多人視JavaScript為一種主要的程式語言。

不過，這種情況，隨著人們愈加倚賴瀏覽器做為主要的應用程式平臺，基於要在瀏覽器上，進行更複雜的人機互動、呈現更豐富視覺變化的需求，讓人們逐漸開始重視JavaScript。

瀏覽器的開發者，也持續將提高JavaScript的運行效率及穩定度，視為關鍵的目標之一。時至今日，拜Web應用程式成為主流之賜，JavaScript竟已成為重要的程式語言之一。

JavaScript的強化有著相當重要的意義。

能夠運行於客戶端瀏覽器之上的JavaScript，意謂著Web應用程式不單運行於伺服器端，而且也能畫分部份於客戶端的瀏覽器中執行。

此時，瀏覽器不再只是被動呈現頁面的終端設備，而是能夠執行動態程式碼的計算環境。

而因為JavaScript所導致瀏覽器的變化，也引發了開發Web應用程式的方法及模式的改變。其中有一個明顯的現象，就是在MVC模式運用上的改變。

在前段文字中已述及，最初在Web應用程式上的MVC模式運用，不論是Model、View或是Controller，都是運行在伺服器端。但是，這種情況隨著JavaScript的壯大而有了改變。

因為運行於瀏覽器上的JavaScript（當然，JavaScript不僅只能運行於瀏覽器之上），最為適合處理與使用者之間的互動，不僅能動態的呈現頁面中的內容，也能提供更豐富的使用者操作體驗。

這使得程式設計者，開始將MVC中的View組成，移至瀏覽器端運行的JavaScript程式碼，當然Controller也因此而做了對應的調整，過去那種MVC三個組成皆運行於伺服器端的情況，有了改變。

View與Model應用的位置開始移動

基於這種MVC的畫分方式，現在有許多人，開始單純化伺服器端程式碼所扮演的角色。

他們將View的組成大幅自伺服器端移至瀏覽器端，伺服器端主要負責Model的部份。

從以服務為中心的角度來看，伺服器端提供的是資料操作，以及運算的服務，而瀏覽器端自伺服器端取得單純的資料，接著於瀏覽器端上進行對應的視覺呈現。

這種畫分方式之所以能發揮好處，是因為JavaScript提供了一個愈來愈完善的程式設計環境，而以JavaScript為基礎的View程式碼，搭配Controller後，可以和伺服器端上的Model互動，來取得資料或操作資料。

在這種方式底下，MVC所帶來的好處愈加顯現，因為畫分的更加乾淨。

舉例來說，我們有時候會將Web應用程式前端的使用者介面部份，委外由專業的前端設計團隊來開發，而我們自己開發和資料以及事務邏輯的部份。在我們未完成後端的資料及事務邏輯的開發之前，前端設計團隊能夠先以自行構造的後端服務Mock（意即假的像真的），來和他們所開發的前端搭配整合。

因為服務的介面是約定好的，所以，待後端服務確實完成後，便可直接和委外的前端程式碼整合，二者之間的相依性極低。

此外，想要改變前端的行為，也只需要更動以JavaScript為軸心的前端程式碼，伺服器端上的程式碼並不受影響。

正如本文一開始就提到的部份，View程式碼相較而言，是比較容易有所變動的，但Model則是相對穩定。

在這樣的架構下，View程式碼可獨立發展、獨立修改擴展，也可以獨立部署。它和Model程式碼之間的相依性極低，僅有介面相依而已。

JavaScript在這十幾年來的變化，以及所扮演的角色地位，真是令人始料未及。

而這種以JavaScript為主軸的前端程式設計方式，除了突顯MVC模式所帶來的優點之外，也衍生出一些其他的好處。而這就讓我們下回再來探討吧。