JavaScript导入和导出的代码示例

前端小工
215 阅读3分钟

在JavaScript ES6中，你可以从模块中导入和导出功能。这些功能可以是函数、类、组件、常量，基本上是任何你可以分配给JavaScript变量的东西。模块可以是单个文件或整个文件夹，以一个索引文件为入口。

JavaScript中的导入和导出语句帮助你在多个文件中共享代码。历史上，在JavaScript环境中已经有几种解决方案，但由于没有标准化的方法来执行这一任务，所以很混乱。JavaScript ES6最终将其作为一种原生行为加入了进来。

这些声明包含了代码拆分，我们将代码分布在多个文件中，以保持其可重用性和可维护性。前者是真的，因为我们可以将一段代码导入到多个文件中。后者是真实的，因为只有一个源，你在那里维护这段代码。

我们也要考虑到代码的封装，因为不是每一个功能都需要从文件中导出。有些功能只应该在文件中使用，因为它们已经被定义了。文件导出基本上是一个指向文件的公共API，其中只有导出的功能可以在其他地方重用。这遵循了封装的最佳实践。

下面的例子通过在两个文件中共享一个或多个变量，展示了这些语句。最后，这种方法可以扩展到多个文件，并可以共享超过简单的变量。

导出一个或多个变量的行为被称为命名导出：

const firstName = 'Robin';const lastName = 'Wieruch';
export { firstName, lastName };

并在另一个文件中导入它们，其相对路径为第一个文件：

import { firstName, lastName } from './file1.js';
console.log(firstName);// Robin

import * as person from './file1.js';
console.log(person.firstName);// Robin

导入可以有别名，当我们从具有相同命名导出的多个文件中导入功能时，这是必要的：

import { firstName as username } from './file1.js';
console.log(username);// Robin

还有一个默认声明，可以用于少数情况：

  • 导出和导入一个单一的功能
  • 强调一个模块导出的API的主要功能
  • 有一个后备的导入功能
const robin = {  firstName: 'Robin',  lastName: 'Wieruch',};
export default robin;

你必须去掉大括号来导入默认的导出功能：

import developer from './file1.js';
console.log(developer);// { firstName: 'Robin', lastName: 'Wieruch' }

导入名称可以与导出的默认名称不同，它可以与命名的导出和导入语句一起使用：

const firstName = 'Robin';const lastName = 'Wieruch';
const person = {  firstName,  lastName,};
export {  firstName,  lastName,};
export default person;

在另一个文件中导入默认的或命名的出口：

import developer, { firstName, lastName } from './file1.js';
console.log(developer);// { firstName: 'Robin', lastName: 'Wieruch' }
console.log(firstName, lastName);// Robin Wieruch

你可以省去多余的行，对于命名的导出，直接导出变量。

export const firstName = 'Robin';export const lastName = 'Wieruch';

这些是ES6模块的主要功能。它们帮助你组织你的代码，维护它，并设计可重复使用的模块API。你也可以通过导出和导入功能来测试它们，你将在后面的章节中进行测试。

avatar
文章
阅读
粉丝