暴力分析backbone.js(5)

好，继续分析Backbone，写完上一节后，我们清晰的分析思路了，这节就按照思路来走。

　　现在我来区分一下几大块的位置。

　　作为实参function(root, Backbone, _, $){}函数，它包裹了Backbone的主要功能。

　　　　从 line28 —— line1610。

　　Backbone.Events(事件)

　　　　从 line68 —— line236。

　　Backbone.Model(模型)

　　　　从 line238 —— line587。

　　Backbone.Collection(控制器)

　　　　从 line588 —— line982。

　　Backbone.View(视图)

　　　　从 line983 —— line1113

　　Backbone.sync(同步)

　　　　从 line1114 —— line1211

　　Backbone.Router(路由)

　　　　从 line1212 —— line1312

　　Backbone.History(历史)

　　　　从 line1313 —— line1551

这样就没了？还有2部分：

　　Initial Setup(初始设置)

　　　　从 line30 —— line80

　　Helpers(助手) 

　　　　从 line1552 —— line1606

这2部分，初始设置是留在我们用到说，而助手是最后说，或者是用到说。

 

　　好，区块都分完了，我们从 Backbone.Events 事件开始说，说之前：

　　　　1.先看一下官方文档的说明

　　　　2.来试试看该怎么用

　　　　3.分析它们是如何实现

　　　　4.总结一下有什么用，想出不来的话就待以后结合其他实例

 

我先复制一段中文说明：Events 是一个可以融合到任何对象的模块, 给予对象绑定和触发自定义事件的能力. Events 在绑定之前 不需要声明, 并且还可以传递参数

我抓几个重点 （融合到任何对象的模块）： 模块我们把它比喻成一大块功能，里面包涵一小块一小块功能。怎么融合？

　　　　　　 （给予对象绑定和触发自定义事件的能力）：能给对象绑定自定义功能，能触发对象自定义功能。

　　　　　　 （在绑定之前 不需要声明）：想想看我们如何给DOM元素绑定事件，DOMElement.onclick = funct(){}，不需要声明待解？

　　　　　　 （还可以传递参数）：

 

我复制使用Events的Dome

1 var object = {};

2 

3 _.extend(object, Backbone.Events);

4 

5 object.on("alert", function(msg) {

6       alert("Triggered " + msg);

7 });

8 

9 object.trigger("alert", "an event");

　　1.定义一个名字叫object的对象，不要误会，内置的首字母都是大写。

　　2.underscore的extend，_.extend(参数A, 参数B) ： 复制 参数B(对象)的属性  到 参数A(对象)的属性。这就说得明白(融合到任何对象的模块)了，让我们创建的 object这个对象去复制Backbone.Event的功能，这就融合，我理解的。

　　3.object这个对象融合了Backbone.Events的功能的就能使用它的功能了。

　　4.object.on(绑定事件)，绑定了一个自定义事件'alert'。这就说得明白(给对象绑定自定义功能)了

　　5.object.trigger(执行事件)，执行一个绑定过的自定义事件'alert'。这就说得明白(能触发对象自定义功能)了 (注意传参数) 

 

　　上面是用underscore的extend，underscore又是Backbone的必备装备，所以用这种办法在好不过了，官方推荐，但是我们还是来头脑风暴一下，试试看别的方法。

　　我创建一个对象cc，然后用创建的对象cc来调用Backbone.on 和 Backbone.trigger。但坏处一目了然咯。

1var cc = {};

2 

3 Backbone.on.call(cc,'alert', function (evt) {

4 　　alert('cc' + ' ' + evt)

5 });

6 

7 Backbone.trigger.call(cc,'alert','alert');

　　

　　我们在尝试着用委托模式。我创建一个cc对象并且把它关联Backbone，委托模式是这样的，但A对象关联到B对象的时候，我们尝试on这个方法，它会先在A对象内寻找这个方法，如果没有这个方法，它会尝试的去B对象寻找，找到了就可以用了。它们是一个兄弟关系。其实cc.on是直接可以调用的，为什么我还给cc对象定义了方法，用指向来调用呢？因为.on并不是A对象的方法，这样做可以让大家可以清晰的理解委托模式。结果也是行得通的。

 1 var cc = Object.create(Backbone);

 2 

 3 cc.setEvent = function (EventName,callback) {

 4 　　this.on(EventName,callback);

 5 };

 6 

 7 cc.getEvent = function (EventName) {

 8 　　this.trigger(EventName);

 9 };

10 

11 cc.setEvent('alert', function () {

12 　　alert('cc');

13 });

14 

15 cc.getEvent('alert');

　　

　　好，下一节开始来分析 Backbone.Events是如何实现的！