資訊專欄INFORMATION COLUMN
摘要：命令用于規(guī)定模塊的對外接口，命令用于輸入其他模塊提供的功能。前者用于服務(wù)器，后者用于瀏覽器。命令接受一對大括號，里面指定要從其他模塊導(dǎo)入的變量名?；居梅ㄆ渌椭饕獏^(qū)別為前者是動態(tài)加載。
問題來了
在日常開發(fā)中，HMS經(jīng)常會遇到以下這些語句
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語句表示什么意思？有什么區(qū)別呢？
背景知識 1. ES6模塊import和export是ES6模塊中的兩個命令。
ES6模塊功能主要有兩個命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對外接口，import命令用于輸入其他模塊提供的功能。
在ES6前，模塊加載最主要的有 CommonJS 和 AMD兩種。前者用于服務(wù)器，后者用于瀏覽器。
ES6 模塊的設(shè)計(jì)思想是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。
export命令用于規(guī)定模塊的對外接口。即輸出模塊內(nèi)部變量（方法、類）。
基本用法
// 1. 直接輸出變量（方法、類）
export var m = 1;
export function multiply(x, y) {
return x * y;
};
// 2. 使用大括號指定所要輸出的一組變量（方法、類）
var m = 1;
export { m };
// 3. as關(guān)鍵字重命名
// 重命名后，v2可以用不同的名字輸出兩次
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
注意項(xiàng)
export語句輸出的接口，與其對應(yīng)的值是動態(tài)綁定關(guān)系，即通過該接口，可以取到模塊內(nèi)部實(shí)時(shí)的值。
export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊頂層就可以。
3. import使用export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過import命令加載這個模塊。
import命令接受一對大括號，里面指定要從其他模塊導(dǎo)入的變量名。大括號里面的變量名，必須與被導(dǎo)入模塊對外接口的名稱相同。
基本用法
// 1. 引入變量（方法、類）-（逐一加載）
import { firstName, lastName, year } from "./profile.js";
// 2. as關(guān)鍵字重命名
import { lastName as surname } from "./profile.js";
// 3. 整體加載
import * as circle from "./circle";
注意項(xiàng)
引入變量只讀，引入對象屬性可改寫
from后面是文件路徑（相對路徑、絕對路徑均可，可省略.js猴嘴；模塊名，已配置模塊位置）
import命令提升至頂部先執(zhí)行（編譯階段執(zhí)行）
import命令靜態(tài)執(zhí)行，不能使用表達(dá)式和變量
重復(fù)執(zhí)行同一句import命令，只會執(zhí)行一次
4. export defaultexport default就是輸出一個叫做default的變量或方法，系統(tǒng)允許自定義命名
基本用法
// 默認(rèn)輸出一個函數(shù)
export default function () {
console.log("foo");
}
// 引用并指定名字
import customName from "./export-default";
export default命令的本質(zhì)是將后面的值，賦給default變量，所以可以直接將一個值寫在export default之后
5. import()為了實(shí)現(xiàn)在運(yùn)行中加載模塊，引入了import()函數(shù)，實(shí)現(xiàn)了動態(tài)加載。
基本用法
import("./myModule.js")
.then(({export1, export2}) => {
// ...
});
其他
import()和import主要區(qū)別為前者是動態(tài)加載。
import()返回一個Promise對象，import()加載模塊成功以后，這個模塊會作為一個對象，當(dāng)作then方法的參數(shù)。
import()類似于Node的require方法，區(qū)別主要是前者是異步加載，后者是同步加載
import()通常用于按需加載、條件加載、動態(tài)的模塊路徑
// 1.
// 引入模塊的某些變量（方法、類），配合4、5使用
import {xxx, xxxx} from "xxx"
// 2.
// 引入模塊的默認(rèn)變量（方法、類），配合6使用
import xxx from "xxx"
// 3.
// 實(shí)現(xiàn)動態(tài)加載，適用于按需加載等
import("../xxx")
// 4.
// 輸出模塊的變量（方法、類），對應(yīng)引入方法為1
let xxx = "x"; export {xxx}
// 5.
// 輸出模塊的變量（方法、類），對應(yīng)引入方法為1
export class xxx {}
// 6.
// 輸出模塊默認(rèn)的變量（方法、類），對應(yīng)引入方法為2
export default {}
// 7.
// 待更新
exports.post()
// 8.
// 待更新
module.exports.init = init;
參考文章
《ECMAScript 6 入門——阮一峰》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104458.html
摘要：前者用于服務(wù)器，后者用于瀏覽器。某些打包工具可以允許或要求使用擴(kuò)展名。的形式需要的支持，比如將導(dǎo)出在中的對象或值。如上，也是的內(nèi)容，和是一對。比如如命名導(dǎo)出引入的命名導(dǎo)出等價(jià)為，值得注意的是在該模塊中不能直接使用和。 import import 和 require 的區(qū)別 import 和js的發(fā)展歷史息息相關(guān)，歷史上 js沒有模塊(module)體系，無法將一個大程序拆分成互相依賴的...
摘要：昨天幫一個網(wǎng)友解決一個的問題，看了一下，歸根結(jié)底還是對的和用法的不熟悉。讓我想起來當(dāng)年學(xué)這個知識點(diǎn)的時(shí)候，也是云里霧里跌跌撞撞猜了很久用法，踩過坑。 昨天幫一個網(wǎng)友解決一個typescript的問題，看了一下，歸根結(jié)底還是對js的import和export用法的不熟悉。讓我想起來當(dāng)年學(xué)這個知識點(diǎn)的時(shí)候，也是云里霧里跌跌撞撞『猜』了很久用法，踩過坑。當(dāng)時(shí)主要看的是阮一峰的這篇文章 hpt...
摘要：把直接加到聲明前面就可以省略無論怎樣輸出，輸入的時(shí)候都需要。其實(shí)這種導(dǎo)出方式可以看成是命名導(dǎo)出的變種，只不過把命名寫成了。對應(yīng)輸入的例子參考文章詳解中與的用法和區(qū)別我在 ES6中export一般的用法有兩種 命名導(dǎo)出（Named exports） 默認(rèn)導(dǎo)出（Default exports） 命名導(dǎo)出（Named exports） 就是每一個需要輸出的數(shù)據(jù)類型都要有一個name，統(tǒng)一...
閱讀 1747·2021-11-24 10:18
閱讀 2257·2021-11-18 13:20
閱讀 2349·2021-08-23 09:46
閱讀 1008·2019-08-30 15:56
閱讀 2852·2019-08-30 15:53
閱讀 751·2019-08-30 14:22
閱讀 480·2019-08-29 15:34
閱讀 2549·2019-08-29 12:14
