谈谈MVC模式和未来

就拿百度来举例吧,首先不去管它采用了什么技术,可以从他的改变来猜测。
以前我们是在首页的搜索框先输入关键词,这时除了弹出个搜索建议外没任何改变,用户敲了回车键或者点搜索按钮就跳转到结果列表页了,若更换关键词,则需要再点搜索按钮,页面刷新给出结果。
现在的百度首页已经做了大幅优化了,来看看整个搜索流程:当我们输入第一个字符时,貌似自动跳到结果页面了,当输入的字符能成关键词了,便列出结果。当我们改变搜索框的关键词,页面又立马更新了结果列表。可以推测技术上采用了某种单页面应用架构,响应速度很快,这更像是一个本地app,大大提高了用户体验。

用MVC模式来分析一下整个过程:

  • 用户和View发生交互
  • View传送指令到Controller
  • Controller完成业务逻辑后,要求Model改变状态
  • Model将新的数据发送到View,用户得到反馈

现在MVC的框架有很多,有些采用了衍生的MVP、MVVM等架构,想搞清楚这几者的区别可参考阮一峰的一篇文章MVC,MVP 和 MVVM 的图示
对于复杂的软件,MVC带来的好处是显而易见的,不仅有合理的架构,给以后的维护也带来很大的方便。
但前端技术总是发展的特别快(可以看看这篇文章The Future of JavaScript MVC Frameworks),MVC中使用模板进行渲染,通过双向绑定使得应用复杂度增加了,而Facebook的React.js采用组件化的形式,每当有操作进行数据更新,就对整个页面进行渲染,避免了复杂的状态维护,可以参考JavaScript与有限状态机这篇文章。而我前面写的一篇文章What happend about Angular2.0表示Angular2.0也在朝着这个方向走。
javascript-mvc

React 框架本身作为MVC当中的V存在, 提供两个功能:

  • 渲染和维护 DOM
  • 监听 DOM 的事件

其他的好处是:

  • React Component 设计得非常适合模块化
  • Component和DOM得益于Virtual DOM的diff和合并操作, 有性能提升
  • 没有Model的复杂关系, 编写应用逻辑非常清晰
  • 服务端渲染

关于React.js的中文介绍可以参考React.js概览。文中还指出FLUX对MVC做了调整:由原来的数据双向绑定改成了单向的一个循环。双向绑定会导致串联的更新, 一个对象改变导致另一个改变, 这还可能触发更多更新,当应用规模增加, 这些串联的更新使得用户操作结果改变了什么很难预测,而当更新只在单个回路上更新数据, 这个系统整体上就更容易预测了。