源自:http://www.cnblogs.com/ruxpinsp1/archive/2008/04/17/1158140.html
随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在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
<
p
id
="whatDoesThisAnimalDo"
></
p
>
7
8
<
script
type
="text/javascript"
>
9
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模式,代码又会变成怎样的呢?
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
<
p
id
="whatDoesThisAnimalDo"
></
p
>
7
8
<
script
type
="text/javascript"
>
9
// 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的闭包特性,一不小心就搞出 内存泄漏,这可是正宗的偷鸡不成蚀把米了
所以,对于javascript开发,适度开发 可能比应用你所学到的学术 知识更重要,毕竟前端开发是以解决实际问题为基础,而不是为了炫技。当然,Dflying gg有句话叫“重构无处不在 ”——如果你觉得你自己的代码越来越乱,维护起来越来越困难,那么,你就该考虑是不是该用MVC重 构一下了~
再额外的说一句:是不是整个前端开发就不必使用MVC了呢?no no~ 其实整个前端开发就是一个大大的MVC架构啊——
- Model: HTML/XHTML中的信息
- View: Style sheet
- Controller: EMAScripts等等脚本
这不正是web标准的最终目的么
所以,把握好整个前端代码的结构,永远比在javascript开发中过量应用设计模重要的 多 !
本人的改进建议:
这个只是个初级模型,需要把view,model的直接调用,改为Observe触发事件,control进行侦听,通过control去调用model和view即 controller-->model&view 。