Js中的导入导出类型

在Javascript中，我们经常会遇到需要从一个文件中引入变量或函数，或者将当前文件中的变量或函数导出给其他文件使用的情况。这里就来介绍一下Javascript中的导入导出类型。

CommonJS

CommonJS是一个Javascript模块化的标准，它定义了一种Module规范，用于在服务器端（Node.js）使用。在这种规范中，每个文件都是一个模块，模块内部的变量和函数默认是私有的，如果我们需要在其他文件中使用，需要使用module.exports和require来实现。

导出

在CommonJS中，我们可以使用module.exports来将模块中的函数、变量等导出到其他模块中。例如：

// math.js
function add(a, b) {
  return a + b;
}
module.exports = { add };

在上述代码中，我们将add函数通过module.exports导出，其他模块可以通过require来引入这个模块中的add函数。

导入

在CommonJS中，我们可以使用require来导入其他模块中导出的函数、变量等。例如：

// main.js
const { add } = require('./math.js');
console.log(add(1, 2)); // 3

在上述代码中，我们通过require来导入了math.js模块中导出的add函数，并在main.js中使用。

ES6

在ES6中，Javascript引入了新的模块化实现，我们可以使用import和export来实现对变量和函数的导入导出。这种方式也称为ES6 Module。

导出

在ES6中，我们可以使用export来将模块中的函数、变量等导出到其他模块中。例如：

// math.js
export function add(a, b) {
  return a + b;
}

在上述代码中，我们将add函数通过export导出，其他模块可以通过import来引入这个模块中的add函数。

我们也可以使用export default来导出一个默认的变量或函数。例如：

// math.js
export default function add(a, b) {
  return a + b;
}

在上述代码中，我们通过export default将add函数导出为默认导出，其他模块可以通过import来引入这个模块中的默认导出。

导入

在ES6中，我们可以使用import来导入其他模块中导出的函数、变量等。例如：

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

在上述代码中，我们通过import来导入了math.js模块中导出的add函数，并在main.js中使用。

如果我们要导入一个默认的变量或函数，可以使用import variableName from './module'的方式。例如：

// main.js
import add from './math.js';
console.log(add(1, 2)); // 3

在上述代码中，我们通过import来导入了math.js模块中导出的默认函数add，并在main.js中使用。

AMD

AMD（Asynchronous Module Definition）是另一种Javascript模块化的标准，主要用于在浏览器端使用。与CommonJS规范类似，每个模块也是一个单独的文件。

AMD的使用方式和CommonJS略有不同，需要用到模块加载器（比如RequireJS）来加载模块和其依赖的模块。在模块中，我们使用define来定义模块，使用require来依赖其他模块中的函数和变量。

导出

在AMD中，我们可以使用define来定义模块，例如：

// math.js
define(function() {
  function add(a, b) {
    return a + b;
  }
  return {
    add: add
  };
});

在上述代码中，我们使用define来定义模块，将add函数导出。

导入

在AMD中，我们可以使用require来加载模块和其依赖的模块，例如：

// main.js
require(['./math.js'], function(math) {
  console.log(math.add(1, 2)); // 3
});

在上述代码中，我们使用require来加载math.js模块，并使用回调函数来引用该模块中导出的add函数。

总结

以上就是Javascript中常见的三种导入导出类型，分别是CommonJS、ES6 Module和AMD。在开发中，我们根据具体场景和需要选择合适的方式进行导入导出，以提高代码的可读性和可维护性。