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

neuSnail 發布于2019-08-21 11:55 / 807人閱讀

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

在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務器，后者用于瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。

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

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

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

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

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

// A.js
export default 42

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

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

因為它總是會解析到A.js中默認的export default。

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

import { A } from "./A"

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

export const A = 42

而且，在明確聲明了命名導出后，那么在另一個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

要想上述代碼正確執行，你需要明確聲明每一個命名導出：

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

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

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

這里我們使用導入默認導出A，以及命名導出myA和Something。

我們甚至可以在導入的時候重命名導入：

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

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

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

云服務器 GPU云服務器 python中&039t&039 php中&amp039 attr&039&039checked&039&039 given&039&039

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

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

避免取值時出現Cannot read property &#039;xx&#039; of unde

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

fantix 2019-08-23 15:23 評論0 收藏0
寫了2年python，知道 if __name__ == &#039;__main__&#039;

摘要：原因很簡單，因為中的代表的就是當前執行的模塊名。缺點就是主程序會受待執行程序的影響，會出現待執行程序中拋異常或主動退出會導致主程序也退出的尷尬問題。總結來說就是，一個是在子進程中執行代碼，一個是在當前進程中執行代碼。 showImg(https://segmentfault.com/img/remote/1460000018607395?w=502&h=318); 相信剛接觸Pytho...

wangbinke 2019-07-31 10:11 評論0 收藏0
Nginx Beginner&#039;s Guide

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

yeyan1996 2019-07-25 14:24 評論0 收藏0
You Don&#039;t Know Js 閱讀筆記

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

wanglu1209 2019-08-19 17:26 評論0 收藏0
&#039;{ }&#039;在不同上下文中的作用

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

Reducto 2019-08-20 11:27 評論0 收藏0