前端MVC学习体会

作者：宋艺博

一、关于MVC

MVC是可在Web开发中使用的一种设计模式，将数据与相关逻辑封装在model中，将界面展现封装在view中，中间通过controller进行连接，达到数据与界面分离的效果。这种模式数据与界面通过控制器松耦合连接，视图与模型均可进行复用，提高了程序的可维护性与可扩展性。

模型持有所有的数据、状态和程序逻辑。模型提供操作数据和状态的接口，会由控制器在需要的时候进行调用。同时模型在状态改变时，会通知视图改变其状态。

视图用来呈现模型，直接从模型中取得其需要的数据和状态。

控制器在用户操作视图时发挥重要作用，它从视图接受调用，进而取得用户的输入，并决定如何处理模型，是两者之间的中转站。

二、关于SPA

SPA即单网页应用，顾名思义，就是在一个页面上实现的应用。

传统的Web程序需要通过http请求与服务器进行数据交互，再由服务器返回新的Web页面。用户的请求，如表单的提交等，会导致网页的刷新，网站结构复杂时，用户使用各个页面间的链接时也会造成网页的刷新，才能定向到新的页面。这种方式的用户体验较差，不适应用户日新月异的要求。

Web技术发展的今天，为了解决上述问题，SPA应运而生。

SPA运用HTML、JavaScript、CSS等技术，将一个完整的应用放在一个网页上实现，用户完全不需要进行页面的跳转，就可以与服务器进行沟通，从而获得想要的服务。通过SPA，用户体验相比传统Web程序有了很大的提高，是Web技术的一种进步。

除此之外，SPA将部分数据逻辑放在客户端进行，从而对服务器进行了精简，充分运用了客户端的计算资源，也是对资源的合理利用。

三、关于backbone.js

Backbone.js是一个基于underscore的Web端MVC框架。既然是MVC框架，就应该有效地对数据和界面进行分离，使得前端的代码更加有序，也方便前端与后台进行交流。

使用backbone可以方便地定义数据类，通过model可以创建数据，进行数据校验等操作，与服务器通信。当视图操作使model变化时，触发change事件，视图会收到消息并进行相应，更新视图。

关于backbone的API，参考the5fire的技术博客，实乃入门神器。

四、关于Todos

这是backbone的一个简单的demo，展示了使用backbone框架开发一个简单的MVC单网页应用。代码量不大，参考上述技术博客以及官方文档可以了解到它是如何一步一步实现的。

这个demo大致展示了model与view的用法，如何绑定事件，view中如何操作dom节点。通过阅读代码，简单地了解了整个程序的运行流程。感觉上事件绑定是view中的一个小难点，比较容易混淆，在今后的学习中应该予以加强。

五、关于Hellorocket

简单看了一下hellorocket的demo，它是一个基于Html5的SPA，看上去界面很简洁明快，不过代码却很长，仍是基于backbone的MVC应用。具体代码尚待持续研究，就先不写体会了。