Liar Cocos2d-js (1)

　　Because of the job requirements I also began to touch the framework, there may be some nonsense before starting. I was hoping to share a process of my analytical learning.

Suppose is a not quite understand JS developer, see this code? Should be dizzy brain swell, but don't be afraid, I step by step to analyze it.

What I want to say is, in the face of a lot of, we can not understand the code, how to start?

Start with the basics, look at this code, what do we know?

What is CC? What types can you use to access the points? Does the object have properties only? Then we know that CC is an object, though we don't know what it's for.

What is Cc.game? CC is an object, through the point to access its Game property, the game is the properties of CC, then what is it? Do you want to access a property by point? Although we do not know what is the use of CC's game attributes? But we know it's an object.

Cc.game.onStart = what is funct? OnStart is accessed by the game through a point, it is a game property, and then assigns a function, we do not know what the game's OnStart method is useful? But we know it's a method.

Do not know everyone has no feeling, it is actually not so Ko afraid, just an object within the properties or methods only.

Where does the analysis go next? OnStart method? No, think, actually write JS is not, is the implementation and assignment, there will be other? Maybe I think very shallow, but we have a JS file divided into assignment and execution, then think about assignment and execution. In this main.js, just one assignment, and one execution, which is the entry point? (When we are clear about this page is nothing more than to assign values to the object, and the method of executing the object.) )

Think about what the Cc.game.onStart assignment is, and in order to execute it next, Main.js does not execute the Cc.game.onStart method. However, after assigning a value to OnStart, the Run method of the Cc.game object is executed.

It is not difficult to think that the Cc.game.run method must have performed the Cc.game.onStart () method.

So we first to locate the Cc.game.run method, the location method has a lot of, my side is directly with Google browser Console.log (cc.game.run), on the right side will see.

Take a look at the Cc.game.run method, which does 3 things:

1. Define a self variable, assign this, where is this point? CC object? No! This point is the Cc.game object, the Run method is subordinate to the Cc.game object instead of the CC object, a simple breakpoint, this = = = Cc.game Watch the return value.

2. Define a _run function, as to what is executed, we will execute the function, in order to analyze.

3.document.body? FUNC1 (): Func2 (), here is a ternary expression, there is no this Document.body object, determines the direction of the next execution, (here?). Because the source code is too many, it is impossible to analyze all, only follow the normal situation, then normal document.body is the BODY element, then what does not, document.body is empty false? Try adding a script tag at the end of the head tag, then break it, review the element, and print it.

At this time found, in this case, document.body to False to execute the Cc._addeventlistener () method, actually see this method name, everyone should be very familiar with, directly to locate or print a bit.

is to bind the Load event to the Window object, and when the DOM is loaded, the load event of the object pointed to by this (window) is unbound, and the second parameter must be a binding method when the Arguments.callee is actually a

After the unbind is complete, the _run method is executed to prevent the DOM from loading and executing the _run method.

Come to the _run method, which has 3 if statements

1. The first if statement is a judgment ID, but we do not have a value when executing the Cc.game.run method, so this is definitely not a walk, but we can try to print the value inside to dig up this thing, what is the use,

See how these 2 strings feel, Gamecanvas is not and index.html the canvas element ID value, self in the scope of the _run method is not declared, then go up in the scope of the Cc.game.run method to find self.

Now that self is actually the Cc.game object,

If we want to change the ID of the canvas, then execute the Cc.game.run method, when we change the name of the ID.

2. The second if statement is to take the anti-cc.game._preparecalled property to False when the Cc.game.prepare method is executed, the default Cc.game._preparecalled property is False, So the IF statement is bound to execute.

Well, let's go. Cc.game.prepare method:

(Before analyzing this method, I looked at it, found this method, did not want to encounter those methods as short, in this method defines a few variables, is to save the object or the property, so from the surface, unless you are familiar with the framework of COCOS2D-JS, Otherwise, the intention of the variable name is simply to know its purpose)

So here's the variable I first by printing its value to list the time to use, only to analyze them. This picture is the first half of the prepare method.

