javascript中export的意思是什麼

WBOY
發布: 2022-01-12 15:22:59
原創
7695 人瀏覽過

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

javascript中export的意思是什麼

本教學操作環境: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板