稍微談一下 javascript 開發中的 MVC 模式

來源: 博客園發布時間: 2008-08-16 09:02 閱讀: 14295 次推薦: 5 原文鏈接 [收藏]

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

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

<select id="selAnimal">
2

<option value="cat">cat</option>
3

<option value="fish">fish</option>
4

<option value="bird">bird</option>
5

</select>
6

<p id="whatDoesThisAnimalDo"></p>
7

document.getElementById('selAnimal').onchange = function() {
10

var thisAnimalDoes;
11

switch ( this.value ) {
12

case 'cat':
13

thisAnimalDoes = "cat meows";
14

break;
15

case 'fish':
16

thisAnimalDoes = "fish swims";
17

break;
18

case 'bird':
19

thisAnimalDoes = "bird flies";
20

break;
21

default:
22

thisAnimalDoes = "wuff?";
23

}
24

document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes;
25

}
26

</script>

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

<select id="selAnimal">
2

<option value="cat">cat</option>
3

<option value="fish">fish</option>
4

<option value="bird">bird</option>
5

</select>
6

<p id="whatDoesThisAnimalDo"></p>
7

// whatDoesAnimalDo 就是一個controller
10

var whatDoesAnimalDo = {
11

// 選擇視圖
12

start: function() {
13

this.view.start();
14

},
15

// 將用戶的操作映射到模型的更新上
16

set: function(animalName) {
17

this.model.setAnimal(animalName);
18

},
19

};
20

// whatDoesAnimalDo的數據model
21

whatDoesAnimalDo.model = {
22

// animal的數據
23

animalDictionary: {
24

cat: "meows",
25

fish: "swims",
26

bird: "flies"
27

},
28

// 當前的animal，也就是這個application的狀態
29

currentAnimal: null,
30

// 數據模型負責業務邏輯和數據存儲
31

setAnimal: function(animalName) {
32

this.currentAnimal = this.animalDictionary[animalName] ? animalName : null;
33

this.onchange();
34

},
35

// 并且通知視圖更新顯示
36

onchange: function() {
37

whatDoesAnimalDo.view.update();
38

},
39

// 還需要響應視圖對當前狀態的查詢
40

getAnimalAction: function() {
41

return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : "wuff?";
42

}
43

};
44

// whatDoesAnimalDo的視圖
45

whatDoesAnimalDo.view = {
46

// 用戶輸入觸發onchange事件
47

start: function() {
48

document.getElementById('selAnimal').onchange = this.onchange;
49

},
50

// 該事件將用戶請求發送給控制器
51

onchange: function() {
52

whatDoesAnimalDo.set(document.getElementById('selAnimal').value);
53

},
54

// 視圖更新顯示的方法，其中視圖會向model查詢當前的狀態，并將其顯示給用戶
55

update: function() {
56

document.getElementById('whatDoesThisAnimalDo').innerHTML = whatDoesAnimalDo.model.getAnimalAction();
57

}
58

};
59

whatDoesAnimalDo.start();
60

</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的閉包特性，一不小心就搞出內存泄漏，這可是正宗的偷雞不成蝕把米了