javascript中export的意思是什麼

在JavaScript中，export的意思是「匯出」；JavaScript中模組內的所有宣告都是原生的，利用export關鍵字可以匯出模組，該命令可以出現在模組的任何位置，匯出模組後其他JS檔案就可以通過import命令載入該模組。

本教學操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

javascript中export的意思是什麼

預設情況下，JavaScript中在模組內的所有宣告都是原生的，外部無法存取。如果需要公開模組中部分宣告的內容，並讓其它模組加以使用，這個時候就需要匯出功能，最簡單的方式是新增export關鍵字彙出模組。

可以匯出的內容包括類、函數以及var、let和const修飾的變數。export命令可以出現在模組的任何位置，只要處於模組頂層就可以。如果處於塊級作用域內，就會報錯，import命令也是如此。

使用export命令定義了模組的對外介面以後，其他 JS 檔案就可以通過import命令載入這個模組。

import命令具有提升效果，會提升到整個模組的頭部，首先執行。由於import是靜態執行，所以不能使用表示式和變數，這些只有在執行時才能得到結果的語法結構。

一、default匯入匯出 default import/export

每個模組僅有一個default的匯出，匯出內容可以是一個function、class，object等。因為這種方式被當做主要的匯出內容，匯入方式最為簡單。

// there is no semi-colon here
export default function() {} 
export default class {}
//範例
class A extends Component{
   ...
}
export default A;
//對應的import範例。
import A from './requireTest'
//default export, 輸入 lodash 模組
import _ from 'lodash';
//一條import語句中，同時輸入預設方法和其他變數
import _, { each } from 'lodash';
//上述程式碼對應的export語句
export default function (obj) {
  // ···
}
export function each(obj, iterator, context) {
  // ···
}
export { each as forEach };

注意：一個模組僅僅只允許匯出一個default物件，實際匯出的是一個default命名的變數進行重新命名，等價語句如下。所以import後可以是任意變數名稱，且不需要{}。

import any from './requireTest'
import {default as any } from './requireTest'

二、named 匯入匯出

需要特別注意的是，export命令規定的是對外的介面，必須與模組內部的變數建立一一對應關係。另外，export語句輸出的介面，與其對應的值是動態繫結關係，即通過該介面，可以取到模組內部實時的值。

import命令接受一對大括號，裡面指定要從其他模組匯入的變數名。大括號裡面的變數名，必須與被匯入模組（profile.js）對外介面的名稱相同。如果想為輸入的變數重新取一個名字，import命令要使用as關鍵字，將輸入的變數重新命名。

import後面的from指定模組檔案的位置，可以是相對路徑，也可以是絕對路徑，.js路徑可以省略。如果只是模組名，不帶有路徑，那麼必須有組態檔，告訴 JavaScript 引擎該模組的位置。

// profile.js
//第一種export
export var firstName = 'Michael';
export function f() {};
//第二種export，優先使用這種寫法
var firstName = 'Michael';
export {firstName}；
function f() {}
export {f};
//main.js
import { firstName, f } from './profile';
import { firstName as surname } from './profile';

三、重新命名匯入匯出

export { myFunction }; // exports a function declared earlier
export const foo = Math.sqrt(2); // exports a constant

import不同模組的匯出內容時，必須保持命名的唯一性。此時可以用重新命名來解決，包括以下兩類。

//匯出的時候重新命名
function v1() { ... }
function v2() { ... }
export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion  //可以用兩個不同的名稱匯出相同的值
};
//匯入的時候重新命名
// 這兩個模組都會匯出以`flip`命名的東西。同時匯入兩者，需要將其中一個的名稱改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

四、export和import的複合寫法

如果在一個模組之中，先輸入後輸出同一個模組，import語句可以與export語句寫在一起。

export { foo, bar } from 'my_module';
// 等同於
import { foo, bar } from 'my_module';
export { foo, bar };

【相關推薦：】

以上就是javascript中export的意思是什麼的詳細內容，更多請關注TW511.COM其它相關文章！