了解 JavaScript 模块和导入/导出系统

// math.js (模块文件)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// math.js (模块文件)
export default function multiply(a, b) {
  return a * b;
}

// app.js (主文件)
import { add, subtract } from './math.js';

console.log(add(2, 3));  // 输出: 5
console.log(subtract(5, 3));  // 输出: 2

// app.js (主文件)
import multiply from './math.js';

console.log(multiply(2, 3));  // 输出: 6

// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

// app.js
import multiply, { add } from './math.js';

console.log(multiply(2, 3));  // 输出: 6
console.log(add(2, 3));  // 输出: 5

// person.js (模块文件)
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

// app.js (主文件)
import { Person } from './person.js';

const person1 = new Person('John', 30);
person1.greet();  // 输出: "Hello, my name is John."

// 按需动态导入模块
const modulePath = './math.js';

import(modulePath)
  .then(module => {
    console.log(module.add(2, 3));  // 输出: 5
  })
  .catch(err => {
    console.log('模块加载失败', err);
  });

<script type="module">
  import { add } from './math.js';
  console.log(add(2, 3));  // 输出: 5
</script>