Making Functions Public from Inside jQuery Function

Question

I have a block of JavaScript/jQuery that works fine.

<script type="text/javascript">
    $(function () {
         function doSomething() {
             // Do something amazing here!
         }
        // Many various jQuery handlers and support functions
    });
</script>

But now I'd like my doSomething() function to be callable from another block of script on the same page.

I understand I can do that by moving doSomething() outside of the jQuery function ($(function () {})). But then doSomething() wouldn't be able to call the helper functions inside of the jQuery function.

I could move the other functions outside of the jQuery function, but some of them are handlers that need to be initialized, and they share they same helper functions.

Is there a way to keep all my functions inside my jQuery function, but just make one of them visible outside of it?

And any suggestions on where I could go to read up on this?

"I'd like my...function to be callable from another block of script on the same page". Why do you want to do that? — Alex W
– Alex W, Commented Oct 2, 2014 at 20:38
@AlexW: Because this is a huge WebForms project with hundreds of components, and some of those components need to interact with other ones at the client level. — Jonathan Wood
– Jonathan Wood, Commented Oct 2, 2014 at 20:40
Why define any functions inside $(function () { ... });? I don't see any reason why you would need to do this. I would just put them all outside. — Spencer Wieczorek
– Spencer Wieczorek, Commented Oct 2, 2014 at 20:47
Johnatha, i will advice you to invest your time to learning RequireJS, it's will help you to bring modularity to your code and some other improvements to project — Lesha Ogonkov
– Lesha Ogonkov, Commented Oct 2, 2014 at 20:48
@LeshaOgonkov: Thanks but I'm more interested in learning about JavaScript and jQuery before taking on new technologies. — Jonathan Wood
– Jonathan Wood, Commented Oct 2, 2014 at 20:49

Alex W · Accepted Answer · 2014-10-02 20:47:38Z

2

JavaScript has functional scope. So, the reason you can't call your function if it is nested within

$(function () { ... });

is because it is only accessible within that function's scope.

You can easily move that function definition:

function doSomething() { ... }

outside of the $(function(){...}) function and still have access to variables within the $(function(){...}) function's scope by passing the variables as parameters to the function and then having it return any modifications:

    $(function () {
         var blah = 'blah';
         var result;
         result = doSomething(blah);
         // Many various jQuery handlers and support functions
     });
     function doSomething(blah) {
         // Do something amazing here!
         return newBlah;
     }
     // Now you can call your doSomething function in the global scope too
     var example = "test";
     var result = doSomething(example);

answered Oct 2, 2014 at 20:47

Alex W

38.5k13 gold badges114 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonathan Wood Over a year ago

Maybe I can restructure it this way. I know there are ways to be more OOP with JavaScript and that's where my knowledge is lacking. I was hoping for something more along those lines, but perhaps this is the best answer to my current task.

Lesha Ogonkov · Accepted Answer · 2014-10-02 20:44:08Z

0

Well, in fact you should move your logic from this wrapper.

It's intended for initialization of logic that should run after DOM is ready. You shouldn't make any functions here.

Consider following pattern for your code:

(function($) {
  // Your logic here
  // You could safely export your functions to
  // global scope from here, if you really need
  var app;

  app = {
    forms: doSomething
  };

  function doSomething() {
    // Do something amazing here!
  }

  window.app = app; 

  $(function() {/* start interact with DOM */});
}(jQuery));

edited Oct 2, 2014 at 20:44

answered Oct 2, 2014 at 20:35

Lesha Ogonkov

1,2488 silver badges20 bronze badges

2 Comments

Jonathan Wood Over a year ago

If you haven't figured it out already, my background is in languages other than javascript. So your first suggestion doesn't provide me with any new or helpful information. Yes, I could consider the pattern you suggest. But as it stands, I have no idea why I should. In fact, I don't even understand what it does.

Lesha Ogonkov Over a year ago

My second sentence about why it should be done. In short: you don't need to wait for DOM, to initialize your logic code

Ragnar · Accepted Answer · 2014-10-02 20:52:25Z

0

You can do it extending jQuery:

$.extend({
    foo: new function () {
        var _self = this;            

        _self.doSomething = function () {

        };   

        _self.initialize = function () {
            $('#button-x').click(function(){
                _self.doSomething(); //use the function inside
            }); 
        }; 
});

$(function () {
    $.foo.initialize();
    $.foo.doSomething(); //use the function outside
});

edited Oct 2, 2014 at 20:52

answered Oct 2, 2014 at 20:41

Ragnar

4,6281 gold badge33 silver badges42 bronze badges

Collectives™ on Stack Overflow

Making Functions Public from Inside jQuery Function

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related