Building a JavaScript library, why use an IIFE this way?

Question

I have noticed a lot of libraries use this style below to define their library. I also notice that the first self invoking function has something to do with Require.js or AMD systems, they always have factory as an argument, I will look more into Require.js, always been into Browserify.

Why is the main code passed into the end of the first self invoking function inside parentheses, is this is a closure, or just considered an anonymous function, I will dig deeper into both. What are the benefits to this? It looks like inside the closure the author passes a string, this, and a callback.

Will this give my library a clean safe way to globalize the main object in this example below Please?

(function( globalName, root, factory ) {
    if ( typeof define === 'function' && define.amd ) {
        define( [], factory );
    }
    else if ( typeof exports === 'object' ) {
        module.exports = factory();
    }
    else{
        root[globalName] = factory();
    }
}('Please', this, function(){

I am trying to dig really deep into JavaScript and create my own small MVC architecture, I don't want to hear I am silly or its been done before, I want to challenge myself and learn.

If there are any great resources for creating a JavaScript library or even better an MVC library I would love to know.

Answer 1

This code pattern is called Universal Module Definition (UMD). It allows you to make your JavaScript library usable in different environments. It provides three ways of defining modules:

1. Asynchronous Module Definition (AMD), implemented by RequireJS and Dojo Toolkit.

   define( [], factory );

2. CommonJS — NodeJS modules.

   module.exports = factory();

3. Assigning module to the global object, for example window in browsers.

   root[globalName] = factory();

The IIFE has three parameters: globalName, root and factory.

• globalName is the name of your module. It applies only to the third way of defining a module, i.e. assigning your module object to the global variable. For example, if you set this parameter to "myAwesomeModule" and use the code in browser (without AMD), you can access your module using myAwesomeModule variable.
• root is the name of global object. Obviously, it also applies only to the third way of defining a module. Usually this is passed as this parameter, because this is a reference to window in browser. However, this doesn't work in strict mode. If you want your code to work in strict mode, you can replace this with typeof window !== "undefined" ? window : undefined.
• Finally, factory is an anonymous function, which should return your module as object.

See also:

• What is the (function() { } )() construct in JavaScript?
• What Is AMD, CommonJS, and UMD?

Answer 2

This is an example of Universal Module Definition (UMD). It is a technique to make a JS module compatible with the three popular JS module specs:

1. Asynchronous Module Definition (AMD, used by Require.js)

   define('name', [ /* dependencies */ ], factory);
   

2. CommonJS (Node.js ecosystem)

   module.exports = object;
   

3. Global exports (for example, on window in the browser)

   global['name'] = object;
   

UMD wraps a factory function responsible for creating the object to be exported and passes it as an argument to an immediately invoked function expression (IIFE), as in the snippet you pasted. The IIFE is responsible for detecting the module environment, and exporting the object created by the factory in an appropriate way. The pattern is as follows:

(function (name, root, factory) {
   // detect the module environment and
   // export the result of factory()
})('name', this, function () {
   // module code
   // return the object to be exported
});

Many transpilers and build tools generate this wrapper automatically.