import and export 之（export）

weij 發布于2019-08-22 18:40 / 1097人閱讀

摘要：和必須始終顯示在其各自用法的頂級范圍中。也就是說不可以在條件中放置或它們必須放在所有塊和函數之外。不幸的是，它存在一些缺點，并正式地不鼓勵這樣做。用戶可以另外手動將和列為命名導入，如果他們想要的話。

ES6提供了兩個關鍵字import導入和export導出，語法上有些差別。
!important: import和export必須,始終顯示在,其各自用法的,頂級范圍中。也就是說不可以在if條件中放置import或export; 它們必須放在所有塊和函數之外。

exporting API Members 導出API成員

export關鍵字要么放在聲明之前，要么作為運算符（排序）使用要export的特定綁定列表。

export function foo() {
    // ..
}

export var awesome = 42;

var bar = [1,2,3];
export { bar };

相同的表達exports的方法:

function foo() {
    // ..
}

var awesome = 42;
var bar = [1,2,3];

export { foo, awesome, bar };

這些都稱為 命名導出( named export) ，因為您實際上導出變量/函數/等的名稱綁定。
任何你不標記export,會在模塊的范圍內保持private。也就是說，盡管var bar = ..看起來像是在頂級全局范圍聲明，頂級范圍實際上是模塊本身; 模塊中沒有全局范圍。

注意：模塊仍然可以訪問window和所有的globals ，掛起它，只是不是作為詞匯頂級范圍。但是，你真的應該遠離全局模塊，如果可能的話。

您還可以在命名導出期間對模塊成員進行“重命名”（也稱為別名）：

function foo() { .. }

export { foo as bar };

導入此模塊時，只有bar成員名稱可用于導入; foo保持隱藏在模塊內。

模塊導出不僅僅是值或引用的正常賦值，因為您習慣于=賦值運算符。實際上，當你導出一些東西，你正在導出一個綁定（有點像一個指針）到那個東西（變量等）。

在模塊中，如果更改已導出綁定的變量的值，即使已經導入（參見下一部分），導入的綁定也將解析為當前（更新）的值。

試想一下：

var awesome = 42;
export { awesome };

// later
awesome = 100;

導入此模塊時，無論是在awesome = 100設置之前還是之后，一旦分配已經發生，導入的綁定將解析為值100，而不是42。

這是因為綁定本質上是對awesome變量本身的引用或指針，而不是其值的副本。JS引入了ES6模塊綁定,這是一個大多數前所未有的概念。

雖然您可以在模塊的定義中清楚地多次使用export，但ES6絕對偏好模塊,具有單個導出的方法，這稱為default export。用TC39委員會的一些成員的話來說，如果你遵循這種模式，你就會被“簡單的import語法”所獎勵，而如果你不這么做，則反過來被更冗長的語法來“懲罰”。

默認導出將特定導出的綁定設置為導入模塊時的默認值。綁定的名稱字面上是默認的。正如你將在后面看到的，當導入模塊綁定時，你也可以重命名它們，就像你通常使用默認導出一樣。

每個模塊定義只能有一個默認值。如果模塊具有默認導出，您將看到導入語法如何更簡潔。

對于默認導出語法有一個微妙的細微差別，您應該密切注意。比較這兩個片段：

function foo(..) {
    // ..
}

export default foo;

and

function foo(..) {
    // ..
}

export { foo as default };

在第一個片段中，您正在導出一個綁定到此時的函數表達式值，而不是標識符foo。換句話說，導出export default ..采用一個表達式。如果以后將foo分配給模塊中的其他值，則模塊導入仍會顯示最初導出的函數，而不是新值。

順便說一下，第一個片段也可以寫成：

export default function foo(..) {
    // ..
}

警告：雖然這里function foo..在技術上,是一個函數表達式，為了模塊的內部范圍的目的，它被視為一個函數聲明，因為foo名稱綁定在模塊的頂級作用域稱為“提升”）。出口默認類Foo也是如此。但是，雖然你可以做到export var foo = ..，但你目前不能做到export default var foo = ..（或let或const），在一個令人沮喪的不一致的情況下。在撰寫本文時，為了一致性，已經討論了在ES6之后很快增加這種能力。

function foo(..) {
    // ..
}

export { foo as default };

在此版本的模塊導出中，默認導出綁定實際上是foo標識符而不是它的值，所以您獲得前面描述的綁定行為（即，如果您以后更改foo的值，你在import端看到的值也將更新）。

在默認導出語法中要非常小心這個微妙的問題，特別是如果你的邏輯需要更新導出值。如果你從來沒有計劃更新默認導出的值，export default ..是很好的。如果您計劃更新值，則必須使用export {.. as default}。無論哪種方式，確保評論你的代碼如何來解釋你的意圖！

因為每個模塊只能有一個默認值，所以您可能會試圖使用一個對象的默認導出,來設計您的模塊，其中包含所有的API方法，例如：

export default {
    foo() { .. },
    bar() { .. },
    ..
};

