javascriptamdumdmodule-export

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


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.


Solution

  • 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.

    See also: