成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

import和export的用法

Youngdze / 2295人閱讀

摘要：命令用于規(guī)定模塊的對(duì)外接口，命令用于輸入其他模塊提供的功能。前者用于服務(wù)器，后者用于瀏覽器。命令接受一對(duì)大括號(hào)，里面指定要從其他模塊導(dǎo)入的變量名。基本用法其他和主要區(qū)別為前者是動(dòng)態(tài)加載。

問(wèn)題來(lái)了

在日常開(kāi)發(fā)中，HMS經(jīng)常會(huì)遇到以下這些語(yǔ)句

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;

那么問(wèn)題來(lái)了，這些import和export語(yǔ)句表示什么意思？有什么區(qū)別呢？

背景知識(shí) 1. ES6模塊

import和export是ES6模塊中的兩個(gè)命令。

ES6模塊功能主要有兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能。

在ES6前，模塊加載最主要的有 CommonJS 和 AMD兩種。前者用于服務(wù)器，后者用于瀏覽器。
ES6 模塊的設(shè)計(jì)思想是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴(lài)關(guān)系，以及輸入和輸出的變量。

2. export

export命令用于規(guī)定模塊的對(duì)外接口。即輸出模塊內(nèi)部變量（方法、類(lèi)）。

基本用法

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

// 2. 使用大括號(hào)指定所要輸出的一組變量（方法、類(lèi)）
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ǔ)句輸出的接口，與其對(duì)應(yīng)的值是動(dòng)態(tài)綁定關(guān)系，即通過(guò)該接口，可以取到模塊內(nèi)部實(shí)時(shí)的值。

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

3. import

使用export命令定義了模塊的對(duì)外接口以后，其他 JS 文件就可以通過(guò)import命令加載這個(gè)模塊。
import命令接受一對(duì)大括號(hào)，里面指定要從其他模塊導(dǎo)入的變量名。大括號(hào)里面的變量名，必須與被導(dǎo)入模塊對(duì)外接口的名稱(chēng)相同。

基本用法

// 1. 引入變量（方法、類(lèi)）-（逐一加載）
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)

引入變量只讀，引入對(duì)象屬性可改寫(xiě)

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

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

import命令靜態(tài)執(zhí)行，不能使用表達(dá)式和變量

重復(fù)執(zhí)行同一句import命令，只會(huì)執(zhí)行一次

4. export default

export default就是輸出一個(gè)叫做default的變量或方法，系統(tǒng)允許自定義命名

基本用法

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

export default命令的本質(zhì)是將后面的值，賦給default變量，所以可以直接將一個(gè)值寫(xiě)在export default之后

5. import()

為了實(shí)現(xiàn)在運(yùn)行中加載模塊，引入了import()函數(shù)，實(shí)現(xiàn)了動(dòng)態(tài)加載。

基本用法

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

其他

import()和import主要區(qū)別為前者是動(dòng)態(tài)加載。
import()返回一個(gè)Promise對(duì)象，import()加載模塊成功以后，這個(gè)模塊會(huì)作為一個(gè)對(duì)象，當(dāng)作then方法的參數(shù)。
import()類(lèi)似于Node的require方法，區(qū)別主要是前者是異步加載，后者是同步加載
import()通常用于按需加載、條件加載、動(dòng)態(tài)的模塊路徑

問(wèn)題解答 
// 1. 
// 引入模塊的某些變量（方法、類(lèi)），配合4、5使用
import {xxx, xxxx} from "xxx"  

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

// 3.
// 實(shí)現(xiàn)動(dòng)態(tài)加載，適用于按需加載等
import("../xxx") 

// 4.
// 輸出模塊的變量（方法、類(lèi)），對(duì)應(yīng)引入方法為1
let xxx = "x"; export {xxx}
// 5.
// 輸出模塊的變量（方法、類(lèi)），對(duì)應(yīng)引入方法為1
export class xxx {}
// 6.
// 輸出模塊默認(rèn)的變量（方法、類(lèi)），對(duì)應(yīng)引入方法為2
export default {}
// 7.
// 待更新
exports.post()
// 8.
// 待更新
module.exports.init = init;
參考文章

《ECMAScript 6 入門(mén)——阮一峰》

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104458.html

相關(guān)文章

  • javascript中import和export用法總結(jié)

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

    ideaa 評(píng)論0 收藏0

  • JS/TS 的 import 和 export 用法小結(jié)

    摘要：昨天幫一個(gè)網(wǎng)友解決一個(gè)的問(wèn)題，看了一下，歸根結(jié)底還是對(duì)的和用法的不熟悉。讓我想起來(lái)當(dāng)年學(xué)這個(gè)知識(shí)點(diǎn)的時(shí)候，也是云里霧里跌跌撞撞猜了很久用法，踩過(guò)坑。 昨天幫一個(gè)網(wǎng)友解決一個(gè)typescript的問(wèn)題，看了一下，歸根結(jié)底還是對(duì)js的import和export用法的不熟悉。讓我想起來(lái)當(dāng)年學(xué)這個(gè)知識(shí)點(diǎn)的時(shí)候，也是云里霧里跌跌撞撞『猜』了很久用法，踩過(guò)坑。當(dāng)時(shí)主要看的是阮一峰的這篇文章 hpt...

    DevTTL 評(píng)論0 收藏0

  • export和import的用法總結(jié)

    摘要：把直接加到聲明前面就可以省略無(wú)論怎樣輸出，輸入的時(shí)候都需要。其實(shí)這種導(dǎo)出方式可以看成是命名導(dǎo)出的變種，只不過(guò)把命名寫(xiě)成了。對(duì)應(yīng)輸入的例子參考文章詳解中與的用法和區(qū)別我在 ES6中export一般的用法有兩種 命名導(dǎo)出（Named exports） 默認(rèn)導(dǎo)出（Default exports） 命名導(dǎo)出（Named exports） 就是每一個(gè)需要輸出的數(shù)據(jù)類(lèi)型都要有一個(gè)name，統(tǒng)一...

    EasonTyler 評(píng)論0 收藏0

  • 前端模塊化雜記

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

    GitCafe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<