Backbone 是一个 JavaScript 框架，可用于创建模型-视图-控制器 (model-view-controller, MVC) 类应用程序和单页界面。它试图让 JavaScript 应用程序更清晰结构化，所涉及到的概念有  View, Event, Model, Collection 和 Router，所以新手刚开始接触 Backbone 反而会显得零乱了。再加上网上找来的一些起步教程一上来就把 Event, Model, Collection 或是 Router 揽上了。其实新手最想要一个最简单的真相，因此第一个例子只需用到 View，其他的玩艺暂且搁置。

Backbone 强依赖于 Underscore，jQuery 是可选的，不过为操作 DOM 方便一般都会引用到 jQuery。

最简单的例子，分两步走：

1. Backbone.View.extend(obj) 创建一个 View 类型

上代码(为方便起见，所有 JS 脚本都从公网上加载)：

              
    
              
     
               
      
                          
       
        Loading...        
        
       
      
     
    

点击  运行上面的代码，会发现 Loading... 在一秒后被替换成了 Hello World。走通。

有了上头的真切体验，我们才可以再进一步，使用行间模板和页面中声明的模板，模板就会触碰到值的填充，至此隐约也会感觉到 Model 在向我们招手了。

代码中使用字符串模板或用 <script type="text/template"/> 声明的模块，这里不多介绍，下篇再讲。

多加一点，关于 View 的构造，参考 Backbone.View 的实现 var View = Backbone.View 中的

// List of view options to be merged as properties.  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];

我们在构造 AppView 时可以传入以上的属性，比如传入 el 属性，就写成

var appView = new AppView({el: $('#container')});

这样前面的 AppView 内就可以不用声明 el 属性了。你也可以同样的方式传入 model, id 等属性，属性声明在 View 的定义比较清晰，倘若要 View 的公用性就可在构造时传入属性，这是后话。

Backbone 的对象在初始化之后首先被执行的是 initialize 方法，初始化方法中可能要调用父类的初始化，则在  initialize 方法中头行加上

this.constructor.__super__.initialize.apply(this);

这在要建立自己更深层次的类关系时会有用到，特别是非默认构造。

参考：1.         2.