Backbone的写类方式

从两个角度去讨论Backbone的写类方式

1. Backbone内部的写类方式，Backbone自身的类如Model、Collection、View等是如何定义的
2. Backbone外部的写类方式，如何使用Backbone提供的类来定义自己的类

 

一、Backbone内部的写类方式

Backbone提供给客户端程序员的类都是通过 构造函数+原型 的方式写的，Backbone.Model的代码大致如下

?

1 2 3 4 5 6 7 8 9 10 11 12

// 定义构造器 var Model = Backbone.Model = function(attributes, options) {     // ...     this.set(attrs, options);     this.changed = {};     this.initialize.apply(this, arguments); };   // 扩展原型，往原型上添加了很多方法，如Events _.extend(Model.prototype, Events, {     // ... });

这种写法很传统，Backbone.Collection / Backbone.View / Backbone.Router / Backbone.History 都是通过这种方式定义的。

 

二、Backbone的外部写类方式

说外部的写类方式，不得不提 extend 方法，该方法定义在Backbone.js的底部。不到30行代码，它是私有的，外部并不能访问。
也就是说，这个方法只在Backbone内部使用，为其它模块服务。

 

其实这个说法不严谨，虽然extend不能直接访问，但它通过仅一行代码

?

1	Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;

转身变为以下方法

• Backbone.Model.extend
• Backbone.Collection.extend
• Backbone.View.extend
• Backbone.Router.extend
• Backbone.History.extend

这时，外部还是可以访问得到。

 

在一个闭包内，写一个私有的函数，然后把该函数赋值给多个类或类原型。这些写法并不少见，这样写节省了内存，函数实例其实只有一份。

此外，不要把这里的extend 和 _.extend 搞混了。_.extend是underscore提供的较底层的方法，用来Mixin对象。这里的extend则是用来写类。

 

介绍下extend

1. 它接受两个参数，都是对象类型
2. 它返回一个类（构造器，函数），怎么叫都行
3. 第一个参数的所有属性、方法都会拷贝到类的原型上（实例对象上）
4. 第二个参数的所有属性、方法都会拷贝的类上（类静态属性、方法）
5. 第一个参数中如果有constructor属性，那么最后就返回它，否则返回内部提供的child
6. 返回的类有个特殊属性 __super__。

上面的第六点，使用它很方便的取得父类原型，进而取到父类构造器，进而在子类中去调用父类，这类似于Java里的super关键字。

 

拿示例详细说说

1. 两个参数，都是对象类型，第一个扩展为原型方法，第二个扩展为类方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var instanceObj = {     name: '',     getName: function() {},     setName: function(name) {} } var classObj = {     trim: function(str) {},     mix: function() {} }   // 生成一个新类CustomModel，它具有Backbone.Model的所有方法 var CustomModel = Backbone.Model.extend(instanceObj, classObj)   // instanceObj属性都拷贝到了CustomModel.prototype 上 _.each(['name','getName', 'setName'], function(attr) {     console.log(attr in CustomModel.prototype) })   // classObj属性都拷贝到了 CustomModel 上 _.each(['trim','mix'], function(attr) {     console.log(attr in CustomModel) })

 

2. 参数中如果有constructor属性，那么最后就返回它，否则返回内部提供的child

这实际上告诉使用者可以自定义构造器，而不使用内部的child。

?

1 2 3 4 5 6 7 8 9 10 11 12

function MyConstructor(name, age) {     this.name = name;     this.age  = age; } var CustomModel = Backbone.Model.extend({     constructor: MyConstructor,     getName: function(){},     setName: function(){} })   var m1 = new CustomModel('John', 30) console.log(m1.constructor === MyConstructor) // true

 

3. 返回的类有个特殊属性 __super__，用它很方便的取得父类原型，进而取到父类构造器，最后在子类中去调用父类。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function Person(name, age) {     this.name = name     this.age = age } Person.extend = Backbone.Model.extend // 把Backbone的extend拿出来用，O(∩_∩)O~   function ManConstructor(name, age) {     ManConstructor.__super__.constructor.call(this, name, age) // 调用父类构造器     this.gender = 'male' } var Man = Person.extend({     constructor: ManConstructor }) var man = new Man('John', 30) console.log(man) // ManConstructor { name="John", age=30, gender="male"}

 

总结下Backbone的写类方式

Backbone内部的写类方式是 构造函数+原型。外部写类则是通过extend，写类和继承同时存在。

1. 通过Model(View/Router等)的extend方法写类，产生的类直接继承了Model(View/Router等)
2. 如果写的类不是Backbone提供的类，那么可以象3那样，把extend方法拿出来

 

使用Backbone开发，多数时候都采用方式1，它强制要求把代码分为了几层，一些实用工具函数由underscore提供。

如果是浏览器端开发，DOM及HTTP通讯操作一般由jQuery或zepto等提供。你写的代码几乎都集中在业务处理，无非就是模型(Model)、集合(Collection)、视图(View)、路由(Router)、历史管理(History)。

 

 

相关：

JavaScript的写类方式

JavaScript的继承方式