8 Replies - 726 Views - Last Post: 30 August 2013 - 09:45 AM

#1 insanepenguin  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 238
  • Joined: 08-July 10

Javascript module pattern and name spacing

Posted 29 August 2013 - 12:31 PM

Hi,

I understand the 'self executing' function syntax ie

(function()
{
}();


But can someone explain how the name spacing works? i.e.

(function (app, $) {

    // Initialization
    function init() {
        if (window.index) index.init();
        if (window.settings) settings.init();
        if (window.about) about.init();
        if (window.router) router.init();

      
})(window.app = window.app || {}, $);


I can see the init function is calling other init functions if they exist, what I'm struggling with is the arguments passed in and the (window.app = window.app || {}, $) part

Many thanks :)

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript module pattern and name spacing

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Javascript module pattern and name spacing

Posted 29 August 2013 - 01:22 PM

(window.app = window.app || {}, $);

This is what is being passed to the anonymous function that is being executed here
(function (app, $){...}(...) {



The window.app = window.app || {}, $ is setting the "app" argument to the existing "app" namespace if it is already created or it is setting it to an empty object, the $ is the next argument being passed straight to the function so it is available for use.

Think of the parenthesis at the end like the parenthesis in an ordinary function

//Standard
function call();//these parentheses are where you put your arguments when calling the function.

(function(){})()// these are the parenthesis for passing arguments to the anonymous function inside.


I hope this helps, if not we can dive more into namespacing and functions.
Was This Post Helpful? 3
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: Javascript module pattern and name spacing

Posted 29 August 2013 - 01:31 PM

Maybe this makes a little more sense? It's basically the same code, written in a more verbose way.
function iife(app, $) {
    // Do stuff.
}

if (window.app == undefined) {
    window.app = {};
}

iife(window.app, $);



By the way "self executing" is sort of a bad description of the syntax you were referring to. The term "immediately invoked" (Immediately-Invoked Function Expression, IIFE) describes it more accurately. See this article for full details why.
Was This Post Helpful? 2
  • +
  • -

#4 insanepenguin  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 238
  • Joined: 08-July 10

Re: Javascript module pattern and name spacing

Posted 29 August 2013 - 01:33 PM

Thanks for the reply, really helped wrap my head around it!

So essentially the
(window.app = window.app || {}, $); 
is looking if window.app currently exists in memory and if so passes this object into the anonymous function as an argument; if the object doesn't exist yet (like on a first execution or something) window.app is set to a new object?

And the final parameter is passing jQuery into the function for some reason?

Thanks again!
Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Javascript module pattern and name spacing

Posted 29 August 2013 - 01:38 PM

View Postinsanepenguin, on 29 August 2013 - 12:33 PM, said:

And the final parameter is passing jQuery into the function for some reason?


This is incorrect, the dollar sign $('element') when used in jquery is actually a shortcut for jQuery('element') also know as Syntactic sugar. this is not to say it cant be used for jQuery inside the function.
Was This Post Helpful? 0
  • +
  • -

#6 insanepenguin  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 238
  • Joined: 08-July 10

Re: Javascript module pattern and name spacing

Posted 29 August 2013 - 02:46 PM

Thanks guys, makes a lot more sense now - what is the main advantage of attaching modules/objects to the window object? code structure and avoiding the global scope/name collisions?
Was This Post Helpful? 0
  • +
  • -

#7 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Javascript module pattern and name spacing

Posted 29 August 2013 - 02:47 PM

When you attach an object to the window object it becomes Global in a sense, it is part of the window object which is global.

I hope this makes sense.
Was This Post Helpful? 1
  • +
  • -

#8 insanepenguin  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 238
  • Joined: 08-July 10

Re: Javascript module pattern and name spacing

Posted 29 August 2013 - 11:56 PM

Quote

When you attach an object to the window object it becomes Global in a sense, it is part of the window object which is global.


Yes that makes sense - the context is a single page/phone application, is using the window object a way to share and initialise various modules? e.g. The app module seems to initialise the others during start up

function init() {
        if (window.index) index.init();
        if (window.settings) settings.init();
        if (window.about) about.init();
        if (window.router) router.init();

}


Thanks
Was This Post Helpful? 0
  • +
  • -

#9 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 440
  • View blog
  • Posts: 1,867
  • Joined: 30-April 10

Re: Javascript module pattern and name spacing

Posted 30 August 2013 - 09:45 AM

I like to add to the window object to create global methods and such in a namespace so it doesn't interfere with any library/framework i may be using at the time. I don't use it too often as I haven't had a large need for it.

Think of it this way, if you need a method to be called say toString(), bad example, if you just made it toString it would overwrite the original method, but if you add a namespace to the window object call "app" you can call window.app.toString(args) and it will not interfere with the original toString() method.

Probably not the best description but I hope you get what I am saying.
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1