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!' :
原文地址:https://www.cnblogs.com/hellohuman/p/3840800.html