在 ECMA2015 中使用 import 和 export 实现前端模块化-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，JavaScript 作为一种脚本语言，逐渐被广泛应用。但是，JS 的全局作用域、变量污染以及文件之间的依赖关系等问题却也日益显露。为了解决这些问题，前端模块化的应运而生。

前端模块化是指在前端开发中，将较为独立的代码块进行封装，并通过特定的方式在不同的文件之间进行调用与引用。

模块化可以带来以下好处：

ECMA2015 是 ECMAScript 的一个新版本，其中新增了对模块化的支持。一个模块可以是任何 JS 文件，它可以包含任何 JS 代码。

使用 ECMA2015 中的 import 和 export 关键字，可以在 ES6 中实现模块化。

在一个模块中，我们可以将任何一个 JS 对象或函数导出，以使其它模块可以使用它。导出需要使用 export 关键字。

例如，如果我们想要导出一个名为 add 的函数，可以在对应的 JS 文件中这样写：

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

导出 add 函数之后，我们可以通过使用 import 关键字，从另一个模块中使用它。

使用 import 关键字，我们可以从另一个模块中导入导出的对象或函数。例如，如果我们想要在其他模块中使用 add 函数，则可以这样写：

// index.js
import {add} from './add.js';

console.log(add(1,2)); // 输出 3

在这个文件中，我们使用 import 语句来导入一个名为 add 的函数，这个函数是从 add.js 模块中导出的。然后，我们可以使用 add 函数完成任何需要的操作。

在 import 中，我们一般使用相对路径来引入其他的模块。使用 / 或 .. 表示绝对路径或上层目录。

除了导出对象或函数，通常我们还会导出一个默认的值。在一个模块中，我们可以通过 export default 来导出一个默认对象或函数。

例如，我们可以将上面的 add 函数编写为默认导出方式：

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

使用默认导出时，我们不需要在 {} 中指定导入的对象名称，这时我们可以指定任何对象名称。

例如：

// index.js
import add from './add.js';

console.log(add(1,2)); // 输出 3

在这个例子中，我们通过 import add from './add.js' 导入了默认导出的函数。

ECMA2015 中的模块化支持使得前端的组织和管理更加容易。这些模块可以带来更高的代码复用性和更好的代码维护性，因为模块之间的依赖关系更加清晰。同时，模块化还带来了命名空间和更好的代码隔离性，避免了命名冲突和污染。

在实际开发中要注意正确使用 export 和 import 进行模块导入和导出，避免出现错误。

// add.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// index.js
import { add, multiply } from "./add.js";

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

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

// index.js
import add from "./add.js";

console.log(add(1, 2)); // 输出 3

// add.js
export const add = (a, b) => a + b;
export default (a, b) => a * b;

// index.js
import add, { multiply } from "./add.js";

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

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64cdf961b5eee0b5255ed7a2