Question

Currently I have all my JavaScript functions in a single function so the I don’t pollute the global namespace.

e.g.

var App = function() {

    function a() {
    }

    return {};
}();

Now I would like to use jQuery so I would like this wrapped in the following:

(function (window, document, $) {
   ...
}(window, document, jQuery));

I have tried wrapping the var App = function () {} in the jQuery function, however this causes problems when I have AJAX setting properties on App. Any ideas?

Answer 1

Instead of using a separate anonymous function, you can just pass the window, document, and jQuery directly into app:

var App = function(window, document, $) {
    function a() {
    }
}(window, document, jQuery);

Alternatively, you can declare App in the global namespace, but define it in the jQuery closure, like this:

var App = null;

(function (window, document, $) {
    App = function() {
        function a() {
        }
    };
}(window, document, jQuery));

Note that in both these examples, I’ve removed the return {} and in the second one I made the function non-self-calling. That part of the structure looks like copy-and-paste cruft and is unnecessary.