javascript中export指的是什么意思

這篇文章主要介紹了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指的是什么意思”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!