import和export的用法

Youngdze 發布于2019-08-23 17:58 / 2197人閱讀

摘要：命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能。前者用于服務器，后者用于瀏覽器。命令接受一對大括號，里面指定要從其他模塊導入的變量名。基本用法其他和主要區別為前者是動態加載。

問題來了

在日常開發中，HMS經常會遇到以下這些語句

import {xxx, xxxx} from "xxx"
import xxx from "xxx"
import("../xxx")

let xxx = "x"; export {xxx}
export class xxx {}
export default {}
exports.post()
module.exports.init = init;

那么問題來了，這些import和export語句表示什么意思？有什么區別呢？

背景知識 1. ES6模塊

import和export是ES6模塊中的兩個命令。

ES6模塊功能主要有兩個命令構成：export和import。export命令用于規定模塊的對外接口，import命令用于輸入其他模塊提供的功能。

在ES6前，模塊加載最主要的有 CommonJS 和 AMD兩種。前者用于服務器，后者用于瀏覽器。
ES6 模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。

2. export

export命令用于規定模塊的對外接口。即輸出模塊內部變量（方法、類）。

基本用法

// 1. 直接輸出變量（方法、類）
export var m = 1;
export function multiply(x, y) {
  return x * y;
};

// 2. 使用大括號指定所要輸出的一組變量（方法、類）
var m = 1;
export { m };

// 3. as關鍵字重命名
// 重命名后，v2可以用不同的名字輸出兩次
function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

注意項

export語句輸出的接口，與其對應的值是動態綁定關系，即通過該接口，可以取到模塊內部實時的值。

export命令可以出現在模塊的任何位置，只要處于模塊頂層就可以。

3. import

使用export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過import命令加載這個模塊。
import命令接受一對大括號，里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊對外接口的名稱相同。

基本用法

// 1. 引入變量（方法、類）-（逐一加載）
import { firstName, lastName, year } from "./profile.js";

// 2. as關鍵字重命名
import { lastName as surname } from "./profile.js";

// 3. 整體加載
import * as circle from "./circle";

注意項

引入變量只讀，引入對象屬性可改寫

from后面是文件路徑（相對路徑、絕對路徑均可，可省略.js猴嘴；模塊名，已配置模塊位置）

import命令提升至頂部先執行（編譯階段執行）

import命令靜態執行，不能使用表達式和變量

重復執行同一句import命令，只會執行一次

4. export default

export default就是輸出一個叫做default的變量或方法，系統允許自定義命名

基本用法

// 默認輸出一個函數
export default function () {
  console.log("foo");
}
// 引用并指定名字
import customName from "./export-default";

export default命令的本質是將后面的值，賦給default變量，所以可以直接將一個值寫在export default之后

5. import()

為了實現在運行中加載模塊，引入了import()函數，實現了動態加載。

基本用法

import("./myModule.js")
.then(({export1, export2}) => {
  // ...
});

其他

import()和import主要區別為前者是動態加載。
import()返回一個Promise對象，import()加載模塊成功以后，這個模塊會作為一個對象，當作then方法的參數。
import()類似于Node的require方法，區別主要是前者是異步加載，后者是同步加載
import()通常用于按需加載、條件加載、動態的模塊路徑

問題解答

// 1. 
// 引入模塊的某些變量（方法、類），配合4、5使用
import {xxx, xxxx} from "xxx"  

// 2. 
// 引入模塊的默認變量（方法、類），配合6使用
import xxx from "xxx" 

// 3.
// 實現動態加載，適用于按需加載等
import("../xxx") 

// 4.
// 輸出模塊的變量（方法、類），對應引入方法為1
let xxx = "x"; export {xxx}
// 5.
// 輸出模塊的變量（方法、類），對應引入方法為1
export class xxx {}
// 6.
// 輸出模塊默認的變量（方法、類），對應引入方法為2
export default {}
// 7.
// 待更新
exports.post()
// 8.
// 待更新
module.exports.init = init;

參考文章

《ECMAScript 6 入門——阮一峰》

GPU云服務器云服務器寫的文件import 的用法 cdn的用法 find的用法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104458.html

javascript中import和export用法總結

摘要：前者用于服務器，后者用于瀏覽器。某些打包工具可以允許或要求使用擴展名。的形式需要的支持，比如將導出在中的對象或值。如上，也是的內容，和是一對。比如如命名導出引入的命名導出等價為，值得注意的是在該模塊中不能直接使用和。 import import 和 require 的區別 import 和js的發展歷史息息相關，歷史上 js沒有模塊(module)體系，無法將一個大程序拆分成互相依賴的...

ideaa 2019-08-23 12:00 評論0 收藏0
JS/TS 的 import 和 export 用法小結

摘要：昨天幫一個網友解決一個的問題，看了一下，歸根結底還是對的和用法的不熟悉。讓我想起來當年學這個知識點的時候，也是云里霧里跌跌撞撞猜了很久用法，踩過坑。昨天幫一個網友解決一個typescript的問題，看了一下，歸根結底還是對js的import和export用法的不熟悉。讓我想起來當年學這個知識點的時候，也是云里霧里跌跌撞撞『猜』了很久用法，踩過坑。當時主要看的是阮一峰的這篇文章 hpt...

DevTTL 2019-08-23 14:08 評論0 收藏0
export和import的用法總結

摘要：把直接加到聲明前面就可以省略無論怎樣輸出，輸入的時候都需要。其實這種導出方式可以看成是命名導出的變種，只不過把命名寫成了。對應輸入的例子參考文章詳解中與的用法和區別我在 ES6中export一般的用法有兩種命名導出（Named exports）默認導出（Default exports）命名導出（Named exports）就是每一個需要輸出的數據類型都要有一個name，統一...

EasonTyler 2019-08-26 11:42 評論0 收藏0
前端模塊化雜記

摘要：入口模塊返回的賦值給總結在剖析了整體的流程之后，可以看到相關的技術細節還是比較清晰的，學無止境引用混合使用詳解的語法前端模塊化規范前言 CMDAMD簡介 Commonjs簡介 Module簡介 Common和Module的區別 Module與webpack Module與Babel 一些問題總結引用前言前端模塊化在近幾年層出不窮，有Node的CommonJs,也有屬于cl...

GitCafe 2019-08-26 13:29 評論0 收藏0