随着前端技术的不断发展，ES6/ES7 的新特性已经成为了前端开发中不可或缺的一部分。其中，import/export 语法是 ES6/ES7 中最重要的语法之一，它为我们提供了更加便捷、灵活的模块化开发方式。本文将详细介绍 ES7 中如何正确使用 import/export 语法，帮助读者更好地掌握这一重要的特性。
什么是 import/export 语法
在 ES6/ES7 中，我们可以使用 import/export 语法来进行模块化开发。简单来说，import/export 语法允许我们将一个模块中的变量、函数或类导出到其他模块中使用，或者从其他模块中导入变量、函数或类到当前模块中使用。这样，我们就可以将代码分成多个模块，使得代码更加可维护、可重用。
如何使用 import/export 语法
导出变量、函数或类
在一个模块中，我们可以使用 export 关键字将变量、函数或类导出，以便其他模块可以使用。例如：
-- -------------------- ---- -------
-- --------
------ ----- -- - -----
------ -------- ------ -- -
------ - - --
-
------ ----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-在上面的代码中，我们分别导出了一个常量 PI、一个函数 add 和一个类 Person。注意，每个导出的变量、函数或类都需要使用 export 关键字进行导出。
导入变量、函数或类
在另一个模块中，我们可以使用 import 关键字导入需要使用的变量、函数或类。例如：
-- -------------------- ---- ------- -- ------ ------ - --- ---- ------ - ---- ---------- ---------------- -- ---- ------------------ ---- -- - ----- --- - --- ------------- ---- --------------- -- ------ -- ---- -- ---- --- -- ----- ----
在上面的代码中，我们从 utils 模块中导入了常量 PI、函数 add 和类 Person，然后在 app 模块中使用这些变量、函数或类。
导出默认值
除了导出变量、函数或类之外，我们还可以使用 export default 语法导出默认值。例如：
-- -------------------- ---- ------- -- -------- ------ ------- ----------- -- - ------ - - -- - -- ------ ------ --- ---- ---------- ------------------ ---- -- -
在上面的代码中，我们将一个函数作为默认值导出，并使用 import add from './utils' 导入这个函数。注意，导出默认值时不需要使用花括号，而导入默认值时需要使用默认值的名称。
导入所有导出
如果一个模块中导出了多个变量、函数或类，我们也可以使用 import * as moduleName 语法导入所有导出。例如：
-- -------------------- ---- -------
-- --------
------ ----- -- - -----
------ -------- ------ -- -
------ - - --
-
------ ----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-
-- ------
------ - -- ----- ---- ----------
---------------------- -- ----
------------------------ ---- -- -
----- --- - --- ------------------- ----
--------------- -- ------ -- ---- -- ---- --- -- ----- ----在上面的代码中，我们使用 import * as utils from './utils' 导入了 utils 模块中的所有导出，然后使用 utils.PI、utils.add 和 utils.Person 进行访问。
总结
通过本文的介绍，我们学习了 ES7 中如何使用 import/export 语法进行模块化开发。我们了解了如何导出变量、函数或类，以及如何导入这些变量、函数或类。同时，我们还学习了如何导出默认值和如何导入所有导出。这些知识对于前端开发来说非常重要，能够帮助我们更加便捷、灵活地进行模块化开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dfcc8b1886fbafa4cf8746