Instantly share code, notes, and snippets.

Embed
What would you like to do?
A history of different JavaScript module formats
/**
* Globals
*/
var Carrousel = function(elem) { this.init() };
Carrousel.prototype = { init: function() {} };
new Carrousel();
/**
* Namespacing
* - No globals (only the namespace variable itself is global)
*/
window.NS = {} || window.NS;
NS.Carrousel = function(elem) { this.init() };
NS.Carrousel.prototype = { init: function() {} };
new NS.Carrousel();
/**
* IIFE (immediately-invoked function expression)
* - No globals
*/
(function(){
var Carrousel = function(elem) { this.init() };
Carrousel.prototype = { init: function() {} };
new Carrousel($('.carrousel'));
}());
/**
* Module Pattern
* - No globals (the entrypoint code is often wrapped inside an IIFE as well)
* - Import dependencies, synchronously
* - Export module
*/
var Carrousel = (function($) {
var Carrousel = function(elem) { this.init() };
Carrousel.prototype = { init: function() {} };
function privateMethod() {};
return Carrousel;
}(jQuery));
/**
* CommonJS
* Used inside Node.js, where sync is required.
* - No globals (all modules are wrapped inside an anonymous function)
* - Import dependencies synchronously with `require()` function
* - Export module by assigning to `module.exports` variable
*/
var $ = require('jQuery');
var Carrousel = function(elem) { this.init() };
Carrousel.prototype = { init: function() {} };
function privateMethod() {};
module.exports = Carrousel;
/**
* AMD (Asynchronous Module Definition)
* Used inside browsers (via Require.js for example), where async is often required.
* - No globals (all modules are wrapped inside an anonymous function)
* - Import dependencies, asynchronously (http-call)
* - Export module
*/
define(['jQuery'], function($) {
var Carrousel = function(elem) { this.init() };
Carrousel.prototype = { init: function() {} };
function privateMethod() {};
return Carrousel;
});
/**
* ES2015 Modules
* This syntax is often transpiled to ES5 for systems without support. The transpilation target is either CommonJS or AMD.
* - No globals
* - Specification is syntax-only (doesn't define sync or async behaviour)
* - Syntax reads synchronously
* - Import dependencies with `import` statement
* - Export module with `export` statement
*/
import $ from 'jQuery';
var Carrousel = function(elem) { this.init() };
Carrousel.prototype = { init: function() {} };
function privateMethod() {};
export default Carrousel;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment