全面理解ES6模塊化編程-有解無憂

今天我們來學習ES6的模塊化系統，如何從模塊中匯出變數、函式、類，在其他模塊中去使用，

在ES6的模塊系統中，每個JS檔案可以理解為一個模塊，模塊代碼以嚴格模式執行，所以模塊中的變數、函式不會添加全域作用域中，

在ES6之前，我們可能需要使用require.js來實作模塊化編程，在Node.js中使用commonjs規范來模塊化編程，JS并沒有一個統一的規范，所以在ES6推出了全新的模塊化方案，

在瀏覽器中運行

創建一個檔案 message.js

export let message = 'ES6 Modules';

message.js是ES6中的一個模塊，包含一個message變數，使用 export 陳述句將message變數暴露給其他模塊，

然后創建一個 app.js，在app.js中我們引入 message.js模塊，在app.js中，我們創建一個h1元素并插入到頁面中，

import 陳述句用來從 message.js 模塊匯入 message 變數，

import { message } from './message.js'

const h1 = document.createElement('h1');
h1.textContent = message

document.body.appendChild(h1)

最后，創建一個html檔案，引入 app.js

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ES6 Modules</title>
</head>

<body>
  <script type="module" src="./app.js"></script>
</body>

</html>

注意：這里我們需要在script標簽上加type="module"用來引入 app.js 模塊，運行成功如下

注意：需要起個本地服務器來打開頁面，不能直接使用本地打開檔案方式，

export 匯出

要從一個模塊中匯出一個變數、函式或者類，我們需要用到export關鍵字

// log.js
export let message = 'Hi';

export function getMessage() {
  return message;
}

export function setMessage(msg) {
  message = msg;
}

export class Logger {
}

在上面的例子中，我們創建了log.js這個模塊，里面有1個變數，兩個函式，1個類，然后我們使用export來匯出它們，

要注意的是，用export匯出的函式或者類需要有名稱，我們不能使用export匯出匿名函式或者類，

我們也可以先定義變數或者函式，然后在后面再將其匯出

// foo.js
function foo() {
   console.log('foo');
}

function bar() {
  console.log('bar');
}
export foo;

在上面例子中，我們首先定義了foo函式，然后在后面將其匯出，由于我們沒有匯出bar函式，所以在其他模塊中是無法訪問的，只能在當前模塊中使用，我們可以稱之為私有函式，

import 匯入

有了帶有匯出的模塊后，我們就可以使用import關鍵字去訪問另一個模塊中的變數、函式或者類

import { what, ever } from './other_module.js';

在花括號內指定要匯入的變數、函式或者類名稱，

注意：當我們匯入模塊時，就像是const定義變數一樣，引入后what和ever不允許再去更改，

舉個例子

// greeting.js
export let message = 'Hi';

export function setMessage(msg) {
  message = msg;
}

當我們引入message變數和setMessage()函式后，我們可以呼叫setMessage() 函式去改變模塊內message變數的值，

// app.js
import { message, setMessage } from './greeting.js';
console.log(message); // 'Hi'

setMessage('Hello');
console.log(message); // 'Hello'

但如果直接去修改message變數，就會報錯

message = 'Hallo'; // error

其實，當我們呼叫setMessage()函式時，JS會去到greeting.js模塊中去執行代碼并修改message變數，然后匯入的message變數也會隨著變化，

import 匯入多個變數/函式

在cal.js中匯出a、b、result變數和sum()、multiply()函式

// cal.js
export let a = 10,
           b = 20,
           result = 0;

export function sum() {
  result = a + b;
  return result;
}

export function multiply() {
  result = a * b;
  return result;
}

接著在app.js中去引入，使用它們

// app.js
import {a, b, result, sum, multiply } from './cal.js';
sum();
console.log(result); // 30

multiply();
console.log(result); // 200

import匯入整個模塊作為物件

沿用上面的例子，我們可以使用*號關鍵字，將模塊中的所有內容作為單個物件匯入

