javascript 开发中的 MVC 模式分析

源自：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 。