2.1. Here is the first list of 5 variables printed

2.2 Next is an if statement, Cc._supportrender property, here I printed a bit is true, the IF statement is not executed, the execution of the content is a custom error. In turn, think of this thing since it may be true then it may be false, then it does not write this meaning, I this is not nonsense, then this Cc._supportrender property should be to determine whether to support certain functions to assign it. Look at the translation of the error message, that is: The renderer does not support Rendermode. So here's ctrl+f. Sets the Cc._supportrender property location. Look up, you will find an anonymous self-executing function, try a breakpoint, you will find that the anonymous function is executed in ccboot.js, introduced before Main.js, when initialized, this anonymous self-executing function will be executed before we execute cc.game.run.

To analyze, or old ideas, too many variables, a list to print a bit.

See this column value, in fact there is nothing to say, grab a few, the Os_android property of the Sys parameter is a string, with parentheses, assigned to Shideldos on the array. Cc.newelement method, return document.createelement, here is the creation of a canvas element. Our protagonist Cc._supportrender is set here to be false.

And there is win. Webglrenderingcontext, you will find that the self-executing function does not have a win variable, I printed a Window object, it is estimated that the upper scope is defined, there is this win. The browser for the Webglrenderingcontext method supports Canvas3d.

Next is the 2 if statement:

In fact, do not look at the judgment statement, single from the execution of the statement, it is not difficult to find the first if statement is the execution of 3D, the second is to support 2D, in the first if statement will see the logic and SUPPORTWEBGL, Supportwebgl saved Window.webglrenderingcontext, if the browser is not supported, the first if statement will not pass. I'm using Google Chrome here so I'm going to be the first if statement.

Here again to make an if statement, must cc.create3dcontext the method executes, the return value is not false, the protagonist Cc._supportrender is set to true. To print the Cc.create3dcontext method:

Define a string of arrays, this is the name of each browser that launches Canvas3d, it should be canvas3d each browser is not unified bar, for loop, create success that break out of the loop, return to the context, if 4 is not possible, return is null.

The initialization of the Cc._supportrender is set to a certain fall.

OK, go back to the Cc.game.prepare method (last 2 assignment statements in the first half)

Setting the value of the Cc.game._preparecalled property to True,jslist is an array, what's the use of it? Leave a question

3.cc.game.prepare method (lower half): The lower half is an if Else statement:

I printed the CC. Class, the result is undefined, I tried to retrieve a bit, ccboot.js, and did not set the Cc.class property, so here try to look at the Loader.loadjswithimg method. Loader saved is cc.loader. Position yourself.

