从另一个函数返回一个自执行函数（IIFE）

Question

(function($) {

    var foo = (function(){

        //some functions

    })();

    // I can access foo here
    var f = new foo();

})(jQuery);

// But obviously not here since it's in another scope

How do I return foo to the window scope, so that it can be accessed outside of the outer IIFE? I've tried return foo; but it did not work.

Answer 1

Simply set it as a window property:

(function($) {

    var foo = (function() {

        // some functions

    })();

    window.foo = foo;
//  ^^^^^^^^^^^^^^^^^

})(jQuery);

foo();

However, setting global objects as properties of the window object is typically looked down upon. Perhaps you can emulate this ability by managing your own custom "global" object. For example:

var global = {};

(function($) {

    global.foo = (function() {

        // define

    })();

})(jQuery);

global.foo();

That way you won't have name clashes when dealing with a variety of scopes and objects.

Answer 2

Using global properties is a express ticket to spaghetti code. Your whole application should live in as few elements in the global object as possible, ideally only one.

This is much more elegant and safe at the long term.

var MYAPP = {}; //declaring with var is not necessary here, but it's good to keep constant.

MYAPP = (function($, MYAPP) {

    var foo = (function(){

        //some functions

    })();

    // enrich your object
    MYAPP.foo = foo;
    return MYAPP;

})(jQuery, MYAPP);

And then you can use your "enriched" MYAPP object.

MAYPP.foo();

A pattern similar to this is suggested by JavaScript's God: Douglas Crockford.