前言
最近整理了很多前端面试题的东西，今天又去参加了一次面试，不知各位烦不烦，我反正有点累了，于是我们今天继续回到我们前段时间研究的问题，我们再来看看MVC吧。
什么是MVC
又回到这个问题了，到底什么是MVC呢？
MVC是一种设计模式，他将应用划分为：
① 数据（模型，model）
② 展现层（视图，view）
③ 用户交互（控制器，control）
一个事件发生的过程是这样的：
复制代码
① 用户和应用产生交互
② 控制器的事件处理器被触发
③ 控制器从模型中请求数据，并将其交给视图
④ 数据将数据呈现给用户
以一个聊天呈现为例：
① 用户提交一个新的聊天信息
② 控制器的事件处理器被触发
③ 控制器创建一个新的聊天模型记录
④ 控制器更新视图
⑤ 用户看到聊天窗口新的信息
复制代码
以上的过程很简单，但是有复杂的情况，于是我们会清晰的分割各个部分，这样各个部分可以独立开发，方便测试与维护，对解耦有好处。
模型
模型用以存放应用的所有数据对象，比如一个User模型，用以存放用户列表、它们的属性及所有与模型有关的逻辑。
模型不必知道视图与控制器的细节，模型只需要包含数据以及直接和这些数据相关的逻辑。
任何事件处理代码，视图模板，以及那些和模型无关的逻辑都应该隔离刀模型以外。
模型与视图代码混到一起是违法MVC规则的。
当控制器从服务器获取数据时，他就将数据包装成模型实例，来一个简单的例子，不然我们都晕了：
1 var user = User.find('叶小钗');
2 user.destroy();
怎么样够简单吧，先不要在意这个，后面点我们还会讲到他。
视图
视图层是呈现给用户的，用户与之产生交互。
在js中，视图大多是HTML+CSS+Javascript模板组成的，模板中除了简单的条件语句外，不要有其它逻辑。
视图不必知道模型和控制器干了什么，视图中处理逻辑的代码应该少一点
控制器
控制器是视图与模型之间的纽带，控制器由视图获取事件和输入（事件来源于视图），对他们进行处理，并更新视图。
当页面加载时，控制器会给视图添加事件监听，当用户和应用发生交互时，控制器中的事件触发器就开始工作了。
复制代码
var Controller = {};
(Controller.users = function ($) {
var nameClick = function () {};
//在页面上增加事件监听
$(function () {
$('#view').click(nameClick);
})
})(jQuery);
复制代码
这坨莫名其妙的代码，就是我们的控制器啦。
PS：现在各位觉得看着有点晕是很正常的，我研究了几次了都还是有点晕呢，你们不孕的话我就要哭了
由于我们这里不是要详细的介绍MVC，所以就不多说了，后面点我们会有单独的系列研究MVC这个东西，我们进入BackBone的学习吧。
什么是Backbone
Backbone是构建javascript应用程序的一个优秀的类库，他简洁、轻量级但是他功能齐全，覆盖了所有基础功能，同时灵活性也很高。
该类库提供了model、controller、view由此构成了我们构建应用程序的骨架。
backbone只有4k，只提供了模型、事件、集合、视图、控制器和持久化等核心概念。
PS：backbone依赖于underscore.js
模型
模型是保存应用程序数据的地方，我们可以把模型想象为对应用程序原始数据精心设计的抽象，并且添加了一些工具函数和事件。
1 var User = Backbone.Model.extend({
2 initialize: function () { }
3 });
extend第一个参数是一个对象，他成为了模型实例的属性，第二个参数是可选的类属性的哈希，多次调用extend可以生成模型的子类，他们将继承父亲所有的类和实例的属性。
复制代码
1 var User = Backbone.Model.extend({
2 //实例属性
3 instanceProperty: 'foo'
4 }, {
5 //类属性
6 classProperty: 'bar'
7 });
复制代码
当模型实例化时，他的initialize函数可接受任意实例参数，背后的工作原理是Backbone模型本身是构造函数，所以可以使用new生成一个新的实例:
复制代码
1 var User = Backbone.Model.extend({
2 initialize: function (name) {
3 this.set({name, name});
4 }
5 });
6 var user = new User('叶小钗');
复制代码
PS：至于你们懂不懂，我反正是不懂了，所以继续学习下去吧，囧.....
模型与属性
使用set()和get()函数来设置和获取实例里的属性:
user.set({name: '叶小钗'});
可以使用validate函数验证一个属性：
复制代码
1 var User = Backbone.Model.extend({
2 validate: function (atts) {
3 if(!atts.email || atts.email.length < 3) {
4 return 'email error';
5 }
6 }
7 });
8 var user = new User();
9 user.bind('error', function (model, error) {
10 //错误处理
11 });
12 //这样就会报错
13 user.set({email: 'ss'});
复制代码
结语
这块有点晦涩，我们今天暂时到这里，我私下研究下再写了。。。
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/p/3165396.html，如需转载请自行联系原作者