Breakpoint, forcing the CC to be set. Class is true. (Note that here's CC.) Class, it should be where the problem cc appears. Class will be true, so take this route? We do not encounter this problem here, but still analysis, the final analysis of this route, should summarize, what will go this way, so this section will be more boring, it may not be accurate, because we are enforcing it, parameters or something may not be wrong, leading us to misinterpret the effect of its final realization)

3.1 Self saved is cc.loader.

3.2 Jsloadingimg is the return value that holds the execution cc.loader._loadjsimg method. Locate this method:

d.getElementById (cocos2d_loadjsimg) What is this, when you open index.html, you will find a load animation at the beginning, breakpoints will find:

The IF statement is reversed, without this element, re-create an IMG element, set SRC, add to the canvas, etc... , and the last is to return this element.

3.3 AGRs is the return value that holds the execution Cc.loader._getargs4js method. Locate this method:

Here finally return results, initialize the results array, anyway here is based on the length of the args, to save the settings results worth.

Here is the result of the return.

3.4 Execute the Cc.loader.loadJs method. Locate this method:

3.4.1 Self saved is cc.loader.

3.4.2 args with 3.3

3.4.3 Predir,list,callback

This has been the cc.loader.loadJsWithImg of our execution.

3.4.4 (Navigator.userAgent.indexOf ("TRIDENT/5") >-1) Determine if the browser contains TRIDENT/5, search the Web to determine Win7 IE9, that is, the implementation of Cc.loader._ Loadjs4dependency,

3.4.4.1 jslist:["Src/resource.js", "src/app.js"] length less than or equal to 0 execute CB (Exception method)

3.4.4.2 self saved is cc.loader.

3.4.4.3 Execute cc.loader._createscript to locate this method:

See here the whole giddy, (here is not with IE9) grasp the focus, create the script element, then to judge, judge the jspath["Src/resource.js", "Src/app.js"], set async, to bind the script Load/error event , the delete element is loaded, and the binding event is unbound. Added to the BODY element. JS will be loaded, go here to judge, CC. If class is true, it is possible to handle a link that has not been loaded into the Project.json file jslist set up.

3.4.5 because I use Google Browser, not IE9, continue to go down, execute Cc.async.map method, to locate this method:

3.4.5.1 Loctterator Save the formal parameter iterator (a function)

3.4.5.2 parameter iterator is a function so this if statement does not go ...

3.4.5.3 constructs a Asyncpool object, executes the method flow under the Asyncpool object, and finally returns Asyncpool, so here's what it's all about to do the flow method after the object is created ... Locate:

To say here is not directly analyze this constructor, and directly look at the flow of the method to achieve what function, because a constructor, construct an object, an object may have many properties, many methods, do not know what the object is exactly what the use of the time to analyze it, it feels a bit dull. Before that I was going to analyze this constructor directly, but found special. , and the Chinese API document does not have this explanation, the English explanation, also has 2 sentences. So the way to see it directly here is to implement what function.

3.4.5.3.1 self points to the constructed object, pointing to CC. Asyncpool.prototype

3.4.5.3.2 If statement, the length of the condition This._pool property is not equal to 0, so here is no execution.

3.4.5.3.3 for loop execution cc. Asyncpool.limit number of CC. Asyncpool._handleeitem method, come here, look at CC. The properties of the Asyncpool constructor are not so dull, how many times are they obtained?

If you were to analyze these properties from the outset, it would be a little more than a matter of time to look at the parameters passed in when constructing the object.

Cc.each, the method of realization believe that everyone is not unfamiliar, here does not say, traversing the array srcobj in the form of an object {Index:num,value:string}push into the This._pool array, so here the this.size saved this. _pool the length of the array, and finally, the this._limit with logic or to assign a value, of course not itself, is itself 0;

OK, now that you know the number of executions, this._handleitem see what this method does?

3.4.5.3.4 self points to the constructed object, pointing to CC. Asyncpool.prototype

The 3.4.5.3.5 item holds the first element value removed from the Self._pool array. To execute 2 times, the next time you execute, the current second element is saved, and the Self._pool array is empty.

3.4.5.3.6 value holds the Value property of the item object, and index holds the index property of the item object.

3.4.5.3.7 changes the object with the Self-_iterator method to Self._iteratortarget (here is undefined),

The self._iteratortarget here is undefined, and then I try to break the breakpoint in the Self._iterator method, print this, or simulate a function that disguises the object as a undefined, The result of this is pointing to the Window object. So that's it.

3.4.5.3.8 executes the Cc.path.join method, accepts 2 values, returns an assignment to Jspath, and locates the method.

Iterates through the parameters, returning the specified characters and stitching them into links.

The Localjscache object inside the 3.4.5.3.9 if statement is empty, meaning that the statement does not fire.

3.4.5.3.10 Self._createscript This method, is not very familiar with the situation in front of IE9

So the last bold guess. To summarize CC. Class, it is possible that the files set by project are not loaded, so they will repeat the request, or they will throw an exception if they do not. However, after testing, if the files that are loaded with Project presets go not cc. Class this if statement. So basically pass to CC. The class assignment is true, which is also an analysis of what it has done.

This chapter is here, hopefully the following will solve the problem. Finally is about the violence analysis backbone.js thing, because the work reason, I must put into other studies, therefore has the time to update, writes it well.

Liar Cocos2d-js (1)