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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With