CODEWITHSUNDEEP
javascript
manuelflara
manuelflara

Reputation: 457

Accessing a function defined inside a function from the global scope?

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!

Upvotes: 0

Views: 223

Answers (5)

Raynos
Raynos

Reputation: 169383

window.PARTY_CATS_jQuery = jQuery.noConflict(true);

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

Then just use PARTY_CATS_jQuery in your global functions

If you feel PARTY_CATS_ is not a unique enough name pick something safer like BABY_KILLER_jQuery

Upvotes: 0

James Shuttler
James Shuttler

Reputation: 1374

Why are you wrapping your code in a call to the jQuery function object which you pass in to your self-executing anonymous function; are you meaning to create a jQuery object from all of your code?

In order to expose your code to the outside world, you need to assign your functions and objects to an object which is outside of the scope of your code, such as the window object.

For example, if you had created an object containing various methods and properties that you wanted to expose, you could do this:

//Your self-executing anonymous function
(function($)
{
 //Object which contains various useful methods and properties
 var useful = {...};

 //Expose it to the outside world
 window.Useful = useful;
})(jQuery);

EDIT: as others have noted, it is not an ideal solution as you will indeed run into naming collisions if you are not careful. Also, using an object external to your anonymous function as a namespacing object (as others have stated) is my preferred method

Upvotes: 1

cheeken
cheeken

Reputation: 34655

It is not an ideal practice, but you can declare those functions in the global scope. 

(function($) {
    globalFunct = function (arg1, arg2) {  // Don't use var keyword
       ...
    };
})(jQuery);

It isn't ideal because you can run into naming collisions, much like you are observing with jQuery. Improve upon this approach by putting all of your globally-accessible methods in a "package." Choose a unique name for it. This will prevent collisions.

// Somewhere outside of your anonymous function, in the global scope
var myPackage = {};

(function($) {
    myPackage.globalFunct = function (arg1, arg2) {
       ...
    };
})(jQuery);

Then call that method by invoking myPackage.globalFunct().

Upvotes: 1

jAndy
jAndy

Reputation: 235972

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();

Upvotes: 1

Julian D.
Julian D.

Reputation: 5463

Yes, you can "export" the function from within a closure: Yes, you can "export" the function from within a closure:

(function() {
    function a() {
        console.log("a");
    }

    function b() {
        a();
        console.log("b");
    }

    // make b globally available
    window.b = b;
})();

b();

Upvotes: 0

Related Questions