ES6 - 模块
简介
考虑需要重用部分 JavaScript 代码的场景。ES6 借助模块的概念来帮您解决问题。
模块组织一组相关的 JavaScript 代码。模块可以包含变量和函数。模块只不过是写在文件中的一段 JavaScript 代码。默认情况下，模块的变量和函数不可用。模块内的变量和函数应导出，以便可以从其他文件内访问它们。ES6 中的模块仅在严格模式下工作。这意味着模块中声明的变量或函数将无法全局访问。
导出模块
export 关键字可用于导出模块中的组件。模块中的导出可分为以下几类 −
- 命名导出
- 默认导出
命名导出
命名导出通过其名称进行区分。模块中可以有多个命名导出。模块可以使用下面给出的语法导出选定的组件 −
语法 1
//使用多个导出关键字 export component1 export component2 ... ... export componentN
语法 2
或者，模块中的组件也可以使用单个导出关键字和 {} 绑定语法导出，如下所示 −
//使用单个导出关键字
export {component1,component2,....,componentN}
默认导出
只需导出单个值的模块可以使用默认导出。每个模块只能有一个默认导出。
语法
export default component_name
但是，模块可以同时具有默认导出和多个命名导出。
导入模块
要使用模块，请使用 import 关键字。一个模块可以有多个 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 并添加以下代码 −
let company = "TutorialsPoint"
let getCompany = function(){
return company.toUpperCase()
}
let setCompany = function(newValue){
company = newValue
}
export {company,getCompany,setCompany}
步骤 2 − 创建文件 company2.js。此文件使用 company1.js 文件中定义的组件。使用以下任一方法导入模块。
方法 1
import {company,getCompany} from './company1.js'
console.log(company)
console.log(getCompany())
方法 2
import {company as x, getCompany as y} from './company1.js'
console.log(x)
console.log(y())
方法 3
import * as myCompany from './company1.js' console.log(myCompany.getCompany()) console.log(myCompany.company)
步骤 3 − 使用 HTML 文件执行模块
要执行这两个模块，我们需要创建一个如下所示的 html 文件并在实时服务器中运行它。请注意，我们应该在脚本标记中使用 attribute 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>
上述代码的输出将如下所示 −
TutorialsPoint TUTORIALSPOINT
默认导出
步骤 1 − 创建文件 company1.js 并添加以下代码 −
let name = 'TutorialsPoint'
let company = {
getName:function(){
return name
},
setName:function(newName){
name = newName
}
}
export default company
步骤 2 − 创建文件 company2.js。此文件使用 company1.js 文件中定义的组件。
import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())
步骤 3 − 使用 HTML 文件执行 模块
要执行这两个模块，我们需要创建一个如下所示的 html 文件并在实时服务器中运行它。请注意，我们应该在脚本标记中使用 attribute 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>
上述代码的输出将如下所示 −
TutorialsPoint Google Inc
示例:结合默认导出和命名导出
步骤 1 − 创建文件 company1.js 并添加以下代码 −
//named export
export let name = 'TutorialsPoint'
let company = {
getName:function(){
return name
},
setName:function(newName){
name =newName
}
}
//default export
export default company
步骤 2 − 创建文件 company2.js。此文件使用 company1.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>
上述代码的输出将如下所示 −
TutorialsPoint TutorialsPoint Mohtashim
