Question

Long story short, I have a long code that uses jQuery. Lots of files, functions, etc. A less than ideal amount of our users are having issues with our code because some addons, toolbars and the like they have installed breaks our JavaScript code because of jQuery gets included twice and nasty stuff like that.

I thought I could just

1. Include jQuery
2. Use $.noConflict
3. Then include the whole rest of my code between something like:

.

(function($) { 
    // All of my code goes here.
})(jQuery);

I haven’t checked if this fixes our issues with those users, but it does work. The problem is, in one part of the site (image upload) we have an iframe that needs to call some of those functions defined in our big chunk of code. I’ve tried putting those functions out of this unnamed function call, but it uses, on itself, other functions which have to be there.

Any idea or workaround of how could I be able to access functions defined inside that function (shown above) from a code that’s outside of it?

Thanks!

Answer 1

You cannot access a function context from the “outside world”. Well, to be accorate you could do it in some older js engines which allowed for accessing .__parent__ attributes, but that is old’n’busted and no longer available.

However, you would need to either expose some functions within your closure, or you creating a namespace object where you write all of your logic in (which also has to be available in the parent context).

So I’d suggest something like

(function( $ ) {
    function myFunc() {
        // do stuff
    }

    function anotherFunc() {
    }

    window.myFunc = myFunc; // expose myFunc globally
}( jQuery ));

Maybe even better:

var myNameSpace = { };
(function( $ ) {
    myNameSpace.myFunc = function() {
        // do stuff
    };
}( jQuery ));

// somewhere else
myNameSpace.myFunc();