這種模式，似乎很密切地，映射了很多開發人員，已經構建了，他們的ES6之前的模塊，所以，它似乎是，一個自然的方法。不幸的是，它存在一些缺點，并正式地不鼓勵這樣做。

特別是，JS引擎，不能靜態分析普通對象的內容，這意味著，它不能對靜態導入性能，做一些優化。每個成員多帶帶和顯式導出的優點是，引擎可以進行靜態分析和優化。

如果你的API，已經有多個成員，似乎這些原則 - 每個模塊一個默認導出，所有API成員名為exports - 存在沖突，不是嗎？但是您可以有一個默認導出以及其他命名導出; 它們不是相互排斥的。

因此，替換掉當前的（不建議的）模式：

export default function foo() { .. }

foo.bar = function() { .. };
foo.baz = function() { .. };

you can do that

export default function foo() { .. }

export function bar() { .. }
export function baz() { .. }

注意：在前面的代碼段中，我使用名稱foo作為默認函數的標簽。然而，名稱foo，為了導出的目的被忽略 - default實際上是導出的名稱。當您導入此默認綁定時，您可以為其指定任何所需的名稱，如下一部分中所示。

function foo() { .. }
function bar() { .. }
function baz() { .. }

export { foo as default, bar, baz, .. };

當我們短期覆蓋import時，混合default和命名exports的影響將更加清晰。但實質上它意味著最簡潔的默認import形式,將只檢索foo()函數。用戶可以另外手動將bar和baz列為命名導入，如果他們想要的話。

你可以想象如果你有很多命名的導出綁定，你模塊的用戶將是多么乏味。這里有一個通配符導入表單，您可以在單個命名空間對象中導入所有模塊的exports，但是無法將通配符導入到頂級綁定。

同樣，ES6模塊機制被有意設計為阻止具有大量輸出的模塊;相對來說，希望這樣的方法有點困難，作為一種社會工程，它鼓勵簡單的模塊設計，因為這將有利于大/復雜的模塊設計。

我建議你不要混合default export與命名exports，這將是是不切實際或不需要，特別是如果你有一個大的API和重構多帶帶的模塊。在這種情況下，只需使用所有named exports，并記錄您的模塊的用戶應該使用import * as ..（命名空間導入）方法在單個命名空間中立即帶來整個API。

我們之前提到過，但讓我們更詳細地回味一下。除了導出表達式值綁定的export default ...外，所有其他導出表單,都正在導出綁定到本地標識符。

云服務器 GPU云服務器 Exporting exported exports exporter

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

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

ES6 的模塊系統

摘要：的模塊系統被設計成讓你可以一次性引入多個變量。動態靜態，或者說規矩和如何打破規矩作為一門動態編程語言，令人驚訝地擁有一個靜態的模塊系統。只要你的需求都是靜態的話，這個模塊系統還是很的。此文為翻譯，原文地址在這兒：https://hacks.mozilla.org/2015/08/es6-in-depth-modules/ ES6 是 ECMAScript 第 6 版本的簡稱，這是新一...

MudOnTire 2019-08-21 10:38 評論0 收藏0
前端進階（6） - webpack 之外的另一種選擇：rollup

摘要：之外的另一種選擇對前端來說是再熟悉不過的工具了，它提供了強大的功能來構建前端的資源，包括等語言腳本，也包括等二進制文件。所以，一個不錯的選擇是，應用使用，類庫使用。 webpack 之外的另一種選擇：rollup webpack 對前端來說是再熟悉不過的工具了，它提供了強大的功能來構建前端的資源，包括 html/js/ts/css/less/scss ... 等語言腳本，也包括 ima...

stefan 2019-08-23 11:28 評論0 收藏0
es6- export and import

摘要：如果我們想要包含得單獨導入和導出二和的注意點可能的錯誤在沒有的情況下，不能匿名函數前面我們講到可以在定義一個函數的時候就，但是這個函數不能是匿名函數，除非這個函數作為導出。一： export和import的正常用法1：export變量 // ./module/example.js export var firstName = roger; export const lastName...

Worktile 2019-08-23 17:05 評論0 收藏0
前端常用4種模塊化方案總結.md

摘要：最后衍生出面向各種使用場景的模塊標準。定義模塊返回對象的匿名模塊調用模塊應用由模塊組成，采用模塊規范。其模塊功能主要由兩個命令構成和。命令用于規定模塊的對外接口，導出模塊暴露的命令用于輸入其他模塊提供的功能引入其他模塊。 JS誕生之初面向簡單頁面開發，沒有模塊的概念。后來頁面逐漸復雜，人類構造到 IIFE 立即執行函數來模擬模塊；之前也有雅虎的實踐，使用命名空間作為模塊名。最后...

lookSomeone 2019-08-23 17:55 評論0 收藏0
CSS_JS_Tips

摘要：所以，無形之后，會增加一個頂層命名空間。導入一個空模塊，是一個空對象一個模塊就是一個對象。工作中遇見的CSS問題或JS技巧 rem 計算 rem等比縮放樣式方案1 @media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-s...

張春雷 2019-08-29 12:56 評論0 收藏0