【JS 模块化导入导出import与export】

模块化是什么

JavaScript 模块化是一种编程方式，允许将程序拆分成独立、可维护、可复用的模块。模块化的主要目的是简化代码，提高代码的可读性和可维护性。
在 JavaScript 中，我们可以使用 import 和 export 语句来导入和导出模块。

导出模块

使用 export 语句可以将模块中的变量、函数、类或对象导出到其他模块中使用。

导出变量

可以通过以下方式导出变量：

// 模块a.js
export const name = 'John';
export let age = 30;
export var gender = 'male';

以上代码中，我们通过 export 关键字将三个变量导出。也可以使用对象的方式导出变量：

// 模块a.js
const name = 'John';
let age = 30;
var gender = 'male';

export { name, age, gender };

导出函数

可以通过以下方式导出函数：

// 模块b.js
export function add(x, y) {
  return x + y;
}

export const subtract = (x, y) => {
  return x - y;
};

以上代码中，我们通过 export 关键字将两个函数导出。

导出类

可以通过以下方式导出类：

// 模块c.js
export class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

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

以上代码中，我们通过 export 关键字将 Person 类导出。

导出对象

可以通过以下方式导出对象：

// 模块d.js
const obj = {
  name: 'John',
  age: 30,
  gender: 'male'
};

export { obj };

以上代码中，我们通过 export 关键字将 obj 对象导出。

导入模块

使用 import 语句可以导入其他模块中导出的变量、函数、类或对象。

导入变量

我们可以通过以下方式导入变量：

// 模块e.js
import { name, age, gender } from './a.js';

console.log(name);    // 'John'
console.log(age);     // 30
console.log(gender);  // 'male'

以上代码中，我们使用 import 语句从模块 a.js 导入了三个变量 name、age 和 gender。

如果导出的变量是一个对象，我们可以使用以下方式导入：

// 模块f.js
import { obj } from './d.js';

console.log(obj.name);    // 'John'
console.log(obj.age);     // 30
console.log(obj.gender);  // 'male'

以上代码中，我们使用 import 语句从模块 d.js 导入了一个对象 obj。

导入函数和类

我们可以通过以下方式导入函数和类：

// 模块g.js
import { add, subtract } from './b.js';
import { Person } from './c.js';

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

const john = new Person('John', 30, 'male');
john.sayHello();  // 'Hello, my name is John'

以上代码中，我们使用 import 语句从模块 b.js 和 c.js 导入了两个函数 add 和 subtract，以及一个 Person 类。

如果导出的模块只有一个默认导出，我们可以使用以下方式导入：

// 模块h.js
import Calculator from './calculator.js';

const calc = new Calculator();
console.log(calc.add(2, 3));  // 5
console.log(calc.subtract(5, 2));  // 3

以上代码中，我们使用 import 语句从模块 calculator.js 导入了一个默认导出，即 Calculator 类。注意，使用默认导出时，可以使用任何名称进行导入。在这个例子中，我们将导入的类命名为 Calculator。

其他方式导入

全部导入 * as

* as 是一种导入语法，用于从模块中导入所有导出项并将它们作为一个对象绑定到一个名字空间上。例如，假设我们有一个模块 utils.js 导出了三个函数 foo、bar 和 baz：

export function foo() {
  console.log('foo')
}

export function bar() {
  console.log('bar')
}

export function baz() {
  console.log('baz')
}

我们可以使用 * as 语法将它们导入到另一个模块中：

import * as utils from './utils.js'

utils.foo() // logs 'foo'
utils.bar() // logs 'bar'
utils.baz() // logs 'baz'

这样做可以避免冲突和命名空间污染，因为所有导入的项都存储在一个对象中，并且我们可以使用该对象来访问它们。

动态导入 import()

import()是ES6中新增的语法，用于动态导入模块。相比于静态导入，动态导入具有更好的灵活性和更好的性能。

使用import()可以动态加载模块，也可以根据需要选择加载的模块，比如根据用户的操作来加载不同的模块，从而提高应用程序的性能和响应性。

具体使用方法如下：

import('/path/to/module')
  .then(module => {
    // 使用 module
  })
  .catch(error => {
    // 处理错误
  });

import()方法返回一个Promise对象，当模块加载完成后，resolve()会返回该模块的默认导出。因此，我们可以像静态导入一样使用导出的模块。

动态导入也支持使用async/await语法：

async function loadModule() {
  try {
    const module = await import('/path/to/module');
    // 使用 module
  } catch (error) {
    // 处理错误
  }
}

需要注意的是，动态导入只能在模块的顶层使用，不能在函数内部使用。

另外，因为动态导入是异步的，所以只能在浏览器端使用。在Node.js中，可以使用require()来动态加载模块。