ES6 exports與import導出模塊使用基礎示例

更新時間：2023年06月29日 09:54:50 作者：時傾

這篇文章主要為大家介紹了ES6 exports與import導出模塊使用基礎示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

在創(chuàng)建JavaScript模塊時，export 用于從模塊中導出實時綁定的函數(shù)、對象或原始值，以便其他程序可以通過 import使用它們。

被導出的綁定值依然可以在本地進行修改。

在使用import 進行導入時，這些綁定值只能被導入模塊所讀取，但在 export 導出模塊中對這些綁定值進行修改，所修改的值也會實時地更新。

exports

ES6模塊只支持靜態(tài)導出，只可以在模塊的最外層作用域使用export，不可在條件語句與函數(shù)作用域中使用。

Named exports (命名導出)

這種方式主要用于導出多個函數(shù)或者變量, 明確知道導出的變量名稱。

使用：只需要在變量或函數(shù)前面加 export 關鍵字即可。

使用場景：比如 utils、tools、common 之類的工具類函數(shù)集，或者全站統(tǒng)一變量等。

export 后面不可以是表達式，因為表達式只有值，沒有名字。

每個模塊包含任意數(shù)量的導出。

// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
// index.js 使用方式1
import { square, diag } from 'lib';
console.log(square(11)); // 121
// index.js 使用方式2
import * as lib from 'lib';
console.log(lib.square(11)); // 121

簡寫格式，統(tǒng)一列出需要輸出的變量，例如上面的lib.js可以改寫成：

// lib.js
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function add (x, y) {
    return x + y;
}
export { sqrt, square, add };

Default exports (默認導出)

這種方式主要用于導出類文件或一個功能比較單一的函數(shù)文件；
使用：只需要在變量或函數(shù)前面加 export default 關鍵字即可。

每個模塊最多只能有一個默認導出；

默認導出可以視為名字是default的模塊輸出變量；

默認導出后面可以是表達式，因為它只需要值。

導出一個值：

export default 123;

導出一個函數(shù)：

// myFunc.js
export default function () { ... };
// index.js
import myFunc from 'myFunc';
myFunc();

導出一個類：

// MyClass.js
class MyClass{
  constructor() {}
}
export default MyClass;
// 或者
export { MyClass as default, … };
// index.js
import MyClass from 'MyClass';

export default 與 export 的區(qū)別：

不需要知道導出的具體變量名；
導入【import】時不需要 { } 包裹；

Combinations exports (混合導出)

混合導出是 Named exports 和 Default exports 組合導出。

混合導出后，默認導入一定放在命名導入前面；

// lib.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {
  ...
}
export function* myGeneratorFunc() {
  ...
}
export default class MyClass {
  ...
}
// index.js
import MyClass, { myValue, myFunc } from 'lib';

Re-exporting (別名導出)

一般情況下，export 導出的變量名是原文件中的變量名，但也可以用 as 關鍵字來指定別名。這樣做是為了簡化或者語義化 export 的函數(shù)名。

同一個變量允許使用不同名字輸出多次

// lib.js
function getName() {
   ...
};
function setName() {
  ...
};
export {
  getName as get,
  getName as getUserName,
  setName as set
}

Module Redirects (中轉模塊導出)

為了方便使用模塊導入，在一個父模塊中“導入-導出”不同模塊。簡單來說：創(chuàng)建單個模塊，集中多個模塊的多個導出。
使用：使用 export from 語法實現(xiàn);

export * from 'lib'; // 沒有設置 export default
export * as myFunc2 from 'myFunc'; // 【ES2021】沒有設置 export default

export { default as function1, function2 } from 'bar.js';

上述例子聯(lián)合使用導入和導出：

import { default as function1, function2 } from 'bar.js';
export { function1, function2 };

盡管此時 export 與 import 等效，但以下語法在語法上無效：

import DefaultExport from 'bar.js'; // 有效的
export DefaultExport from 'bar.js'; // 無效的

正確的做法是重命名這個導出：

export { default as DefaultExport } from 'bar.js';

Importing

// Named imports
import { foo, bar as b } from './some-module.mjs';
// Namespace import
import * as someModule from './some-module.mjs';
// Default import
import someModule from './some-module.mjs';
// Combinations:
import someModule, * as someModule from './some-module.mjs';
import someModule, { foo, bar as b } from './some-module.mjs';
// Empty import (for modules with side effects)
import './some-module.mjs';

以上就是ES6 exports與import導出模塊使用基礎示例的詳細內容，更多關于ES6 exports import使用的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: