Question

I’m working on a large project that is organized like so:
Multiple javascript files are included as needed and most code is wrapped in anonymous functions…

// wutang.js

//Included Files Go Here

// Public stuff
var MethodMan;

// Private stuff
(function() {

var someVar1;

MethodMan = function(){...};

var APrivateMethod = function(){...};

$(function(){
//jquery page load stuff here
    $('#meh').click(APrivateMethod);
});
})();

I’m wondering about a few things here. Assuming that there are a number of these files included on a page, what has access to what and what is the best way to pass data between the files?

For example, I assume that MethodMan() can be accessed by anything on any included page. It is public, yes?

var someVar1 is only accessible to the methods inside that particular anonymous function and nowhere else, yes? Also true of var APrivateMethod(), yes?

What if I want APrivateMethod() to make something available to some other method in a different anonymous wrapped method in a different included page. What’s the best way to pass data between these private, anonymous functions on different included pages? Do I simply have to make whatever I want to use between them public? How about if I want to minimize global variables?

What about the following:

var PootyTang = function(){
    someVar1 = $('#someid').text();
    //some stuff
};

and in another included file used by that same page I have:

var TangyPoot = function(){
    someVar1 = $('#someid').text();
    //some completely different stuff
};

What’s the best way to share the value of someVar1 across these anonymous (they are wrapped as the first example) functions?

Answer 1

You’re right – any variable declared inside the anonymous function stays inside the anonymous function. So from the first example, MethodMan will be available to everything, and someVar1 is indeed private.

When you talk about ‘including’ files, imagine you just copy and paste the code from all the separate files into one big file. This is essentially what happens. If you want someVar1 to be available to different “modules” (since that’s what you’re emulating w/ the anonymous functions), then declare it outside any of the modules, e.g.:

var someVar1 = "initialValue";
(function() { //module 1
    var PootyTang = function(){
        someVar1 = $('#someid').text();
        //some stuff
    };
})();
(function() { //module 1
    var TangyPoot = function(){
        someVar1 = $('#someid').text();
        //some stuff
    };
})();

In this case, since someVar1 is global, they will access the same variable. But note that if you did this instead:

(function() { //module 1
    var TangyPoot = function(){
        var someVar1 = $('#someid').text();
        //some stuff
    };
})();

You’d be creating a separate local variable called someVar1 that wouldn’t affect the global.