ES6 - 模块

介绍

考虑这样一种情况：需要重用 JavaScript 代码的某些部分。ES6 通过模块的概念来解决这个问题。

模块组织了一组相关的 JavaScript 代码。模块可以包含变量和函数。模块只不过是用文件编写的 JavaScript 代码块。默认情况下，模块的变量和函数不可用。模块内的变量和函数应该导出，以便可以从其他文件中访问它们。ES6 中的模块仅在严格模式下工作。这意味着在模块中声明的变量或函数将无法全局访问。

导出模块

可以使用 `export` 关键字导出模块中的组件。模块中的导出可以分类如下：

命名导出
默认导出

命名导出

命名导出由它们的名称区分。一个模块中可以有多个命名导出。模块可以使用以下语法导出选定的组件：

语法 1

//using multiple export keyword
export component1
export component2
...
...
export componentN

语法 2

或者，模块中的组件也可以使用单个 `export` 关键字和 `{}` 绑定语法导出，如下所示：

//using single export keyword

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 文件，并在实时服务器上运行它。请注意，我们应该在 script 标签中使用`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 文件，并在实时服务器上运行它。请注意，我们应该在 script 标签中使用`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

打印页面