大话cocos2d-js(1)

  因为工作需求我也开始接触这个框架,前面开始可能会有一些废话。我是希望分享我分析学习的一个过程。

 

 

  假设是一个不太懂JS开发者,看到这些代码?应该会头晕脑胀吧,但是别怕,我逐步逐步来分析它。

 

  我想说的是,在面对一大堆,我们看不懂的代码的时候,该怎么入手?

 

  从基础入手,看这段代码,哪些是我们懂的?

 

  cc 是什么?大家想想什么类型可以用点来访问?是不是只有对象才拥有属性?那我们知道cc是一个对象,虽然我们不知道它有什么用。

 

  cc.game 是什么? cc是对象,通过点来访问它的game属性,game是cc的属性,那它又是个什么东西呢?是不是又通过点来访问一个属性?虽然我们不知道cc的game属性有什么用处?但是我们知道它是一个对象。

 

  cc.game.onStart = funct 是什么?onStart是game通过点来访问的,它是game的属性,然后给赋值为一个函数,我们虽然不知道game的onStart方法有什么用处?但是我们知道它是一个方法。

 

  不知道大家有没有感觉,它其实也没有那么ko怕,就一个对象内的属性或方法而已。

 

  接下去该分析哪里呢?onStart方法?不是的,想想,其实写JS是不是,总归就是 执行 与 赋值,还会有其他?可能我考虑的很浅,但我们暂且把一个js的文件分为 赋值 和 执行,那么在想想赋值和执行。在这个main.js,就一个赋值,和一个执行,哪个才是入口点呢?(当我们分清楚了这个页面的无非是给对象赋值,和执行对象的方法。)

 

  想想cc.game.onStart赋值是为了什么,为了接下来可以执行它,main.js并没有执行cc.game.onStart方法。但会发现在给onStart赋值以后,执行了cc.game对象的run方法。

 

  不难想到,cc.game.run方法必定执行了cc.game.onStart()方法。

 

  所以我们先来定位cc.game.run方法,定位方法有很多,我这边是直接用谷歌浏览器console.log(cc.game.run);,在右边会看到

 

 

 

  来看一下cc.game.run方法,它做了3件事:

 

  1.定义了个self变量,赋值this,这里的this指向哪里?cc对象?不是的!This指向的是cc.game对象,run方法是隶属于cc.game对象而不是cc对象,简单的断点一下, this === cc.game 观看返回值即可。

 

  2.定义了个_run函数,至于执行了什么,待我们执行该函数,在来分析。

 

  3.document.body? Func1():Func2(),这里的是一个三元表达式,有没有这个document.body对象,决定了接下去执行的方向,(这里呢?因为源码太多了,不可能就是全部都分析,只能跟着正常情况走),那么正常情况下document.body是body元素,那什么情况不会,document.body为空false呢?试着在head标签的尾部添加一个script标签,然后断点一下,审查元素,打印一下。

 

 

  这时发现,在这种情况下,document.body为false 执行 cc._addEventListener()方法,其实看到这个方法名,大家应该都很熟悉,直接来定位或者打印一下。

 

 

  就是给window对象绑定load事件,当Dom加载完毕,解绑this所指向的对象(window)的load事件,解绑的时候必第二个参数必须是绑定的方法,arguments.callee其实就是

 

  解绑完毕后,执行 _run方法,这样做是为了防止Dom没加载完毕,就执行_run方法。

 

  来到_run方法,这里面有3个if语句

 

  1.第一个if语句是判断id,但我们在执行cc.game.run方法的时候并没有值,所以这里铁定不是走的,但是,我们可以试着打印里面的值来挖掘一下这东西,到底有什么用,

  看到这2个字符串有何感想,gameCanvas 是不是和index.html的canvas元素id值,self在_run方法的作用域下面并没有声明,那往上走在cc.game.run方法的作用域下找到self。

现在知道self其实就是cc.game对象,

  如果我们要改变要改变canvas的id的话,那么执行cc.game.run方法,时候,传参我们改变id的name就可以了。

 

  2.第二个if语句是取反cc.game._prepareCalled 属性为false的时即执行cc.game.prepare方法,默认的cc.game._prepareCalled 属性为false,所以这个if语句是必定执行的。

  那来走一下cc.game.prepare方法:

    (在分析这个方法之前我看了一下,发现这个方法,不想之前遇到那些方法一样简短,在这个方法定义的几个变量,都是保存了对象或者是属性,所以从表面来看,除非你对cocos2d-js这个框架很熟悉,不然的话单纯从变量名用意来得知它的用意)

  所以这里的变量我先通过打印它的值来罗列一下,待要用到的时候,才来分析它们。这张图算是prepare这个方法的上半段吧。

 

  2.1.这里是先罗列打印了5个变量

 

  2.2接下来是一个if语句,cc._supportRender属性,这里我打印了一下是true,取反的话这个if语句是不会被执行的,执行内容是自定义了错误。反过来想想这东西既然可能是true那么也可能是false,那不然它写这个有什么意义,我这不是废话呢,那么这个cc._supportRender属性应该是判断是否支持某些功能给它赋值。看一下翻译了错误信息,得知是:渲染器不支持rendermode。所以这里来Ctrl+F一下设置cc._supportRender属性位置。往上查找,会找到一个匿名自执行函数,尝试断点一下,会发现,该匿名函数执行在ccBoot.js内,在main.js之前引入,初始化的时候,这个匿名自执行函数会在我们执行cc.game.run之前执行。

 

  来分析一下,还是老思路,变量太多了,罗列打印一下。

  看到这列值,其实没什么好说的,抓几个来说,sys形参的OS_ANDROID属性是字符串,加了括号,赋值给shideldOs就成数组了。cc.newElement方法,return document.createElement,这里是创建了个canvas元素。我们的主角cc._supportRender这里被设置成为false。

  还有就是win.WebGLRenderingContext,会发现自执行函数并没有win变量,我打印了一下是window对象,估计是上级作用域定义了,有这个win.WebGLRenderingContext方法的浏览器便支持canvas3D。

  接下来是2个if语句:

 

  其实不看判断语句,单从执行的语句来看,不难发现第一条if语句是执行3D的,第二条是支持2D的,在第一条if语句会看到逻辑与supportWebGL,supportWebGL保存了window.WebGLRenderingContext,如果浏览器不支持,第一个if语句是不会通过的。我这里用的是谷歌浏览器所以走的是第一条if语句。

  这里再次做了个if语句,必须cc.create3DContext方法执行完毕后,返回值不为false,才把主角cc._supportRender设置为true。来打印一下cc.create3DContext方法:

 

  定义一串数组,这是启动canvas3D的各个浏览器名字,应该是canvas3D各个浏览器还未统一吧,for循环,创建成功即break跳出循环,返回context,如果4个都不行的话,返回就是null。

  cc._supportRender的初始化设置就到一段落了。

 

  好,继续回到cc.game.prepare方法(上半段的最后2个赋值语句)

   

  设置了cc.game._prepareCalled属性的值为true,jsList是一个数组,有什么用呢? 留一个疑问

 

 

 

  3.cc.game.prepare方法(下半段):下半段是一个 if else语句:

 

  我打印了一下cc.Class,结果是undefined,我试着检索了一下,CCBoot.js,并没有设置cc.Class属性的,所以这里试着来看一下loader.loadJsWithImg方法。loader保存的是cc.loader。定位一下。

 

  断点,强制设置cc.Class为true。(注意,这里的cc.Class,应该是哪里出现问题cc.Class才会为true,从而走这条路线呢?我们这里没有遇到这个问题,但是还是分析一下,最后分析完这条路线,应该总结一下,什么情况才会走这条路,所以这一段会比较枯燥,也可能不准确,因为我们是强制执行它的,参数什么的也可能不对,导致我们曲解它最终要实现的效果)

 

  3.1 Self保存的是 cc.loader

  3.2 jsLoadingImg是保存了执行cc.loader._loadJsImg方法的 返回值。定位一下这个方法:

 

  d.getElementById(cocos2D_loadJsImg)这个是什么,打开index.html的时候,会发现一开始有一个load动画,断点一下会发现:

   

  If语句是取反,没有这个元素的即,重新创建一个img元素,设置src,添加到画布内等等等。。。,最后都是返回这个元素。

 

  3.3 agrs是保存了执行cc.loader._getArgs4Js方法的 返回值。定位一下这个方法:

 

  这里最终返回results,初始化results数组,反正这里就是根据args的长度,来保存设置results的值得。

  这里是返回的结果。

 

  3.4 执行cc.loader.loadJs方法。定位一下这个方法:

 

  3.4.1 self保存的是cc.loader

  3.4.2 args 同 3.3

  3.4.3 preDir,list,callback

