JavaScript模块详解

JavaScript模块是指一段封装了特定代码的独立功能单元，它们遵循一定的规则和标准，让开发者可以在项目中方便地引入和重复使用。其中，ES6中的模块支持是现在开发中最常用的模块方式。在本篇攻略中，我们将讲解如何使用JavaScript模块，包括如何定义、导出和引入模块，并提供两个模块示例。

定义模块

ES6中使用export关键字将指定的变量、函数、对象或类导出为一个模块，例如：

// export语句导出变量
export const name = 'John';

// export语句导出函数
export function sayHello() {
  console.log('Hello!');
}

// export语句导出对象（字面量）
export const person = {
  name: 'Tom',
  age: 20
};

// export语句导出类
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

导入模块

通过import关键字将其他模块导入到当前模块中，例如：

// 导入单个变量
import { name } from './example.js';

// 导入多个变量
import { name, age } from './example.js';

// 导入默认导出的值
import person from './example.js';

// 导入具名导出的值 as 重新命名
import { name as n } from './example.js';

// 导入所有内容
import * as example from './example.js';

当然，在导入模块时，可能会遇到模块路径问题、命名冲突问题，可以使用绝对路径和相对路径解决。下面提供两个具体示例。

示例1：导出和导入多个值

// 示例代码 fileA.js
export const a = 1;
export const b = 2;

// 示例代码 fileB.js
import { a, b } from './fileA.js';
console.log(a, b); // 输出 1, 2

在文件A中，导出了两个值a和b，在文件B中，使用import导入了两个值a和b，并在控制台中输出了它们的值。

示例2：导出和导入默认值

// 示例代码 fileC.js
export default function() {
  console.log('Hello, world!');
}

// 示例代码 fileD.js
import myFunc from './fileC.js';
myFunc(); // 输出 "Hello, world!"

在文件C中，将一个默认的函数导出为模块，然后在文件D中通过import导入该模块的默认值，并在控制台中输出了函数的返回值。

以上就是JavaScript模块的详细讲解，希望对你有所帮助。