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

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

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

1. export 基础使用

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

-- -------------------- ---- -------
-- ----
------ ----- ------------ - ----- -------

-- ----
------ -------- -------------- -
  -- ---
-

-- ---
------ ----- --------- -
  -- ---
-

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

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

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

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

2. export default 基础使用

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

-- -------------------- ---- -------
-- -----
------ ------- ----------

-- ------
------ ------- ---------- -
  -- ---
-

-- -----
------ ------- ----- -
  -- ---
-

在另一个文件中，可以直接使用 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 的组合的示例：

-- -------------------- ---- -------
-- ---------
----- -------- - --------

-------- -------------- -
  ------------------------- -----------
-

----- ------ -
  ----------------- -
    --------- - -----
  -

  ---------- -
    ------------------------- ----------------
  -
-

------ - --------- -------- --
------ ------- -------

-- --------
------ ------- - --------- -------- - ---- -----------

------------------ -- ------ ------
----- ------ - --- --------------
------------------ -- ------ ----
---------------------- -- -----

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

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

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