成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

import and export 之 （export）

weij / 1107人閱讀

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

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

exporting API Members 導(dǎo)出API成員

export關(guān)鍵字要么放在聲明之前，要么作為運算符（排序）使用要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 };

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

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

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

function foo() { .. }

export { foo as bar };

導(dǎo)入此模塊時，只有bar成員名稱可用于導(dǎo)入; foo保持隱藏在模塊內(nèi)。

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

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

試想一下：

var awesome = 42;
export { awesome };

// later
awesome = 100;

導(dǎo)入此模塊時，無論是在awesome = 100設(shè)置之前還是之后，一旦分配已經(jīng)發(fā)生，導(dǎo)入的綁定將解析為值100，而不是42。

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

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

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

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

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

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

export default foo;

and

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

export { foo as default };

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

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

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

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

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

export { foo as default };

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

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

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

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

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

特別是，JS引擎，不能靜態(tài)分析普通對象的內(nèi)容，這意味著，它不能對靜態(tài)導(dǎo)入性能，做一些優(yōu)化。 每個成員多帶帶和顯式導(dǎo)出的優(yōu)點是，引擎可以進行靜態(tài)分析和優(yōu)化。

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

因此，替換掉當(dāng)前的（不建議的）模式：

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作為默認函數(shù)的標(biāo)簽。 然而，名稱foo，為了導(dǎo)出的目的被忽略 - default實際上是導(dǎo)出的名稱。 當(dāng)您導(dǎo)入此默認綁定時，您可以為其指定任何所需的名稱，如下一部分中所示。

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

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96074.html

相關(guān)文章

  • ES6 的模塊系統(tǒng)

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

    MudOnTire 評論0 收藏0

  • 前端進階（6） - webpack 之外的另一種選擇：rollup

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

    stefan 評論0 收藏0

  • es6- export and import

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

    Worktile 評論0 收藏0

  • 前端常用4種模塊化方案總結(jié).md

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

    lookSomeone 評論0 收藏0

  • CSS_JS_Tips

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

    張春雷 評論0 收藏0

發(fā)表評論

0條評論

weij

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<