前言
ES6（ECMAScript 2015）标准中引入了模块化的概念，这给前端开发带来了很大的便利。模块化可以使代码更加清晰、可维护性更高、重用性更好，而且还可以提高代码的性能。本文将详细介绍 ES6 中模块的导出和导入，希望对大家有所帮助。
导出
在 ES6 中，我们可以使用 export 关键字来导出模块中的变量、函数、类等。导出的方式有两种：默认导出和命名导出。
默认导出
默认导出是指一个模块只导出一个值，这个值可以是任何类型的值，比如变量、函数、类等。默认导出使用 export default 语法。
导出变量
-- --------- ------ ------- ------ -------- -- -------- ------ ------- ---- -- ------ ------ ------- - ----- ------ ---- -- --
导出函数
-- ------ ------ ------- -------- ---------- - ---------------------- - -- -------- ------ ------- -- -- ----------------------
导出类
-- -----
------ ------- ----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-命名导出
命名导出是指一个模块可以导出多个值，每个值都有一个名称，导出的方式使用 export 语法。
导出变量
-- --------- ------ ----- --- - ------ -------- -- -------- ------ ----- --- - ---- -- ------ ------ ----- --- - - ----- ------ ---- -- --
导出函数
-- ------ ------ -------- ---------- - ---------------------- - -- -------- ------ ----- ----- - -- -- -------------------
导出类
-- -----
------ ----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-导入
在 ES6 中，我们可以使用 import 关键字来导入其他模块中导出的变量、函数、类等。导入的方式也有两种：默认导入和命名导入。
默认导入
默认导入是指导入一个模块中默认导出的值。默认导入使用 import xxx from 'module' 语法。
导入变量
-- --------- ------ --- ---- ----------- -- -------- ------ --- ---- ----------- -- ------ ------ --- ---- -----------
导入函数
-- ------ ------ -------- ---- ----------- -- -------- ------ ----- ---- -----------
导入类
-- ----- ------ ------ ---- -----------
命名导入
命名导入是指导入一个模块中命名导出的值。命名导入使用 import { xxx, yyy } from 'module' 语法。
导入变量
-- --------- ------ - --- - ---- ----------- -- -------- ------ - --- - ---- ----------- -- ------ ------ - --- - ---- -----------
导入函数
-- ------ ------ - -------- - ---- ----------- -- -------- ------ - ----- - ---- -----------
导入类
-- ----- ------ - ------ - ---- -----------
总结
ES6 中模块的导出和导入是前端开发中非常重要的一部分，掌握好这部分内容可以使我们的代码更加清晰、可维护性更高、重用性更好。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657a5f57d2f5e1655d4a9b9b