javascript中export指的是什么意思

這篇文章主要介紹了javascript中export指的是什么意思，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在JavaScript中，export的意思是“導(dǎo)出”；JavaScript中模塊內(nèi)的所有聲明都是本地的，利用export關(guān)鍵字可以導(dǎo)出模塊，該命令可以出現(xiàn)在模塊的任何位置，導(dǎo)出模塊后其他JS文件就可以通過(guò)import命令加載該模塊。

本教程操作環(huán)境：windows10系統(tǒng)、javascript1.8.5版、Dell G3電腦。

javascript中export的意思是什么

默認(rèn)情況下，JavaScript中在模塊內(nèi)的所有聲明都是本地的，外部無(wú)法訪(fǎng)問(wèn)。如果需要公開(kāi)模塊中部分聲明的內(nèi)容，并讓其它模塊加以使用，這個(gè)時(shí)候就需要導(dǎo)出功能，最簡(jiǎn)單的方式是添加export關(guān)鍵字導(dǎo)出模塊。

可以導(dǎo)出的內(nèi)容包括類(lèi)、函數(shù)以及var、let和const修飾的變量。export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級(jí)作用域內(nèi)，就會(huì)報(bào)錯(cuò)，import命令也是如此。

使用export命令定義了模塊的對(duì)外接口以后，其他 JS 文件就可以通過(guò)import命令加載這個(gè)模塊。

import命令具有提升效果，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行。由于import是靜態(tài)執(zhí)行，所以不能使用表達(dá)式和變量，這些只有在運(yùn)行時(shí)才能得到結(jié)果的語(yǔ)法結(jié)構(gòu)。

一、default導(dǎo)入導(dǎo)出 default import/export

每個(gè)模塊僅有一個(gè)default的導(dǎo)出，導(dǎo)出內(nèi)容可以是一個(gè)function、class，object等。因?yàn)檫@種方式被當(dāng)做主要的導(dǎo)出內(nèi)容，導(dǎo)入方式最為簡(jiǎn)單。

// there is no semi-colon here
export default function() {} 
export default class {}
//示例
class A extends Component{
   ...
}
export default A;
//對(duì)應(yīng)的import示例。
import A from './requireTest'
//default export, 輸入 lodash 模塊
import _ from 'lodash';
//一條import語(yǔ)句中，同時(shí)輸入默認(rèn)方法和其他變量
import _, { each } from 'lodash';
//上述代碼對(duì)應(yīng)的export語(yǔ)句
export default function (obj) {
  // ···
}
export function each(obj, iterator, context) {
  // ···
}
export { each as forEach };

注意：一個(gè)模塊僅僅只允許導(dǎo)出一個(gè)default對(duì)象，實(shí)際導(dǎo)出的是一個(gè)default命名的變量進(jìn)行重命名，等價(jià)語(yǔ)句如下。所以import后可以是任意變量名稱(chēng)，且不需要{}。

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

二、named 導(dǎo)入導(dǎo)出

需要特別注意的是，export命令規(guī)定的是對(duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系。另外，export語(yǔ)句輸出的接口，與其對(duì)應(yīng)的值是動(dòng)態(tài)綁定關(guān)系，即通過(guò)該接口，可以取到模塊內(nèi)部實(shí)時(shí)的值。

import命令接受一對(duì)大括號(hào)，里面指定要從其他模塊導(dǎo)入的變量名。大括號(hào)里面的變量名，必須與被導(dǎo)入模塊（profile.js）對(duì)外接口的名稱(chēng)相同。如果想為輸入的變量重新取一個(gè)名字，import命令要使用as關(guān)鍵字，將輸入的變量重命名。

import后面的from指定模塊文件的位置，可以是相對(duì)路徑，也可以是絕對(duì)路徑，.js路徑可以省略。如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴 JavaScript 引擎該模塊的位置。

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

三、重命名導(dǎo)入導(dǎo)出

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

import不同模塊的導(dǎo)出內(nèi)容時(shí)，必須保持命名的唯一性。此時(shí)可以用重命名來(lái)解決，包括以下兩類(lèi)。

//導(dǎo)出的時(shí)候重命名
function v1() { ... }
function v2() { ... }
export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion  //可以用兩個(gè)不同的名稱(chēng)導(dǎo)出相同的值
};
//導(dǎo)入的時(shí)候重命名
// 這兩個(gè)模塊都會(huì)導(dǎo)出以`flip`命名的東西。同時(shí)導(dǎo)入兩者，需要將其中一個(gè)的名稱(chēng)改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

四、export和import的復(fù)合寫(xiě)法

如果在一個(gè)模塊之中，先輸入后輸出同一個(gè)模塊，import語(yǔ)句可以與export語(yǔ)句寫(xiě)在一起。

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“javascript中export指的是什么意思”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!