暴力分析backbone.js(6)

这一节开始分析Backbone.Events,把代码定位至line81。

  我来截一张图。Backbone.Events的主要功能都定义在Backbone对象里的Events对象。

  

  但有一个疑问,为什么还要把Backbone.Events 赋值给 Events这个变量呢?

  我们往下找,找到line237,还记得_.extend(参数A,参数B)。这个功能?把参数B(对象)的属性 复制给 参数A(对象),在代码的最后面返回Backbone,赋值给root.Backbone。说明Backbone对象本身也包含Events的功能。

  

  我来打印一下,Backbone 是否也有 Backbone.Events的功能
  

  我在把代码定位Backbone.Events范围内line231,来看这2行代码,把Events.on 赋值给 Events.bind,想一下把函数赋值给函数,那是不是 bind && on 拥有同样的功能,绑定一个自定义函数。为什么这么做,可能是以前版本绑定自定义函数用的bind,现在改成on,这样做起到兼容作用。以前版本用这个库的玩家,换成新版本的库,也同样能用。所以Backbone.bind 和 Backbone.unbind 拥有这个功能。 

  

  我来打印一下

  

  我在把代码定位Backbone.Events范围内line85

  

  先拿Backbone.Events.on,但是几行代码下去,是不是看得晕乎乎的,不知所以然,该怎么办呢!这个时候,我就借助断点来帮助我理解了,如何入手,我们什么都不要管,把里面的 return 返回都找出来, 一个函数里面,什么情况会结束这个函数,是不是遇到return的时候。这个方法我找到了2个 return。

  也就是说有2种情况会结束这个函数,我来改一下加2个断点。

  1. 看正常流程,就是正确传参的情况下,它是怎么走的。
  2. 看正常流程,以外的情况是怎么走的,不管它是不是正确的,不敢保证它有没有处理错误,错误了可能就直接异常了。

  

  然后来执行一下on,我用委托模式,(第5节有讲)。

  

  来刷新一下,看是一下是在哪里停了

   

  在第二个debugger断点了,在正常的传参情况下,上面的if语句不满足。

  好,先不管上面的if语句,先把下面的语句分析完先。

 

this._events || (this._events = {});

 

  这是一句表达式,逻辑或,this._events为true的时候,即不执行后面的语句。反之,即执行后面的语句,这句表达式大概是判断是不是有值,没有值即把它声明为一个空对象。这边我先在断点处,试着打印 this._events,结果是undefined 即 false。那么接下去,走完表达式,this._events || (this._events = {});。不出意外this._events即被声明为一个对象。所以在没执行表达式的时候我先把this._events声明并赋值12。然后单独走到line93,在来打印this._events,是不是this._events有值,即不执行表达式后面的语句。

  

  this指向作用域,这里我定义了cc对象,cc调用on,所以this的隶属于cc。

  

 

 

var events = this._events[name] || (this._events[name] = []);

 

  前一句是给this声明了_events对象,而这句声明赋值语句我把它分成3段来分析:

  1.this._events[name]:这是一句对象键值访问句,来说一下怎么访问对象的属性。有2种:(对象.name,这是直接访问属性)(对象['name'],这是键值访问),2种属性访问呢,其实都是访问同一个位置,只不过键值访问会把[]里面的值进行字符串编码。它是什么意思呢?name 形参就是我们自定义事件名,就访问this._events[自定义函数]有没有这个属性。请看2继续

  2.(this._events[name] = []):没有的这个属性的话,我们就给声明这个属性,并且赋值为空数组。好,我知道不管是我还有大家还是有一点疑惑。

  3.var events =:这个有点深奥,为什么,因为我觉得是多余的,但是还没分析到后面无从说起,这里要注意的是:声明evetns 赋值给它的是什么?疑问来了!数组?没错!但是把一个数组赋值给一个变量或者是属性后,在赋值给另外一个变量,系统并没有创建2个数组,把this._events[自定义函数名]的保存的是一个地址,这个地址指向,this._events[自定义函数名] 创建的数组,而events这边变量存储的是this._events[自定义函数名]存储的地址,所以它们指向同一个数组。

 

 

 

events.push({callback: callback, context: context, ctx: context || this});

 

  变量events,它是一个数组,所以它有push方法。push保存了一个对象,对象的属性是对应on方法的形参。有什么用,要到trigger执行自定义函数才说得清楚,不过这里可以证明this._events[name] 和 events 指向的是同一个数组。我们只看到events.push了,但却没用看到this._events[name].push。

 

 

 

return this;

  返回调用on的对象,我们前面定义了cc对象调用on方法,返回cc对象,那我们是不是可以这样呢?链式调用,和jQuery是不是有点相同呢?

    

 

  好休息一下!

posted @ 2015-05-06 12:29  superjs  阅读(819)  评论(0编辑  收藏  举报