Questions about Organizing jQuery Functions within a Single Function

Question

I've noticed sometimes people put a bunch of callable functions within their $(function() { ...here... }); block. I wondered why but then noticed a possible reason: naming collisions don't appear to be a concern if the two objects are in different jQuery code blocks.

Is my thinking correct? This would seem to be a big advantage.

But now that I've taken this approach, I have the need to make one of my functions callable from other jQuery code blocks. So I can move the function outside the code block, but it needs to call other functions inside the code block.

So do I need to move all my functions outside the code block, or is there a way to keep this separation but still be able to call one of my functions from another code block?

Travis J · Accepted Answer · 2013-01-17 03:16:20Z

The fact that they are using jQuery's document.ready shortcut is not really as much of an issue for defining the variables, as much as the fact that the variables (or functions) are inside of a closure created by the anonymous function

`function(){}`

So yes, this is primarily done to avoid polluting the global namespace. It is also done with the hopes that once out of scope, the garbage collector may be able to collect some of what was in there (since it is out of scope).

If you want to have a global variable, there is nothing wrong with that, just try to limit them as much as possible. If you need one from inside of the ready block, then just define it outside and reference that inside.

var MyGlobalObj_guid52z = {};
$(function(){
 MyGlobalObj_guid52z.MyFunction = function(){
  //do what you want in here
 };
});
//and later you can do this
MyGlobalObj_guid52z.MyFunction();

petermk · Accepted Answer · 2013-01-17 03:15:13Z

1

You should read up on the Module pattern. Here's a small example for you:

window.Namespace = window.Namespace || {}; //defining our namespace

Namespace.Module = (function(){
   var api = {};

   var func = function() { //private function, accessible only inside this module

   };

   api.publicfunc = function() { // public function

   };

   return api; //all api functions will be available globally
})();

answered Jan 17, 2013 at 3:15

petermk

7771 gold badge6 silver badges20 bronze badges

Collectives™ on Stack Overflow

Questions about Organizing jQuery Functions within a Single Function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related