随着前台开发日益受到重视，客户端代码比重日益增加的今天，如何在javascript开发里应用MVC模式，这个问题似乎会一直被提到，所以偶在这里粗略的谈一下自己的看法吧。
MVC模式的基本理念，是通过把一个application封装成model, view和controller三个部分达到降低耦合，简化开发的目的。这么说很空洞，大家可以实际看个例子：
<select> <option value="cat">cat</option> <option value="fish">fish</option> <option value="bird">bird</option> </select> <p></p> <script type="text/javascript"> document.getElementById('selAnimal').onchange = function() { var thisAnimalDoes; switch ( this.value ) { case 'cat': thisAnimalDoes = "cat meows"; break; case 'fish': thisAnimalDoes = "fish swims"; break; case 'bird': thisAnimalDoes = "bird flies"; break; default: thisAnimalDoes = "wuff?"; } document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes; } </script>
这个小程序会把你从下拉菜单"selAnimal"中选择的动物能做什么事回显到网页上。以上是没有应用任何设计模式和编成思想写出的代码。如果要在这里应用MVC模式，代码又会变成怎样的呢？
<select> <option value="cat">cat</option> <option value="fish">fish</option> <option value="bird">bird</option> </select> <p></p> <script type="text/javascript"> // whatDoesAnimalDo 就是一个controller var whatDoesAnimalDo = { // 选择视图 start: function() { this.view.start(); }, // 将用户的操作映射到模型的更新上 set: function(animalName) { this.model.setAnimal(animalName); }, }; // whatDoesAnimalDo的数据model whatDoesAnimalDo.model = { // animal的数据 animalDictionary: { cat: "meows", fish: "swims", bird: "flies" }, // 当前的animal，也就是这个application的状态 currentAnimal: null, // 数据模型负责业务逻辑和数据存储 setAnimal: function(animalName) { this.currentAnimal = this.animalDictionary[animalName] ? animalName : null; this.onchange(); }, // 并且通知视图更新显示 onchange: function() { whatDoesAnimalDo.view.update(); }, // 还需要响应视图对当前状态的查询 getAnimalAction: function() { return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : "wuff?"; } }; // whatDoesAnimalDo的视图 whatDoesAnimalDo.view = { // 用户输入触发onchange事件 start: function() { document.getElementById('selAnimal').onchange = this.onchange; }, // 该事件将用户请求发送给控制器 onchange: function() { whatDoesAnimalDo.set(document.getElementById('selAnimal').value); }, // 视图更新显示的方法，其中视图会向model查询当前的状态，并将其显示给用户 update: function() { document.getElementById('whatDoesThisAnimalDo').innerHTML = whatDoesAnimalDo.model.getAnimalAction(); } }; whatDoesAnimalDo.start(); </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开发中过量应用设计模重要的多！
不过，也有一些优秀的MVC框架，对此西雅图的一位黑客和设计师Gordon L. Hempton做了一下对比，这里我们拉过来看一下：