FrankenStein

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

Recommended Posts

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.