在前端开发中,模块化是一个非常重要的概念。ES6 中新增了模块化的语法,使得前端开发更加规范化和模块化。本文将详细介绍 ES6 中的模块导出和导入。
模块导出
在 ES6 中,使用 export
关键字可以将一个变量、函数或类导出为一个模块。导出的方式有两种:默认导出和命名导出。
默认导出
默认导出使用 export default
关键字,只能导出一个默认值。默认导出不需要使用花括号 {}
包裹,而是直接使用名称引用。
示例代码:
-- --------- ----- ------ - - ----- ----- ---- --- ------- --- -- ------ ------- -------
-- ------- ------ ------ ---- -------------- ------------------------- -- -----
命名导出
命名导出使用 export
关键字,可以导出多个值。需要使用花括号 {}
包裹,使用名称引用。
示例代码:
-- ------- ------ ----- --- - --- -- -- - - -- ------ ----- -------- - --- -- -- - - --
-- ------- ------ - ---- -------- - ---- ------------ ------------------ ---- -- ---- ----------------------- ---- -- ----
模块导入
在 ES6 中,使用 import
关键字可以导入一个模块。导入的方式和导出的方式一样,有默认导入和命名导入两种方式。
默认导入
默认导入使用 import
关键字,直接导入默认导出的值。导入的名称可以自定义。
示例代码:
-- --------- ----- ------ - - ----- ----- ---- --- ------- --- -- ------ ------- -------
-- ------- ------ -------- ---- -------------- --------------------------- -- -----
命名导入
命名导入使用 import
关键字,使用花括号 {}
指定导入的值的名称。导入的名称必须和导出的名称一致。
示例代码:
-- ------- ------ ----- --- - --- -- -- - - -- ------ ----- -------- - --- -- -- - - --
-- ------- ------ - ---- -------- - ---- ------------ ------------------ ---- -- ---- ----------------------- ---- -- ----
总结
ES6 中的模块导出和导入非常方便,使得前端开发更加规范化和模块化。使用默认导出和命名导出可以导出多个值,使用默认导入和命名导入可以导入多个值。使用模块化的方式开发可以使得代码更加清晰、易于维护。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6582f3a4d2f5e1655ddff377