amd - 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?