稍微谈一下 javascript 开发中的 MVC 模式

随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在javascript开发里应用MVC模式,这个问题似乎会一直被提到,所以偶在这里粗略的谈一下自己的看法吧。

MVC模式的基本理念,是通过把一个application封装成model, view和controller三个部分达到降低耦合,简化开发的目的。这么说很空洞,大家可以实际看个例子:

 

 1<select id="selAnimal">
 2    <option value="cat">cat</option>
 3    <option value="fish">fish</option>
 4    <option value="bird">bird</option>
 5</select>
 6<id="whatDoesThisAnimalDo"></p>
 7
 8<script type="text/javascript">
 9document.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模式,代码又会变成怎样的呢?

 

 1<select id="selAnimal">
 2    <option value="cat">cat</option>
 3    <option value="fish">fish</option>
 4    <option value="bird">bird</option>
 5</select>
 6<id="whatDoesThisAnimalDo"></p>
 7
 8<script type="text/javascript">
 9// whatDoesAnimalDo 就是一个controller
10var 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
21whatDoesAnimalDo.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的视图
45whatDoesAnimalDo.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}
;
59whatDoesAnimalDo.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的闭包特性,一不小心就搞出内存泄漏,这可是正宗的偷鸡不成蚀把米了

所以,对于javascript开发,适度开发可能比应用你所学到的学术知识更重要,毕竟前端开发是以解决实际问题为基础,而不是为了炫技。当然,Dflying gg有句话叫“重构无处不在”——如果你觉得你自己的代码越来越乱,维护起来越来越困难,那么,你就该考虑是不是该用MVC重构一下了~

 

再额外的说一句:是不是整个前端开发就不必使用MVC了呢?no no~ 其实整个前端开发就是一个大大的MVC架构啊——

  • Model: HTML/XHTML中的信息
  • View: Style sheet
  • Controller: EMAScripts等等脚本

这不正是web标准的最终目的么

所以,把握好整个前端代码的结构,永远比在javascript开发中过量应用设计模重要的多

posted @ 2008-04-17 23:11 棕熊 阅读(...) 评论(...) 编辑 收藏