ES6 模块
考虑需要重用部分 JavaScript 代码的场景。 ES6 以模块的概念来拯救你。
一个模块组织了一组相关的 JavaScript 代码。 模块可以包含变量和函数。 模块只不过是写在文件中的一大块 JavaScript 代码。 默认情况下,模块的变量和函数不可用。 应该导出模块中的变量和函数,以便可以从其他文件中访问它们。 ES6 中的模块只能在严格模式下工作。 这意味着模块中声明的变量或函数将无法全局访问。
导出模块
export 关键字可用于导出模块中的组件。 模块中的出口可分类如下 -
- 命名导出
- 默认导出
命名导出
命名导出通过它们的名称来区分。 一个模块中可以有多个命名导出。 模块可以使用下面给出的语法导出选定的组件
// 使用多个 export 关键字
export component1
export component2
...
...
export componentN
或者,模块中的组件也可以使用带有 {}
绑定语法的单个导出关键字导出,如下所示 -
// 使用单个 export 关键字
export {component1,component2,....,componentN}
默认导出
只需要导出单个值的模块可以使用默认导出。 每个模块只能有一个默认导出。
export default component_name
但是,一个模块可以同时有一个默认导出和多个命名导出。
导入模块
为了能够使用模块,请使用 import 关键字。 一个模块可以有多个导入语句。
导入命名导出
在导入命名导出时,相应组件的名称必须匹配。
import {component1,component2..componentN} from module_name
但是,在导入命名导出时,可以使用 as
关键字重命名它们。 使用下面给出的语法
import {original_component_name as new_component_name }
所有命名导出都可以使用星号 *
运算符导入到对象中。
import * as variable_name from module_name
导入默认导出
与命名导出不同,默认导出可以使用任何名称导入。
import any_variable_name from module_name
示例
第 1 步 - 创建文件 company1.js 并添加以下代码
company1.js
let company = "Jiyik" let getCompany = function(){ return company.toUpperCase() } let setCompany = function(newValue){ company = newValue } export {company,getCompany,setCompany}
第 2 步 - 创建文件 company2.js。 此文件使用 company1.js 文件中定义的组件。 使用以下任何一种方法导入模块。
方法一
company2.js
import {company,getCompany} from './company1.js' console.log(company) console.log(getCompany())
方法二
company2.js
import {company as x, getCompany as y} from './company1.js' console.log(x) console.log(y())
方法三
company2.js
import * as myCompany from './company1.js' console.log(myCompany.getCompany()) console.log(myCompany.company)
第 3 步 - 使用 HTML 文件执行模块
要执行这两个模块,我们需要制作一个如下所示的 html 文件,并在实时服务器中运行它。 请注意,我们应该在脚本标签中使用属性 type="module"
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./company2.js" type="module"></script>
</body>
</html>
上述代码的输出如下所示
Jiyik
JIYIK
默认导出
第 1 步 - 创建文件 company1.js 并添加以下代码
company1.js
let name = 'Jiyik' let company = { getName:function(){ return name }, setName:function(newName){ name = newName } } export default company
第 2 步 - 创建文件 company2.js。 此文件使用 company1.js 文件中定义的组件。
company2.js
import c from './company1.js' console.log(c.getName()) c.setName('Google Inc') console.log(c.getName())
第 3 步 - 使用 HTML 文件执行模块
要执行这两个模块,我们需要制作一个如下所示的 html 文件并在实时服务器中运行它。 请注意,我们应该在脚本标签中使用属性 type="module"
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./company2.js" type="module"></script>
</body>
</html>
上面代码的输出将如下所述
Jiyik
Google Inc
合并默认导出和命名导出
第 1 步 - 创建文件 company1.js 并添加以下代码
company1.js
//named export export let name = 'Jiyik' let company = { getName:function(){ return name }, setName:function(newName){ name =newName } } //default export export default company
第 2 步 - 创建文件 company2.js。 此文件使用 company1.js 文件中定义的组件。 首先导入默认导出,然后导入命名导出。
company2.js
import c, {name} from './company1.js' console.log(name) console.log(c.getName()) c.setName("Mohtashim") console.log(c.getName())
第 3 步 - 使用 HTML 文件执行模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="company2.js" type="module"></script>
</body>
</html>
上面代码的输出将如下所示
Jiyik
Jiyik
Mohtashim