I've been seeing a familiar pattern in JavaScript/jQuery plugin development (Modernizr uses this first example), by which the functions are nicely wrapped in an IIFE and are globally defined on the window object. I am asking is if it's a good idea to make your plugins/scripts accessible globally by doing the following:

window.myPluginName = (function (window, document, undefined) {
  // Plugin logic
})(window, document);

I ask this because some scripts/plugins need accessing in the DOM where they're called, or elsewhere in a document/file. Inside the plugins I also see this sometimes:

(function (window, document, undefined) {
  window.myPluginName = function () {
    // Plugin logic
  }
})(window, document);

And even this:

(function (window, document, undefined) {
  var myPluginName = function () {
    // Plugin logic
  }
  window.myPluginName = myPluginName;
})(window, document);

I am really intrigued as to the differences behind the setups, and if someone with more experience than I would be kind enough to provide some advice on which is best to use for development. Thank you!

I've been seeing a familiar pattern in JavaScript/jQuery plugin development (Modernizr uses this first example), by which the functions are nicely wrapped in an IIFE and are globally defined on the window object. I am asking is if it's a good idea to make your plugins/scripts accessible globally by doing the following:

window.myPluginName = (function (window, document, undefined) {
  // Plugin logic
})(window, document);

I ask this because some scripts/plugins need accessing in the DOM where they're called, or elsewhere in a document/file. Inside the plugins I also see this sometimes:

(function (window, document, undefined) {
  window.myPluginName = function () {
    // Plugin logic
  }
})(window, document);

And even this:

(function (window, document, undefined) {
  var myPluginName = function () {
    // Plugin logic
  }
  window.myPluginName = myPluginName;
})(window, document);

I am really intrigued as to the differences behind the setups, and if someone with more experience than I would be kind enough to provide some advice on which is best to use for development. Thank you!

• javascript
• window

• This question ends up a nice, concise summary of the solutions. – SexxLuthor Commented Feb 10, 2018 at 6:19

1 Answer 1

Short answer: Use the one that makes the most sense to you.

Longer answer: The only difference is where the assignment takes place, but functionality-wise they are all equivalent. None of them has any advantage or disadvantage over the other.

Note: As it stands, the last two wouldn't work because window is undefined inside the function. But I assume that you'd actually pass the window object as argument to the IIFE.