淺談使用MVC模式進行JavaScript程式開發，mvcjavascript

淺談使用MVC模式進行JavaScript程式開發，mvcjavascript

隨著前台開發日益受到重視，用戶端代碼比重日益增加的今天，如何在javascript開發裡應用MVC模式，這個問題似乎會一直被提到，所以偶在這裡粗略的談一下自己的看法吧。

MVC模式的基本理念，是通過把一個application封裝成model, view和controller三個部分達到降低耦合，簡化開發的目的。這麼說很空洞，大家可以實際看個例子：

<select id="selAnimal">  <option value="cat">cat</option>  <option value="fish">fish</option>  <option value="bird">bird</option></select><p id="whatDoesThisAnimalDo"></p><script type="text/javascript">document.getElementById('selAnimal').onchange = function() {  var thisAnimalDoes;  switch ( this.value ) {    case 'cat':      thisAnimalDoes = "cat meows";      break;    case 'fish':      thisAnimalDoes = "fish swims";      break;    case 'bird':      thisAnimalDoes = "bird flies";      break;    default:      thisAnimalDoes = "wuff?";  }  document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes;}</script>

這個小程式會把你從下拉式功能表"selAnimal"中選擇的動物能做什麼事回顯到網頁上。以上是沒有應用任何設計模式和編成思想寫出的代碼。如果要在這裡應用MVC模式，代碼又會變成怎樣的呢？

<select id="selAnimal">  <option value="cat">cat</option>  <option value="fish">fish</option>  <option value="bird">bird</option></select><p id="whatDoesThisAnimalDo"></p><script type="text/javascript">// whatDoesAnimalDo 就是一個controllervar whatDoesAnimalDo = {  // 選擇視圖  start: function() {    this.view.start();  },  // 將使用者的操作映射到模型的更新上  set: function(animalName) {    this.model.setAnimal(animalName);  },};// whatDoesAnimalDo的資料modelwhatDoesAnimalDo.model = {  // animal的資料  animalDictionary: {    cat: "meows",    fish: "swims",    bird: "flies"  },  // 當前的animal，也就是這個application的狀態  currentAnimal: null,  // 資料模型負責商務邏輯和資料存放區  setAnimal: function(animalName) {    this.currentAnimal = this.animalDictionary[animalName] ? animalName : null;    this.onchange();  },  // 並且通知視圖更新顯示  onchange: function() {    whatDoesAnimalDo.view.update();  },  // 還需要響應視圖對目前狀態的查詢  getAnimalAction: function() {    return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : "wuff?";  }};// whatDoesAnimalDo的視圖whatDoesAnimalDo.view = {  // 使用者輸入觸發onchange事件  start: function() {    document.getElementById('selAnimal').onchange = this.onchange;  },  // 該事件將使用者請求發送給控制器  onchange: function() {    whatDoesAnimalDo.set(document.getElementById('selAnimal').value);  },  // 視圖更新顯示的方法，其中視圖會向model查詢當前的狀態，並將其顯示給使用者  update: function() {    document.getElementById('whatDoesThisAnimalDo').innerHTML = whatDoesAnimalDo.model.getAnimalAction();  }};whatDoesAnimalDo.start();</script>

……突然一下代碼變得好誇張e....
——偶都還沒有在裡面實現觀察者模式呢...
實在太不良好了。

 

這樣就帶出了MVC模式最大的詬病：在簡單的系統中應用MVC模式，會增加結構的複雜性，並且降低效率。

所以偶覺得除了少數javascript控制項，比如click-anywhere-to-edit datagrid/tree control, 或者FckEditor/tinyMCE這樣的支援自訂plugin的富文字編輯器非常適合應用MVC之外，在大多數的實用B/S系統中，javascript開發只要遵循原廠模式就足夠讓你受益匪淺了。這是由於前端開發和後段開發的性質不同引起的。如果在ASP.net或者JSP項目中應用MVC模式，SDK或多或少會自動產生一些view和controller的代碼。但是javascript呢——javascript甚至連個好用的SDK都沒有，雖然有不少成熟的framework，但最終還是會大大增加開發量。

與開發量相比，更加令人頭疼的是效率的問題。三層之間的相互連信都是額外的開銷。對於伺服器端，這些通訊造成的開銷幾乎可以忽略不計。但對於javascript這樣相對低效率的語言，多幾重調用和事件偵聽就能明顯感覺到效能的下降了。而且，因為javascrip的閉包特性，一不小心就搞出記憶體流失，這可是正宗的偷雞不成蝕把米了...
所以，對於javascript開發，適度開發可能比應用你所學到的學術知識更重要，畢竟前端開發是以解決實際問題為基礎，而不是為了炫技。當然，Dflying gg有句話叫“重構無處不在”——如果你覺得你自己的代碼越來越亂，維護起來越來越困難，那麼，你就該考慮是不是該用MVC重構一下了~

 

再額外的說一句：是不是整個前端開發就不必使用MVC了呢？no no~ 其實整個前端開發就是一個大大的MVC架構啊——

Model: HTML/XHTML中的資訊
View: Style sheet
Controller: EMAScripts等等指令碼
這不正是web標準的最終目的麼....

所以，把握好整個前端代碼的結構，永遠比在javascript開發中過量應用設計模重要的多！

不過，也有一些優秀的MVC架構，對此西雅圖的一位駭客和設計師Gordon L. Hempton做了一下對比，這裡我們拉過來看一下：

1. Backbone.js——優點：強大的社區，強勁的勢頭；缺點：抽象較弱，很多功能亟待增加。
2. SproutCore——優點：對綁定的支援，可靠的社區，大量特性；缺點：過度規範，難以和不需要的特性解耦。
3. Sammy.js——優點：易於學習，更容易和現存的服務端應用程式整合；缺點：過於簡單，無法應用於大型應用程式中。
4. Spine.js——優點：輕量級，文檔很完備；缺點：它的核心概念“spine”是非同步使用者介面，這意味著理想狀況使用者介面永遠不會發生堵塞，而這個基礎有缺陷。
5. Cappuccino——優點：大型深思熟慮後的架構，良好的社區，很棒的繼承模型；缺點：由iOS開發人員建立，使用JavaScript類比Objective-C。
6. Knockout.js——優點：對綁定的支援，完備的文檔和教程；缺點：綁定文法拙劣，缺少統一的視圖組件層級關係。
7. Javascript MVC——優點：可靠的社區；缺點：基於字串的繼承模型很差，控制器與視圖關係過密而缺少綁定。
8. GWT（Google Web Toolkit）——優點：全面的架構，良好的社區，可靠的基於Java的組件繼承模型；缺點：可能無法經受時間的考驗，另外，Java在用戶端上的抽象有些笨拙。
9. Google Closure——優點：很好的基於組件的UI組合系統。缺點：缺少UI綁定支援。
10. Ember.js——優點：很豐富的模板系統，擁有複合視圖和UI綁定；缺點：相對較新，文檔不夠完備。
11. Angular.js——優點：對模板範圍和控制器設計有很好的考慮，擁有依賴注入系統，支援豐富的UI綁定文法。缺點：代碼的模組性不強，視圖的模組化也不夠。
12. Batman.js——優點：代碼清晰，綁定、持久化的方法簡單；缺點：使用了單例控制器。