Backbone源码风格

代码风格：

一、自执行匿名函数创建执行环境

var root = this; root保存全局执行环境的指针。浏览器端为window对象

二、依赖库

（1）、underscore 如果backbone的运行环境在服务端（nodeJs），则引入underscore库。

var _ = root._;

if (!_ && (typeof require !== 'undefined')) _ = require('underscore');

（2）、jQuery

Backbone.$ = root.jQuery || root.Zepto || root.ender;

三、核心模块

Events、Model、Collection、View、Router、History

Events模块为JS对象，其他模块均为构造函数。Events对象扩展了Model.prototype、Collection.prototype、Router.prototype、View.prototype，因此这些模块的实例对象继承了Events对象的事件方法：on trigger等。

四、underscore的extend方法：_.extend 。用第2到第N个对象扩展第一个对象的属性。_extend(obj1, obj2,...,objn); 仅提供属性拷贝与覆盖的功能。注意事项：

业务层必须注意extend方法内部并没有判断第一个参数obj1是否为空，如果第一个参数为空，程序会报错，浏览器将捕获到该异常，JS代码将停止运行。

示例：

用Events对象与第三个参数对象扩展第一个参数对象Model.prototype

五、重点讲一下backbone自己提供的extend方法。

通常我们在实际应用中并不满足new一个Backbone.Model 我们希望用自己提供的对象扩展backbone的model，这样我们new出来的实例，不仅继承了Backbone.Model的属性，也具备了完成具体业务操作的能力。backbone提供了extend方法来满足这样的应用场景。该方法放在源码的最下方。

看注释可知，凭借extend方法，我们可创建之类并设置正确的原型链。

（1）、方法支持传递两个参数：protoProps、staticProps 分别表示实例属性（扩展到原型上），类属性（扩展到构造函数上）

如上图：

实例属性(instance pros)必须通过语句：var indexRecommendModel = new Mpost.IndexRecommend.Model() 创建实例对象，然后通过indexRecommendModel.getRecommends(options)调用

类属性(class pros)可以直接这样调用：Mpost.IndexRecommend.Model.add() // 'i am a class Function!'

（2）、如果你传递进去的protoProps参数没有constructor属性，backbone将创建一个构造函数（匿名）并调用父类（通常为Backbone.Model等）的构造函数，这样当你new子类child的时候child实例就继承了父类的实例属性（如Backbone.Model实例属性：_changes、_events、attributes、_previousAttributes等）

（3）、子类的原型属性是构造函数Surrogate的实例对象，而Surrogate的原型指向了父类的原型（Backbone.Model.prototype）:

var Surrogate = function(){ this.constructor = child; };

Surrogate.prototype = parent.prototype;

child.prototype = new Surrogate;

这样当你new子类的时候child实例的原型链就是这样的：

通过上图可知：

自定义的属性：apis、defaults、getRecommends、initialize等被添加到实例对象的原型对象Surrogate上，原型对象Surrogate也是一个实例对象，它的原型对象指向：Backbone.Model.prototype 下面我们看一下Backbone.Model.prototype都有哪些属性：

看源码可知：Backbone.Model.prototype除了包含核心的get、set等方法外，还包含Events模块的核心方法：on、trigger、off等

因此，当我们执行以下语句：

var indexRecommendModel = new Mpost.IndexRecommend.Model();

我们可以调用indexRecommendModel.on绑定自定义事件，调用indexRecommendModel.trigger触发事件（查找两次原型链）。

我们也可以调用扩展的实例属性indexRecommendModel.apis（查找一次原型链）：

我们还可以直接调用扩展的类属性（静态属性）

Mpost.IndexRecommend.Model.add() // 'i am a class Function!' ：

巴特西

Backbone源码风格

最新文章

热门文章