Master JavaScript Modularization: From IIFE to ES6 Modules in 10 Minutes

This article introduces the history and core concepts of JavaScript modularization, including specifications, loaders, and bundlers, providing a concise 10‑minute overview.

What Is Modularization?

According to Baidu Baike, modularization is the process of dividing a complex system into multiple modules from top to bottom, each with distinct attributes reflecting internal characteristics.

Modularization: It allows code to be split into small, functional units, improving maintainability, reusability, and extensibility.

In JavaScript, modularization offers several benefits:

Code abstraction: encapsulate reusable logic in libraries and hide implementation details. Code encapsulation: expose public APIs while keeping internal implementation private. Code reuse: follow the DRY principle to reduce redundancy. Code management: simplify organization and maintenance of code structure.

Modularization Before ES5

Before ES5, JavaScript lacked native module support, so developers simulated modularization using patterns such as IIFE and the Module Pattern.

1. Immediately Invoked Function Expression (IIFE)

An IIFE is an anonymous function that executes immediately after definition. (function(){ /* ... */ })() Characteristics of IIFE:

Encapsulates complex logic within a function scope. Creates a local scope, preventing global variable pollution.

While IIFE provides a basic module, it lacks robust dependency management.

2. Module Pattern

The module pattern extends IIFE by returning an object that exposes selected members.

// Assign the encapsulated module to a variable
var helloApi = (function(){
  // Internal implementation
  function sayHello(){
    console.log('Hello');
  }
  // Expose API
  return { sayHello: sayHello };
})();

Usage: helloApi.sayHello(); // Hello These patterns laid the groundwork for later formal specifications and tools such as SeaJS, RequireJS, and others.

Modularization Specifications

Various specifications define how modules are written and loaded. Major ones include:

Asynchronous Module Definition (AMD) Common Module Definition (CMD) CommonJS Universal Module Definition (UMD) ES6 module format

1. AMD

AMD, popularized by RequireJS, defines modules with a dependency array and a factory function.

define(['./a', './b'], function(a, b){
  // Dependencies must be declared up front
  a.doSomething();
  // ... many lines omitted ...
  b.doSomething();
});

2. CMD

CMD, used by SeaJS, allows dependencies to be required inside the factory function.

define(function(require, exports, module){
  var a = require('./a');
  a.doSomething();
  var b = require('./b'); // Dependencies can be declared locally
  b.doSomething();
});

3. CommonJS

CommonJS is the de‑facto standard for Node.js modules, using require and module.exports.

var dep1 = require('./dep1');
var dep2 = require('./dep2');
module.exports = function(){
  // ...
};

4. UMD

UMD combines AMD, CommonJS, and global script patterns to work in both browsers and Node.js.

5. ES6 Modules

ES6 introduced native module syntax with import and export.

// hello.js
export function sayHello(){
  console.log('Hello');
}
// other.js
import { sayHello } from './hello';
sayHello(); // => Hello

Module Loaders

Loaders interpret and load module files at runtime, typically in the browser.

Load and execute the entry file (e.g., main.js or app.js). Dynamically load additional module files as needed.

Common loaders in China include RequireJS, SeaJS, and ModuleJS, which run in the browser during the web app’s execution phase.

Module Bundlers

Bundlers perform the same work as loaders but during the build phase, producing a single script for the browser.

Combine all dependencies into one file (e.g., app.js or build.js). The browser only needs to load this single bundled file.

Popular bundlers are Webpack and Browserify.

Summary

Module: Encapsulates a piece of functionality and exposes an API for other modules. Modularization Specification: Defines the syntax and semantics for writing modules. Module Loader: Executes in the browser to load and interpret modules. Module Bundler: Runs during the build process to package modules into a single file.