当然并不是每次model变化controller都需要完整的渲染页面，也有可能一次model改变，其响应的controller只是操作了一次dom，只要model的controller足够细分，每个controller就算是在操作dom也是无所谓的

控制器其实就是负责与View以及Model打交道的，因为View与Model应该没有任何交互，model中不会出现html标签，html标签也不应该出现完整的model对应数据，更不会有model数据的增删

PS：html标签当然需要一些关键model值用于controller获取model相关标志了

这里拷贝一个图示来帮助我们解析：

这个图基本可以表达清楚MVC是干嘛的，但是却不能帮助新手很好的了解什么是MVC，因为真实的场景可能是这样的：

一个model实例化完毕，通知controller1去更新了view

view发生了click交互通过controller2改变了model的值

model马上通知了controller3、controller4、controller5响应数据变化

所以这里controller影响的model可能不止一个，而model通知的controller也不止一个，会引起的界面连锁反应，上图可能会误导初学者只有一个controller在做这些事情。

这里举一个简单的例子说明情况：

① 大家看到新浪微博首页，你发了一条微博，这个时候你关注的好友转发了该微博

② 服务器响应这次微博，并且将这次新增微博推送给了你（也有可能是页面有一个js不断轮询去拉取数据），总之最后数据变了，你的微博Model马上将这次数据变化通知了至少以下响应程序：

1）消息通知控制器，他引起了右上角消息变化，用户看见了有人转发我的weib

2）微博主页面显示多了一条微博，让我们点击查看

3）......

这是一条微博新增产生的变化，如果页面想再多一个模块响应变化，只需要在微博Model的控制器集合中新增一个控制器即可

千言不如一码，我这里临时设计一个例子并书写代码来说明自己对MVC的认识，，考虑到简单，便不使用模块化了，我们设计了一个博客页面，大概是这个样子的：

无论什么功能，都需要第三方库，我们这里选择了：

① zepto

② underscore

这里依旧用到了我们的继承机制，如果对这个不熟悉的朋友烦请看看我之前的博客：【一次面试】再谈javascript中的继承

我们只是数据的搬运工，所以要以数据为先，这里先设计了Model的基类：

1 var AbstractModel = _.inherit({ 2 initialize: function (opts) { 3 this.propertys(); 4 this.setOption(opts); 5 }, 6 7 propertys: function () { .data = {}; .controllers = {}; .initController = null; .scope = null; 19 20 }, 21 22 addController: function (k, v) { 23 if (!k || !v) return; 24 this.controllers[k] = v; 25 }, 26 27 removeController: function (k) { 28 if (!k) return; .controllers[k]; 30 }, 31 32 setOption: function (opts) { 33 for (var k in opts) { 34 this[k] = opts[k]; 35 } 36 }, handleData: function () { }, initData: function (data) { 44 var k; 45 if (!data) return; (k in this.data) { 49 if (data[k]) this.data[k] = data[k]; 50 } .handleData(); (this.initController && this.get()) { 55 this.initController.call(this.scope, this.get()); 56 } 57 58 }, validateData: function () { ; 64 }, formatData: function (data) { 69 return data; 70 }, get: function () { 74 if (!this.validateData()) { {}; 77 } .formatData(this.data); 79 }, 80 81 _update: function (key, data) { .controllers[key] === 'function') 83 this.controllers[key].call(this.scope, data); (typeof this.controllers[key].render === 'function') 85 this.controllers[key].render.call(this.scope, data); 86 }, update: function (key) { 91 var data = this.get(); 92 var k; 93 if (!data) return; (this.controllers[key]) { 96 this._update(key, data); 97 return; 98 } (k in this.controllers) { 101 this._update(k, data); 102 } 103 } 104 });

然后我们开始设计真正的博客相关model：