学习如何使用 Js 导出和导入 - Javascript

在前端开发中，我们经常需要将分散在多个文件中的代码组织起来，这时候就需要用到模块化。Javascript ES6 中引入了模块化的概念，使得我们可以更加方便地组织我们的代码。

模块的导出

在 Javascript ES6 中，我们可以使用 export 关键字将某一个变量或函数导出，使其可以在其他地方使用。

导出单个变量或函数

// 导出单个变量或函数
export const name = 'jack';
export function sayHello() {
  console.log('Hello');
}

在上面的代码中，我们使用 export 关键字将变量 name 和函数 sayHello 导出，使得其他文件可以通过 import 来引入这些变量和函数。

导出默认值

除了可以导出具体的变量或函数之外，我们还可以使用 export default 来导出默认值，每个模块只能有一个默认导出。

// 导出默认值
const age = 18;
export default age;

在上面的代码中，我们使用 export default 将变量 age 导出为默认值，其他文件可以直接通过 import 引入默认值。

模块的导入

当我们需要使用其他文件中导出的变量或函数时，可以使用 import 关键字将它们引入我们的文件中。

引入单个变量或函数

// 引入单个变量或函数
import { name, sayHello } from './example';
console.log(name); // jack
sayHello(); // Hello

在上面的代码中，我们使用 import 引入了 ./example 文件中导出的变量 name 和函数 sayHello，并在文件中使用它们。

引入默认值

除了可以引入具体的变量或函数之外，我们还可以使用 import 引入默认值。

// 引入默认值
import age from './example';
console.log(age); // 18

在上面的代码中，我们使用 import 引入了 ./example 文件中导出的默认值，并在文件中使用它。

注意：当导出默认值时，我们不需要使用大括号 {} 来包含变量名或函数名。

结语

以上就是如何使用 Javascript 导出和导入的方法介绍，通过使用模块化的方法，我们可以更加方便地管理我们的代码。