稍微谈一下 javascript 开发中的 MVC 模式-优快云博客

本文探讨了在JavaScript开发中应用MVC模式的方法与挑战，通过实例对比了应用前后代码的变化，指出在简单系统中使用MVC可能导致的复杂性和效率问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着前台开发日益受到重视，客户端代码比重日益增加的今天，如何在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的闭包特性，一不小心就搞出内存泄漏，这可是正宗的偷鸡不成蚀把米了