How was the namespace Phaser made globally in the source code ?

[FrankenStein]

Hello !

I really want to read the source code of phaser, but I am not that professional.

the namespace Phaser is declared inside a function, so I am wondering how we can access it outside it ?

(function(){

var Phaser = Phaser || {};

}).call(this);

 

Phaser.something = 5; //Reference error, Phaser is not declared

what things I ca learn to read the source code perfectly and have this awesome experience ?

[drhayes]

This part exposes it globally: https://github.com/photonstorm/phaser/blob/9f28d0659daaed07a15bc45ef39d89b97f3f3ecf/src/Outro.js#L15 That code is part of Phaser's UMD, or "universal module definition" which is a term you can type into Google to read more about.

When running in the global context in a browser, the value of "this" and "window" are exactly the same. There's a part in Intro.js where the code says, "var root = this;". So "root.Phaser = Phaser" is the same as "this.Phaser = Phaser" is the same as "window.Phaser = Phaser" in a browser.

I would pick something and just start reading. Maybe the Camera? That's pretty simple. You can trace through where all its properties are set and what they do, and who relies on it. Then you could look at the Loader, or something. I would just start reading. The code for Phaser is very readable and well commented.

[mattstyles]

Have a look at the intro and outro files, these define how Phaser attaches itself.

This is a fairly standard universal module definition variant which basically means it supports attempts to support commonJS and AMD module specifications and falls back to attaching globally when those are not available.

I've never got Phaser to work correctly with commonJS but its nothing to do with this UMD. It works flawlessly attaching globally to the window, as its large userbase can attest.

Your code snippet:

(function(){
  var Phaser = Phaser || {};
}).call(this);

is getting towards and encapsulated module, what you're doing is wrapping `Phaser` in a closure and either attaching a global Phaser object (if it exists) or creating a new object. The .call( this ) part passes through a context to the enclosed function, although in this case that is redundant anyway. If you wanted to change it to expose your own `Phaser` object you'd simply attach it to the context:

(function() {
  this.Phaser = {
    stuff: function() {}
  }
}).call( this )

But its unnecessary in this case and you might as well simply attach your object to the window.

edit: beaten to the punch

[FrankenStein]

@mattstyles @drhayes

Thanks a lot, that helped me a lot