backbonejs学习笔记1—原理

由于现在的团队MVC模式框架使用的是backbone，所以开始学习啦。欢迎共同交流、成长。关于MVC，请看我另一篇文章MVC框架模式详解。

backbone是javascript的一种框架，强制依赖于underscore，轻量级，压缩之后5K左右。

1、部分源码分析
为了理解，我摘取了部分源码，搞明白这些源码之后，backbone使用起来就会得心应手了，下面是这些源码的分析。

定义Model：

var Model = Backbone.Model = function(attributes, options) {//实例化会自动触发
var attrs = attributes || {};
options || (options = {});
this.cid = _.uniqueId('c');
this.attributes = {};
if (options.collection) this.collection = options.collection;
if (options.parse) attrs = this.parse(attrs, options) || {};
attrs = _.defaults({}, attrs, _.result(this, 'defaults'));
this.set(attrs, options);
this.changed = {};
this.initialize.apply(this, arguments);
};

a)、实例化Model时，会自动触发：set、initialize函数。无需手动初始化Model。至于如何初始化，可以自己扩展initialize函数。对于View以及Collection也是同样道理，实例化时均会自动进行初始化。
b)、Model扩展自Events,所以有Events的属性和方法供使用。

2、backbone具体实现分析：
整体结构如下：

   1:  (function() {
   2:      Backbone.Events        // 自定义事件
   3:      Backbone.Model        // 模型构造函数和原型扩展
   4:      Backbone.Collection    // 集合构造函数和原型扩展
   5:      Backbone.Router        // 路由配置器构造函数和原型扩展
   6:      Backbone.History        // 路由器构造函数和原型扩展
   7:      Backbone.View            // 视图构造函数和原型扩展
   8:      Backbone.sync            // 异步请求工具方法
   9:      var extend = function (protoProps, classProps) { ... } // 自扩展函数
  10:      Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend; // 自扩展方法
  11:  }).call(this);

a)、Events:

b)、Model

c)、Collection

d)、Router

e)、View

具体可看[原创]Backbone源码分析-Backbone架构+流程图