Frontend Modularization Evolution and Core Principles

1. Background and Problems of Modularization

Early JavaScript lacked modularization standards. Developers typically isolated scopes using global variables or Immediately Invoked Function Expressions (IIFE), leading to the following issues:

1. Global Pollution: Variable conflicts across multiple scripts;
2. Dependency Chaos: Manual management of script loading order with unclear dependencies;
3. Poor Maintainability: Dispersed code and low reusability.

2. Stages of Modularization Evolution

2.1 Early Solutions: IIFE and Namespaces

// IIFE for scope isolation  
var module = (function() {  
  var privateVar = 1;  
  return { publicMethod: function() { /* ... */ } };  
})();  

// Namespace (e.g., YUI library)  
YUI.add('module', function(Y) {  
  Y.doSomething();  
}, '1.0.0', { requires: ['dependency'] });  

Disadvantages: Dependencies require manual management, no on-demand loading.

2.2 CommonJS: Server-Side Modularization

• Representative: Node.js require/module.exports.
• Characteristics: Synchronous loading, module results are cached after the first load.

// math.js  
exports.add = (a, b) => a + b;  
// or  
module.exports = { add: (a, b) => a + b };  

// main.js  
const math = require('./math');  
math.add(1, 2);  

Limitation: Synchronous loading is unsuitable for browser environments (network requests are asynchronous).

2.3 AMD: Asynchronous Loading for Browsers

• Representative: RequireJS, defines modules via define, loads asynchronously via require.

// Define module  
define(['dep1', 'dep2'], function(dep1, dep2) {  
  return { method: () => dep1.action() };  
});  

// Load module  
require(['module'], function(module) {  
  module.method();  
});  

Advantage: Dependencies are declared upfront, suitable for browsers; Disadvantage: Complex code, does not align with development habits.

2.4 CMD: Improved On-Demand Loading

• Representative: Sea.js, advocates "dependencies as needed".

define(function(require, exports, module) {  
  var dep1 = require('./dep1');  // Dependency declared when needed  
  exports.method = () => dep1.action();  
});  

Difference from AMD: AMD executes dependencies early, CMD executes them lazily.

2.5 UMD: Universal Module Definition

• Compatible with CommonJS, AMD, and global variables, automatically selects the appropriate scheme based on the current environment.

(function(root, factory) {  
  if (typeof define === 'function' && define.amd) {  
    define(['dep'], factory);  // AMD  
  } else if (typeof exports === 'object') {  
    module.exports = factory(require('dep'));  // CommonJS  
  } else {  
    root.module = factory(root.dep);  // Global variable  
  }  
})(this, function(dep) { return { /* ... */ }; });  

2.6 ES6 Modules: Official Standard

• Static import/export via import/export syntax, supports Tree Shaking.

// math.js  
export const add = (a, b) => a + b;  
export default { version: '1.0' };  

// main.js  
import { add } from './math.js';  
add(1, 2);  

Characteristics:

• Static analysis: Dependencies are determined at compile time;
• Circular references: Handled dynamically via live bindings;
• Requires loading with <script type="module"> in browsers.

3. Core Principles of Modularization

3.1 Implementation Approach of Module Loaders

Simulating AMD as an example:

const modules = {};  
function define(name, deps, factory) {  
  modules[name] = {  
    deps: deps.map(dep => modules[dep]),  
    factory: factory  
  };  
}  
function require(name) {  
  const module = modules[name];  
  if (!module.exports) {  
    // Execute factory function, injecting dependencies  
    module.exports = module.factory(...module.deps.map(dep => dep.exports));  
  }  
  return module.exports;  
}  

3.2 Modern Implementation of ES Modules

• Browsers create a read-only Module Environment Record for each module, where export bindings are live references (not copies).
• Example of circular reference:

// a.js  
import { b } from './b.js';  
export const a = 'a';  
console.log(b);  // Outputs 'b'  

// b.js  
import { a } from './a.js';  
export const b = 'b';  
console.log(a);  // Outputs undefined (because a is not fully initialized yet)  

4. Toolchain Support

1. Bundling Tools: Webpack, Rollup convert various module specifications into browser-executable code;
2. Tree Shaking: Eliminates dead code based on the static structure of ES Modules;
3. Dynamic Import: Implements code splitting via import().

5. Conclusion

Modularization evolved from "manual management" to "standardized specifications", culminating in the official ES Modules solution. Core problems solved:

• Scope Isolation (avoiding pollution);
• Dependency Management (clear declaration and loading);
• Engineering Support (static analysis, optimization).