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.
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:
Asynchronous Module Definition (AMD), implemented by RequireJS and Dojo Toolkit.
define( [], factory );
CommonJS — NodeJS modules.
module.exports = factory();
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
.factory
is an anonymous function, which should return your module as object.See also: