javascript中export的意思是什麼

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

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

javascript中export的意思是什麼

#預設情況下，JavaScript中export內的所有宣告都是本地的，外部無法訪問。如果需要公開模組中部分聲明的內容，並讓它模組加以使用，這個時候就需要導出功能，最簡單的方式是添加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學習教學】

#

以上是javascript中export的意思是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！