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

列印頁面