Javascript: Accessing functions within Anonymous function

Question

Using jQuery as suggested by Wordpress, I have wrapped my code in an anonymous function so that jQuery will not conflict with other javascript libraries:

(function($) {

    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut

})(jQuery);

The problem is that I want to split my code into two files: 1) main.js and 2) utility.js.

How can the main program (main.js) call functions within the other file (utility.js) when both are encapsulated?

utility.js

(function($) { 

function doSomething() {
    /* code here */
}

})(jQuery);

main.js

(function($) { 

$(document).ready(function(){
    doSomething();
}

})(jQuery);

Thanks

In addition to the below answers, I would look into namespacing — Tomanow
– Tomanow, Commented Dec 3, 2015 at 13:04

Jai · Accepted Answer · 2015-12-03 13:21:46Z

3

You can use to return an object out of this utility.js:

(function($, win) {
  win.util = function(){
    this.doSomething = function() {
      $('pre').append('util.js');
    }
  };
})(jQuery, window);

(function($, $U) { // <----referred it with $U

  $(document).ready(function() {
    $U.doSomething();
  });

})(jQuery, new util()); //<----pass the util object here.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre></pre>

Actually i like the way to use it in OOJS way. Try creating a constructor and pass a new object.

edited Dec 3, 2015 at 13:21

answered Dec 3, 2015 at 13:02

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

3 Comments

alds Over a year ago

It's working. Thanks. Got some additional questions though. Both your's and pablochan's code below works. Coming from a PHP background, why do you have to assign util as a function and not just an object as what pablochan did, which seems to be more straightforward? Is this just preference or is this a safer or more extensible method? Also, why do we need 'new' and not just 'window.util' which throws an error? pablochan code works without using new(). Thanks again!

Jai Over a year ago

@alds this is just as same as the other answer. The thing here is that you have passed an object as a reference. And the keyword this is used as a public property which is globally available. But the other answer used as a function instead which is also good but using as an object is much better way.

alds Over a year ago

Thanks Jai. Had to read up to understand all these differences

pablochan · Accepted Answer · 2015-12-03 13:04:16Z

2

The simplest solution is to assign all functions in utility.js to some global object. Assuming your code works in the browser you could do something like this:

utility.js

(function($, context) { 

context.Utility = {
    doSomething: function() {
        /* code here */
    }
};

})(jQuery, window);

main.js

(function($, Utility) { 

$(document).ready(function(){
    Utility.doSomething();
}

})(jQuery, Utility);

A more general solution would be to use asynchronous module loading (http://requirejs.org/) or a tool like JSPM to manage modules in your application.

answered Dec 3, 2015 at 13:04

pablochan

5,72530 silver badges42 bronze badges

1 Comment

alds Over a year ago

It's working. Thanks @pablochan. Also for mentioning require.js and JSPM. I had to read over them sometime as they are new to me.

Collectives™ on Stack Overflow

Javascript: Accessing functions within Anonymous function

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related