详解JavaScript模块化使文章更清晰的全过程

<script>
  // 所有代码混在一个文件，全局变量污染严重
</script>

// math.js
function add(a, b) {
  return a + b;
}
module.exports = { add };
 
// main.js
const math = require('./math');
console.log(math.add(2, 3)); // 5

define(['math'], function (math) {
  console.log(math.add(2, 3));
});

// math.js
export function add(a, b) {
  return a + b;
}
 
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

// math.js
export const PI = 3.14;
export function square(x) { return x * x; }
 
// 使用
import { PI, square } from './math.js';

// logger.js
export default function log(msg) {
  console.log(msg);
}
 
// 使用
import log from './logger.js';

import * as utils from './math.js';
console.log(utils.square(4));

/calculator.js    ← 数学计算模块
/logger.js        ← 日志模块
/main.js          ← 主程序模块

// calculator.js
export function add(a, b) {
  return a + b;
}
 
export function subtract(a, b) {
  return a - b;
}
 
export function multiply(a, b) {
  return a * b;
}
 
export function divide(a, b) {
  return b !== 0 ? a / b : 'Cannot divide by zero';
}

// logger.js
export default function log(message) {
  console.log(`[Log] ${message}`);
}

// main.js
import * as calc from './calculator.js';
import log from './logger.js';
 
const result = calc.multiply(4, 5);
log(`4 x 5 = ${result}`);
 
const result2 = calc.divide(10, 2);
log(`10 ÷ 2 = ${result2}`);

// calculator.js
export function add(a, b) { ... }
export function subtract(a, b) { ... }
export function multiply(a, b) { ... }
export function divide(a, b) { ... }

// logger.js
export default function log(message) {
  console.log(`[Log] ${message}`);
}

import * as calc from './calculator.js';
import log from './logger.js';
 
const result = calc.multiply(4, 5);
log(`4 x 5 = ${result}`);