从jQuery函数内部公开函数

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?

Answer 1

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

Answer 2

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

Answer 3

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