ES7 中的 export 命令
在前端开发中，组织和管理代码非常重要。在引入模块概念后，利用模块的方式将代码组织分离成可复用模块，使前端代码得以模块化，减少重复开发的工作，提高项目的复用性和可维护性。而在 ES7 中，export 命令作为模块的组成部分之一，起到了非常重要的作用。
ES7 中的 export 命令可以用于从模块中导出对外的变量、函数和类等，使得外部可以通过 import 命令引用到这些变量、函数和类。而且 ES7 中的 export 命令与 ES6 中的 export 命令不同的是，ES7 中不再需要通过变量赋值进行导出了，而是直接使用 export 关键字进行导出，极大地简化了操作。
在 ES7 中，共有两种导出方式：默认导出和命名导出。
默认导出
默认导出只能导出一个变量、函数或者对象等，并且在导入时不需要定义相同的变量名，可以自己命名。
-- ------ ------ ------- -------- ------ -- - ------ - - -- - -- ------- ------ --- ---- ----------- ------------------ ---- -- -
在上述示例代码中，app.js 导出了一个 sum 函数，而在 main.js 文件中，通过 import 命令并指定变量名称 add，已经成功获取了导出的 sum 函数，在控制台中打印出了函数的返回值。
需要注意的是，在一个模块内只能有一个默认导出，而且默认导出可以是任何 JavaScript 的值，也可以是对象甚至是 svg 图标等等。
命名导出
命名导出可以导出多个变量、函数和类等，同时在导入时需要使用相同的变量名进行导入，而且可以使用花括号表示需要导入的变量名称。
-- ------
------ ----- ---- - -----
------ --- --- - ---
------ -------- ---------- -
------------------ --------
-
------ ----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------ ------ ------------- ---- -------------
-
-
-- -------
------ - ----- ---- --------- ------ - ---- -----------
------------------ -- --
----------------- -- --
----------- -- ----- -----
----- ------ - --- ------------ ----
------------------------------- -- ----- --- ---- --在上述示例代码中，app.js 文件通过 export 命令将 name 变量、age 变量、sayHello 函数和 Person 类导出。在 main.js 文件中，通过 import 命令与相应的变量名进行导入，成功拿到了导出的变量、函数和类等，并且正确使用。
需要注意的是，如果在一个模块中同时使用了默认导出和命名导出，那么在导入时，可以使用 import 命令同时导入命名导出和默认导出，例如：
------ ------- - ------ - ---- -----------
总结
ES7 中的 export 命令可以将变量、函数和类等以默认导出或命名导出的方式进行导出，使得在其他模块中可以方便地调用这些变量、函数和类等。而且，export 命令的使用相对于 ES6 又更加简单优雅。因此，在实际开发中，建议使用 ES7 中的 export 命令进行模块导出，提高代码的复用性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64cf4452b5eee0b5256a6243