随着JavaScript程序变得越来越复杂，往往需要一个团队协作开发，这时代码的模块化和组织规范就变得异常重要了。MVC模式就是代码组织的经典模式。
（……MVC介绍。）
（1）Model
Model表示数据层，也就是程序需要的数据源，通常使用JSON格式表示。
（2）View
View表示表现层，也就是用户界面，对于网页来说，就是用户看到的网页HTML代码。
（3）Controller
Controller表示控制层，用来对原始数据（Model）进行加工，传送到View。
由于网页编程不同于客户端编程，在MVC的基础上，JavaScript社区产生了各种变体框架MVP（Model-View-Presenter）、MVVM（Model-View-ViewModel）等等，有人就把所有这一类框架的各种模式统称为MV*。
框架的优点在于合理组织代码、便于团队合作和未来的维护，缺点在于有一定的学习成本，且限制你只能采取它的写法。
Backbone的加载
复制代码 代码如下:
<script src="https://www.jb51.net/javascripts/lib/jquery.js"></script>
<script src="https://www.jb51.net/javascripts/lib/underscore.js"></script>
<script src="https://www.jb51.net/javascripts/lib/backbone.js"></script>
<script src="https://www.jb51.net/javascripts/jst.js"></script>
<script src="https://www.jb51.net/javascripts/router.js"></script>
<script src="https://www.jb51.net/javascripts/init.js"></script>
Backbone.View
基本用法
Backbone.View方法用于定义视图类。
复制代码 代码如下:
var AppView = Backbone.View.extend({
render: function(){
$('main').append('<h1>一级标题</h1>');
}
});
上面代码通过Backbone.View的extend方法，定义了一个视图类AppView。该类内部有一个render方法，用于将视图放置在网页上。
使用的时候，需要先新建视图类的实例，然后通过实例，调用render方法，从而让视图在网页上显示。
复制代码 代码如下:
var appView = new AppView();
appView.render();
上面代码新建视图类AppView的实例appView，然后调用appView.render，网页上就会显示指定的内容。
新建视图实例时，通常需要指定Model。
复制代码 代码如下:
var document = new Document({
model: doc
});
initialize方法
视图还可以定义initialize方法，生成实例的时候，会自动调用该方法对实例初始化。
复制代码 代码如下:
var AppView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
$('main').append('<h1>一级标题</h1>');
}
});
var appView = new AppView();
上面代码定义了initialize方法之后，就省去了生成实例后，手动调用appView.render()的步骤。
el属性，$el属性
除了直接在render方法中，指定“视图”所绑定的网页元素，还可以用视图的el属性指定网页元素。
复制代码 代码如下:
var AppView = Backbone.View.extend({
el: $('main'),
render: function(){
this.$el.append('<h1>一级标题</h1>');
}
});
上面的代码与render方法直接绑定网页元素，效果完全一样。上面代码中，除了el属性，还是$el属性，前者代表指定的DOM元素，后者则表示该DOM元素对应的jQuery对象。
tagName属性，className属性
如果不指定el属性，也可以通过tagName属性和className属性指定。
复制代码 代码如下:
var Document = Backbone.View.extend({
tagName: "li",
className: "document",
render: function() {
// ...
}
});
template方法
视图的template属性用来指定网页模板。
复制代码 代码如下:
var AppView = Backbone.View.extend({
template: _.template("<h3>Hello <%= who %><h3>"),
});
上面代码中，underscore函数库的template函数，接受一个模板字符串作为参数，返回对应的模板函数。有了这个模板函数，只要提供具体的值，就能生成网页代码。
复制代码 代码如下: