JavaScript Modules
What is a Module?
// Object Literal
var MyModule = {
property: 'someValue',
method: function () { }
};
// Module Pattern
var Module = (function () {
// Private state
var privateVar,
privateMethod;
privateMethod = function() { };
// Public state
return {
publicVar: 'someValue',
publicMethod: function() { }
};
})();
Why use Modules?
- Code organization
- Encapsulation
- Dependency management
- Optimization
- Reusability
- Collaboration
Module Strategies
- Globals
- AMD
- CommonJS
- UMD
- ES6 / ESM
Globals
// app.js
var App = {};
// Code goes here
window.App = App;
// overlay.js
function Overlay() { }
App.Overlay = new Overlay();
Pros
- Native browser support
- Easy to implement
- No build step
- Faster initial load time
Cons
Globals
- Not scalable
- Fragile code
- Manual dependencies
- Global lookup performance
AMD
// importing
require(['react', './doSomething'], function(React, doSomething) {
// Code goes here
});
// exporting
define('Overlay', ['react'], function(React) {
function Overlay() { }
return new Overlay();
});
- Designed for the browser
- No build step required
- Asynchronous loading
- Flexible format
- Explicit dependencies
- Plugin support
AMD
- Verbose syntax
- Requires script loader
- Extensive configuration
- Asynchronous execution
Pros
Cons
CommonJS
// importing
const React = require('react');
const doSomething = require('./doSomething');
// exporting
function Overlay() { }
module.exports = new Overlay();
- Adopted by Node.js
- Access to NPM ecosystem
- Convenient syntax
- Synchronous execution
CommonJS
- Built for the server
- Build tools required
- Large module bundles
- Synchronous loading
Pros
Cons
UMD
// overlay.js
(function (global, factory) {
if (typeof define === "function" && define.amd) {
// AMD
define(["react", "./doSomething"], factory);
} else if (typeof exports === "object") {
// CommonJS
module.exports = factory(
require("react"),
require("./doSomething"));
} else {
// Globals
global.Overlay = factory(global.React, global.doSomething);
}
}(this, function (React, doSomething) {
var Overlay = function () { };
return Overlay;
}));
- Front and back end
- Supports AMD, CJS, and globals
- Used as bundler fallback
UMD
- More of a pattern than system
- No ESM support
Pros
Cons
ESM
// importing
import React from 'react';
import doSomething from './doSomething.js';
// exporting
function Overlay() { }
export default new Overlay();
- Works in modern browsers
- Nice, compact syntax
- Static module structure
- Live bindings
- Asynchronous / synchronous loading
ESM
- CJS incompatibility
- Build tools required
- Module Loader spec
Pros
Cons
Thanks!
JavaScript Modules
By webguyian
JavaScript Modules
- 48