ES11 的 export 和 export default 基础使用教学

ES11 的 export 和 export default 基础使用教学

前端开发中，经常需要在不同的文件中共享变量、函数、类等，而 ES6 引入了 export 与 import 机制来解决这个问题。在 ES11 中，export 与 export default 功能得到了加强，本文将介绍它们的基础使用教学。

1. export 基础使用

export 只能在文件顶部使用，用于导出变量、函数或类。其基本语法如下：

// www.javascriptcn.com code example
// 导出变量
export const someVariable = 'some value';

// 导出函数
export function someFunction() {
  // ...
}

// 导出类
export class SomeClass {
  // ...
}

在另一个文件中，可以使用 import 来引入这些导出的变量、函数或类。例如：

import { someVariable, someFunction, SomeClass } from './文件路径';

也可以使用 * 通配符导入：

import * as myModule from './文件路径';
console.log(myModule.someVariable);

2. export default 基础使用

export default 也是用于导出变量、函数或类，但它只能导出一个默认的值。它的基本语法如下：

// www.javascriptcn.com code example
// 导出默认值
export default someValue;

// 导出默认函数
export default function() {
  // ...
}

// 导出默认类
export default class {
  // ...
}

在另一个文件中，可以直接使用 import 引入默认导出的值。例如：

import someValue from './文件路径';

3. export 和 export default 的混合使用

export 和 export default 可以混合使用，但是每个模块只能有一个默认导出。

// 导出默认值和命名导出
const someValue = 'a value';
export default someValue;

export const anotherValue = 'another value';

在另一个文件中，可以用下面的方式分别引入默认值和命名导出：

import theValue, { anotherValue } from './文件路径';
console.log(theValue);
console.log(anotherValue);

4. 学习和指导意义

使用 export 和 export default 可以让我们更好地组织代码，使之更加易读易用。同时，使用它们也有助于开发团队之间更好地协作和共享代码。在实际开发中，我们需要灵活运用 export 和 export default，把握好它们的使用时机，可以提升代码质量和可维护性。

以下是一个使用 export 和 export default 的组合的示例：

// www.javascriptcn.com code example
// module.js
const greeting = 'Hello';

function sayHello(name) {
  console.log(`${greeting}, ${name}!`);
}

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`${greeting}, ${this.name}!`);
  }
}

export { greeting, sayHello };
export default Person;

// index.js
import Person, { greeting, sayHello } from './module';

sayHello('Jerry'); // Hello, Jerry!
const person = new Person('Tom');
person.sayHello(); // Hello, Tom!
console.log(greeting); // Hello

以上代码中，我们以 export 和 export default 的组合的形式导出了变量、函数和类。在 index.js 文件中，我们可以使用 import 分别导入它们。

希望本文能够帮助大家更好地理解 ES11 的 export 和 export default，提升代码质量和可维护性。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/678230f4935627c900fbf626