Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best method for adding your script to the window object?

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!

like image 599
Stephen Jenkins Avatar asked Nov 02 '22 16:11

Stephen Jenkins


1 Answers

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.

like image 89
Felix Kling Avatar answered Nov 11 '22 19:11

Felix Kling