首頁 > web前端 > js教程 > 淺談使用MVC模式進行JavaScript程式開發_javascript技巧

淺談使用MVC模式進行JavaScript程式開發_javascript技巧

WBOY
發布: 2016-05-16 15:32:47
原創
1442 人瀏覽過

隨著前台開發日益受到重視,客戶端程式碼比重日益增加的今天,如何在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&#63;";
  }
  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 就是一个controller
var whatDoesAnimalDo = {
  // 选择视图
  start: function() {
    this.view.start();
  },
  // 将用户的操作映射到模型的更新上
  set: function(animalName) {
    this.model.setAnimal(animalName);
  },
};
// whatDoesAnimalDo的数据model
whatDoesAnimalDo.model = {
  // animal的数据
  animalDictionary: {
    cat: "meows",
    fish: "swims",
    bird: "flies"
  },
  // 当前的animal,也就是这个application的状态
  currentAnimal: null,
  // 数据模型负责业务逻辑和数据存储
  setAnimal: function(animalName) {
    this.currentAnimal = this.animalDictionary[animalName] &#63; animalName : null;
    this.onchange();
  },
  // 并且通知视图更新显示
  onchange: function() {
    whatDoesAnimalDo.view.update();
  },
  // 还需要响应视图对当前状态的查询
  getAnimalAction: function() {
    return this.currentAnimal &#63; this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : "wuff&#63;";
  }
};
// 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——優點:程式碼清晰,綁定、持久化的方法簡單;缺點:使用了單例控制器。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板