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架构+流程图

此条目发表在pri, 成长, 面试分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注