这个一直是我们执行cc.loader.loadJsWithImg的传参

 

 

  3.4.4 (navigator.userAgent.indexOf("Trident/5") > -1)判断浏览器是否包含Trident/5,网上检索一下这是来判断win7的ie9,即执行cc.loader._loadJs4Dependency,

 

 

  3.4.4.1 jsList:["src/resource.js", "src/app.js"] 长度 小于等于0 执行 cb(异常方法)

  3.4.4.2 self保存的是cc.loader

  3.4.4.3 执行 cc.loader._createScript 来定位一下这个方法:

 

  看到这里整个头晕,(这里不是用ie9)抓重点讲,创建 script元素,然后来判断,判断传参jsPath["src/resource.js", "src/app.js"],设置异步,给script 绑定load/error事件,加载完毕删除元素,解除绑定事件。添加到body元素。Js就会进行加载了,走到这里可以判断,cc.Class为true的情况,可能是处理没加载到 没加载 到project.json文件内jsList设置好的链接。

 

  3.4.5 因为我用的是谷歌浏览器,不是ie9,继续往下走,执行cc.async.map方法,来定位一下这个方法:

 

  3.4.5.1 locTterator 保存了 形参iterator(一个函数)

  3.4.5.2 形参iterator是一个function 所以这个if语句不会走。。。

  3.4.5.3 构造了一个asyncPool对象,并且执行asyncPool对象下的方法flow,最后是返回asyncPool,所以这里来看创建这个对象后执行flow方法,有什么用。。。定位一下:

     这里要说的是不直接分析这个构造函数,而且直接来看flow的方法实现了什么功能,因为一个构造函数,构造一个对象,一个对象可能会有很多属性,很多方法,在不知道这个对象到底的干什么的用的时候来分析它,感觉会有点枯燥。在这之前我是打算直接,分析这个构造函数的,但是发现特别。。,并且中文api文档并没有这个的解释,英文的有解释,也就2句。。所以这里就直接看它的方法是实现什么功能。

 

 

  3.4.5.3.1 Self 指向 构造出来的对象,指向 cc.AsyncPool.prototype

  3.4.5.3.2 if语句,条件this._pool属性的长度不等于0,所以这里是不会执行。

  3.4.5.3.3 for循环 执行 cc.AsyncPool.limit次数的 cc.AsyncPool._handleeItem方法,到这这里,在来看cc.AsyncPool构造函数的属性就不那么枯燥了,次数是怎么得来的呢?

 

  如果一开始就来分析这些属性,估计也说不出个之所以然来,来看一下 构造对象的时候传入的参数

 

  Cc.each,的方法实现相信大家不陌生的,这里就不说了,遍历数组srcObj以对象的形式{index:num,value:string}push进this._pool数组,所以这里的this.size的保存了this._pool数组的长度,最后,this._limit 用逻辑或来赋值,当然不会是本身,本身是0;

 

  好,现在知道执行次数,this._handleItem来看一下这个方法实现的了什么功能?

 

  3.4.5.3.4 Self 指向 构造出来的对象,指向 cc.AsyncPool.prototype

  3.4.5.3.5 item保存了self._pool数组删除掉的第一个元素值。要执行2次,下次在执行的话,保存的就是当前的第二个元素,self._pool数组也为空。

  3.4.5.3.6 value保存了item对象的value属性,index保存了item对象的index属性。

  3.4.5.3.7 改变用self-_iterator 方法的对象为 self._iteratorTarget(这里是undefined),

 

 

 

 

  这里的self._iteratorTarget是undefined,然后我再试着在 self._iterator方法内断点,打印this,或者是模拟一个函数,把对象伪装成undefined,结果this都指向window对象。所以也就这样。

 

  3.4.5.3.8 执行cc.path.join方法,接受2个值,返回赋值给 jsPath,来定位一下方法。

 

  遍历传参,返回去除指定字符后拼接成链接。

 

  3.4.5.3.9 if语句内localJsCache对象为空,也就是说这个语句不会触发。

  3.4.5.3.10 self._createScript这个方法,是不是很熟悉,在前面 ie9的情况

 

  所以最后大胆的猜测。来总结cc.Class,可能是project设置了的文件没加载到,所以它们会重复请求,还是没有的话就会抛出异常。但是经过测试,如果就加载project预设的文件走的不是cc.Class这个if语句。所以大体通过给cc.Class赋值为true,也算是分析了它干了写什么。

 

  这一章就到这里,希望下面会解决这个疑问。最后就是关于暴力分析backbone.js的事情,因为工作原因,我又得投入其他学习,所以有空尽量更新,把它写好点。

原文地址:https://www.cnblogs.com/superjs/p/4539089.html