import * as cal from './cal.js';

然后可以使用cal物件去訪問匯出的變數和函式

cal.a;
cal.b;
cal.sum();

`import` / `export` 的限制

注意，import / export陳述句只能在代碼的最外層執行，不能在其他作用域內執行，下面的代碼會報語法錯誤

const a = 10
if(true) {
   export a;
}

同樣下面的import陳述句也會報語法錯誤

function importSum() {
   import { sum } from './cal.js';
}

產生錯誤的原因是，ES6的import / export只能通過靜態方式確定匯入或者匯出的內容，無法動態引入模塊，

但在ES2020中引入了import()函式，可以支持動態匯入模塊，

別名匯出 /匯入

下面我們將add()函式使用別名sum進行匯出，我們使用as關鍵字，在后面寫上要匯出的別名

// math.js  
function add( a, b ) {
   return a + b;
}

export { add as sum };

然后在引入模塊時，我們要使用引入add()時，我們要用sum去代替

import { sum } from './math.js';

如果在匯入時我們不想使用sum作為匯入，我們也可以使用as關鍵字去使用其他名稱

import {sum as total} from './math.js';

重新匯出

重新匯出匯入的模塊

import { sum } from './math.js';
export { sum };

下面這個語法等同于上面

export { sum } from './math.js';

我們也可以使用別名進行重新匯出

export { sum as add } from './math.js';

重新匯出所有，我們可以使用*號

export * from './cal.js';

有的同學可能不知道這重新匯出有什么作用，其實這作用還挺大的，比如我們寫了20個組件，我們不想寫20條import陳述句，只想寫1條import陳述句，那么我們就可以建一個中間檔案將這個20個組件引入，然后全部匯出，然后我們在用的時候就一條import陳述句就好了，可以參考ant design的組件庫的寫法，

// 參考：https://github.com/vueComponent/ant-design-vue/blob/next/components/index.ts

import * as components from './components';
import { default as version } from './version';
export * from './components';

匿名匯入

有時，我們會開發一個不需要指定名稱匯入的模塊，如果我們想給原生Array增加一個方法

// array.js
if (!Array.prototype.contain) {
  Array.prototype.contain = function(e) {
    // ...
  }
}

接著，我們直接去import該模塊，然后使用陣列的contain方法

import './array.js';
[1,2,3].contain(2); // true

默認匯出

一個模塊只能有一個默認匯出，一般來說默認匯出更容易被匯入，因為我們不需要再去看匯入的變數、函式或者類的名稱就可以匯入，一般來說一個模塊若只有一個匯出我們可以使用默認匯出，

下面的 sort.js模塊默認匯出一個函式

// sort.js
export default function(arr) {
  // 給陣列排序
}

使用sort.js模塊

import sort from './sort.js';
sort([2,1,3]);

引入的sort就相當于sort.js模塊中匯出的默認函式，

同樣，在有默認匯出的同時我們也可以匯出其他函式

// sort.js
export default function(arr) {
  // 給陣列排序
}
export function heapSort(arr) {
  // 堆排序
}

要從模塊中匯入默認匯出和非默認匯出我們要遵循下面的規則

首先，默認匯出要在最前面
其他非默認匯出，在后面用花括號匯入

比如這樣

import sort, { heapSort } from './sort.js';
sort([2,1,3]);
heapSort([3,1,2]);

如果要別名默認匯出，我們也可以使用as關鍵字，像這樣

import { default as quicksort, heapSort} from './sort.js';

總結

今天我們學習了JavaScript ES6模塊化編程的方方面面，如果有問題歡迎留言評論，我們明天見，

如果本文有幫助，微信搜索【小帥的編程筆記】，讓我們每天進步

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/308789.html

標籤：其他

上一篇：如果在API端點路由中傳遞@RequestParam，Istio虛擬服務會給出404的結果

下一篇：vue的ElemenUI的使用

全面理解ES6模塊化編程