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

資訊專欄INFORMATION COLUMN

在ES6模塊特性中，import時如何正確使用花括號'{ }'

neuSnail / 827人閱讀

摘要：在之前，社區(qū)制定了一些模塊加載方案，最主要的有和兩種。而我們這里要說的是在使用語法引用模塊時，如何正確使用。也就是在這種不使用來引用模塊的情況下，模塊時的命名是隨意的，即如下三種引用命名都是正確的因為它總是會解析到中默認(rèn)的。

在 ES6 之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務(wù)器，后者用于瀏覽器。ES6 在語言標(biāo)準(zhǔn)的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當(dāng)簡單，完全可以取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。

上文引用自：阮一峰老師的ECMAScript 6 入門。

而我們這里要說的是在使用import語法引用模塊時，如何正確使用{}。

假如有一個B.js，想要通過import語法引用模塊A.js，那么可以這么寫：

// B.js
import A from "./A"

而上面的代碼生效的前提是，只有在如下A.js中有默認(rèn)導(dǎo)出的export default語法時才會生效。也就是：

// A.js
export default 42

在這種不使用{}來引用模塊的情況下，import模塊時的命名是隨意的，即如下三種引用命名都是正確的：

// B.js
import A from "./A"
import MyA from "./A"
import Something from "./A"

因為它總是會解析到A.js中默認(rèn)的export default。

而下面是使用了花括號命名的方式{A}來導(dǎo)入A.js：

import { A } from "./A"

上面代碼生效的前提是，只有在模塊A.js中有如下命名導(dǎo)出為A的export name的代碼，也就是：

export const A = 42

而且，在明確聲明了命名導(dǎo)出后，那么在另一個js中使用{}引用模塊時，import時的模塊命名是有意義的，如下：

// B.js
import { A } from "./A"                 // 正確，因為A.js中有命名為A的export
import { myA } from "./A"               // 錯誤！因為A.js中沒有命名為myA的export
import { Something } from "./A"         // 錯誤！因為A.js中沒有命名為Something的export

要想上述代碼正確執(zhí)行，你需要明確聲明每一個命名導(dǎo)出：

// A.js
export const A = 42
export const myA = 43
export const Something = 44

ps: 一個模塊中只能有一個默認(rèn)導(dǎo)出export default，但是卻可以有任意命名導(dǎo)出（0個、1個、多個），你也可以如下，一次性將他們導(dǎo)入：

// B.js
import A, { myA, Something } from "./A"

這里我們使用導(dǎo)入默認(rèn)導(dǎo)出A，以及命名導(dǎo)出myA和Something。

我們甚至可以在導(dǎo)入的時候重命名導(dǎo)入：

import X, { myA as myX, Something as XSomething } from "./A"

總結(jié)：模塊的默認(rèn)導(dǎo)出通常是用在你期望該從模塊中獲取到任何想要的內(nèi)容；而命名導(dǎo)出則是用于一些有用的公共方法，但是這些方法并不總是必要的。

原文stackoverflow：原文地址，如有問題歡迎指出。

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

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

相關(guān)文章

  • 避免取值時出現(xiàn)Cannot read property 'xx' of unde

    摘要：由于是以空函數(shù)為代理對象，我們可以將執(zhí)行它，觸發(fā)。中會遍歷數(shù)組依次取值，如果發(fā)現(xiàn)無法繼續(xù)取值則，跳出循環(huán)。 本文來自我的博客，歡迎大家去GitHub上star我的博客 我們在取值特別是鏈?zhǔn)饺≈档臅r候，常常會遇到Cannot read property xx of undefined的錯誤，如何避免這種情況的發(fā)生呢？這里有幾種方法以供參考 使用成熟的庫方法 這是最簡單的一種手段：只用引入...

    fantix 評論0 收藏0

  • 寫了2年python，知道 if __name__ == '__main__'

    摘要：原因很簡單，因為中的代表的就是當(dāng)前執(zhí)行的模塊名。缺點就是主程序會受待執(zhí)行程序的影響，會出現(xiàn)待執(zhí)行程序中拋異?；蛑鲃油顺鰰?dǎo)致主程序也退出的尷尬問題?？偨Y(jié)來說就是，一個是在子進程中執(zhí)行代碼，一個是在當(dāng)前進程中執(zhí)行代碼。 showImg(https://segmentfault.com/img/remote/1460000018607395?w=502&h=318); 相信剛接觸Pytho...

    wangbinke 評論0 收藏0

  • Nginx Beginner's Guide

    摘要：主進程的主要目的就是讀取和評估配置，并且維護工作進程。工作進程實際上是處理請求。下一步，使用上一小節(jié)的服務(wù)器配置塊并將其修改為代理服務(wù)器配置。符合響應(yīng)的請求將會映射到文件夾。為了使新的配置文件生效，發(fā)送信號給 概述 ??譯文。參考官方文檔??這篇指南描述了如何啟動、停止nginx，重新加載配置，并且解釋了配置文件的結(jié)構(gòu)，描述了如何設(shè)置nginx去服務(wù)靜態(tài)內(nèi)容，如何配置nginx作為代理...

    yeyan1996 評論0 收藏0

  • You Don't Know Js 閱讀筆記

    摘要：回調(diào)傳遞函數(shù)是將函數(shù)當(dāng)做值并作為參數(shù)傳遞給函數(shù)。這個例子中就是因為事件綁定機制中的傳入了回調(diào)函數(shù)，產(chǎn)生了閉包，引用著所在的作用域，所以此處的數(shù)據(jù)無法從內(nèi)存中釋放。 javascript作用域 一門語言需要一套設(shè)計良好的規(guī)則來存儲變量，并且之后可以方便的找到這些變量，這逃規(guī)則被稱為作用域。 這也意味著當(dāng)我們訪問一個變量的時候，決定這個變量能否訪問到的依據(jù)就是這個作用域。 一、詞法作用域 ...

    wanglu1209 評論0 收藏0

  • '{ }'在不同上下文中的作用

    摘要：大括號的作用，在不同的上下文中差別很大以下觀點若有錯誤，請前輩及時指出一被當(dāng)做對象字面量如，外層的被賦值給了，這里的被當(dāng)做對象處理。本文參考你不知道的 大括號‘{ }’的作用，在不同的上下文中差別很大！以下觀點若有錯誤，請前輩及時指出！ 一、{ }被當(dāng)做對象字面量 如：var obj = { foo: function(){} };，外層的{...}被賦值給了obj，這里的{...}被...

    Reducto 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<