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

EasonTyler 發(fā)布于2019-08-26 11:42 / 1877人閱讀

摘要：把直接加到聲明前面就可以省略無論怎樣輸出，輸入的時候都需要。其實這種導出方式可以看成是命名導出的變種，只不過把命名寫成了。對應輸入的例子參考文章詳解中與的用法和區(qū)別我在

ES6中export一般的用法有兩種

命名導出（Named exports）

默認導出（Default exports）

命名導出（Named exports）

就是每一個需要輸出的數(shù)據(jù)類型都要有一個name，統(tǒng)一輸入一定要帶有{}，即便只有一個需要輸出的數(shù)據(jù)類型。這種寫法清爽直觀，是推薦的寫法。

//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function diag(x, y) {
    return sqrt(square(x) + square(y));
}

export {sqrt, square, diag}

//------ main.js ------
import { square, diag } from "lib";                
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

把export直接加到聲明前面就可以省略{}

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from "lib";                
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

無論怎樣輸出，輸入的時候都需要{}。

別名導入（Aliasing named imports）

當從不同模塊輸入的變量名相同的時候

import {speak} from "./cow.js"
import {speak} from "./goat.js"

這些寫法顯然會造成混亂

正確的方法是這樣的

import {speak as cowSpeak} from "./cow.js"
import {speak as goatSpeak} from "./goat.js"

可是，當從每個模塊需要輸入的方法很多的時候，這種寫法就顯得十分的繁瑣、冗長，例如

import {
  speak as cowSpeak,
  eat as cowEat,
  drink as cowDrink
} from "./cow.js"

import {
  speak as goatSpeak,
  eat as goatEat,
  drink as goatDrink
} from "./goat.js"

cowSpeak() // moo
cowEat() // cow eats
goatSpeak() // baa
goatDrink() // goat drinks

解決方案就是命名空間導入了

命名空間導入（Namespace imports）

import * as cow from "./cow.js"
import * as goat from "./goat.js"

cow.speak() // moo
goat.speak() // baa

十分的簡潔優(yōu)雅

默認導出（Default exports）

默認輸出就不需要name了，但是一個js文件中只能有一個export default。

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from "myFunc";
myFunc();

其實這種導出方式可以看成是命名導出的變種，只不過把命名寫成了default。

雖然export default只能有一個，但也可以輸出多個方法。

export default {
  speak () {
    return "moo"
  },
  eat () {
    return "cow eats"
  },
  drink () {
    return "cow drinks"
  }
}

輸入與命名空間輸入類似

import cow from "./default-cow.js"
import goat from "./default-goat.js"

cow.speak() // moo
goat.speak() // baa

如果我們在編寫模塊的時候使用的輸出方法不統(tǒng)一，那么引入的時候就需要考慮不同模塊輸入的方式。這種麻煩可以通過自引用的方法消除。方法如下

編寫兩種輸入方式通用的模塊

import * as myself from "./ambidextrous-cow.js" // import this file into itself

// this module"s own namespace is its default export
export default myself

export function speak () {
  console.log("moo")
}

這樣在輸入的時候就不需要考慮輸入方式了。

import cow from "./ambidextrous-cow"
import * as alsocow from "./ambidextrous-cow"

cow.speak() // moo
alsocow.speak() // moo

兩種輸入方法均可。

這種方法也有一個小缺點，就是在我們編寫的模塊中，有一個function是常用的，我們想默認輸出，可export default已經(jīng)使用了，而我們知道export default在一個模塊中只能使用一次。這時就要使用Object.assign

import * as myself from "./ambidextrous-cow.js" 

export default Object.assign(speak, myself) 

export function speak () {
  console.log("moo")
}

需要注意的是，Object.assign只能用于function。

對應輸入的例子

import cow from "./ambidextrous-cow"
import * as alsocow from "./ambidextrous-cow"

cow() // moo
cow.speak() // moo
alsocow.speak() // moo

參考文章

1.[es6] import, export, default cheatsheet

2.詳解JavaScript ES6中export import與export default的用法和區(qū)別

3.ES Modules: Using named exports as the default export

4.export in MDN

我在github
https://github.com/zhuanyongx...

GPU云服務器云服務器寫的文件import 對于云計算的總結(jié) 的用法 cdn的用法

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107400.html

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

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

ideaa 2019-08-23 12:00 評論0 收藏0
一篇文章總結(jié)redux、react-redux、redux-saga

摘要：編輯器頂層組件不就了嗎這就是。官方提供的綁定庫。具有高效且靈活的特性。在的中，可以使用或者等來監(jiān)聽某個，當某個觸發(fā)后，可以使用發(fā)起異步操作，操作完成后使用函數(shù)觸發(fā)，同步更新，從而完成整個的更新。不就ok了嗎？這就是 react-redux。Redux 官方提供的 React 綁定庫。具有高效且靈活的特性。 React Redux 將組件區(qū)分為容器組件和 UI 組件前者會處理邏輯...

April 2019-05-21 19:08 評論0 收藏0
前端模塊化雜記

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

GitCafe 2019-08-26 13:29 評論0 收藏0
探索 JS 中的模塊化

摘要：的主要思想是異步模塊，主邏輯在回調(diào)函數(shù)中執(zhí)行，這和瀏覽器前端所習慣的開發(fā)方式不謀而合，應運而生。是目前開發(fā)中使用率最高的模塊化標準。原文鏈接: http://yanjiie.me 偶然的一個周末復習了一下 JS 的模塊標準，刷新了一下對 JS 模塊化的理解。從開始 Coding 以來，總會周期性地突發(fā)奇想進行 Code Review。既是對一段時期的代碼進行總結(jié)，也是對那一段時光的...

SoapEye 2019-08-22 18:21 評論0 收藏0