資訊專欄INFORMATION COLUMN
摘要：在之前，社區(qū)制定了一些模塊加載方案，最主要的有和兩種。而我們這里要說(shuō)的是在使用語(yǔ)法引用模塊時(shí)，如何正確使用。也就是在這種不使用來(lái)引用模塊的情況下，模塊時(shí)的命名是隨意的，即如下三種引用命名都是正確的因?yàn)樗偸菚?huì)解析到中默認(rèn)的。
在 ES6 之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務(wù)器，后者用于瀏覽器。ES6 在語(yǔ)言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡(jiǎn)單，完全可以取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。
上文引用自：阮一峰老師的ECMAScript 6 入門。
而我們這里要說(shuō)的是在使用import語(yǔ)法引用模塊時(shí)，如何正確使用{}。
假如有一個(gè)B.js，想要通過(guò)import語(yǔ)法引用模塊A.js，那么可以這么寫：
// B.js import A from "./A"
而上面的代碼生效的前提是，只有在如下A.js中有默認(rèn)導(dǎo)出的export default語(yǔ)法時(shí)才會(huì)生效。也就是：
// A.js export default 42
在這種不使用{}來(lái)引用模塊的情況下，import模塊時(shí)的命名是隨意的，即如下三種引用命名都是正確的：
// B.js import A from "./A" import MyA from "./A" import Something from "./A"
因?yàn)樗偸菚?huì)解析到A.js中默認(rèn)的export default。
而下面是使用了花括號(hào)命名的方式{A}來(lái)導(dǎo)入A.js：
import { A } from "./A"
上面代碼生效的前提是，只有在模塊A.js中有如下命名導(dǎo)出為A的export name的代碼，也就是：
export const A = 42
而且，在明確聲明了命名導(dǎo)出后，那么在另一個(gè)js中使用{}引用模塊時(shí)，import時(shí)的模塊命名是有意義的，如下：
// B.js
import { A } from "./A" // 正確，因?yàn)锳.js中有命名為A的export
import { myA } from "./A" // 錯(cuò)誤！因?yàn)锳.js中沒(méi)有命名為myA的export
import { Something } from "./A" // 錯(cuò)誤！因?yàn)锳.js中沒(méi)有命名為Something的export
要想上述代碼正確執(zhí)行，你需要明確聲明每一個(gè)命名導(dǎo)出：
// A.js export const A = 42 export const myA = 43 export const Something = 44
ps: 一個(gè)模塊中只能有一個(gè)默認(rèn)導(dǎo)出export default，但是卻可以有任意命名導(dǎo)出（0個(gè)、1個(gè)、多個(gè)），你也可以如下，一次性將他們導(dǎo)入：
// B.js
import A, { myA, Something } from "./A"
這里我們使用導(dǎo)入默認(rèn)導(dǎo)出A，以及命名導(dǎo)出myA和Something。
我們甚至可以在導(dǎo)入的時(shí)候重命名導(dǎo)入：
import X, { myA as myX, Something as XSomething } from "./A"
總結(jié)：模塊的默認(rèn)導(dǎo)出通常是用在你期望該從模塊中獲取到任何想要的內(nèi)容；而命名導(dǎo)出則是用于一些有用的公共方法，但是這些方法并不總是必要的。
原文stackoverflow：原文地址，如有問(wèn)題歡迎指出。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87286.html
摘要：由于是以空函數(shù)為代理對(duì)象，我們可以將執(zhí)行它，觸發(fā)。中會(huì)遍歷數(shù)組依次取值，如果發(fā)現(xiàn)無(wú)法繼續(xù)取值則，跳出循環(huán)。 本文來(lái)自我的博客，歡迎大家去GitHub上star我的博客 我們?cè)谌≈堤貏e是鏈?zhǔn)饺≈档臅r(shí)候，常常會(huì)遇到Cannot read property xx of undefined的錯(cuò)誤，如何避免這種情況的發(fā)生呢？這里有幾種方法以供參考 使用成熟的庫(kù)方法 這是最簡(jiǎn)單的一種手段：只用引入...
摘要：原因很簡(jiǎn)單，因?yàn)橹械拇淼木褪钱?dāng)前執(zhí)行的模塊名。缺點(diǎn)就是主程序會(huì)受待執(zhí)行程序的影響，會(huì)出現(xiàn)待執(zhí)行程序中拋異?；蛑鲃?dòng)退出會(huì)導(dǎo)致主程序也退出的尷尬問(wèn)題?？偨Y(jié)來(lái)說(shuō)就是，一個(gè)是在子進(jìn)程中執(zhí)行代碼，一個(gè)是在當(dāng)前進(jìn)程中執(zhí)行代碼。 showImg(https://segmentfault.com/img/remote/1460000018607395?w=502&h=318); 相信剛接觸Pytho...
摘要：主進(jìn)程的主要目的就是讀取和評(píng)估配置，并且維護(hù)工作進(jìn)程。工作進(jìn)程實(shí)際上是處理請(qǐng)求。下一步，使用上一小節(jié)的服務(wù)器配置塊并將其修改為代理服務(wù)器配置。符合響應(yīng)的請(qǐng)求將會(huì)映射到文件夾。為了使新的配置文件生效，發(fā)送信號(hào)給 概述 ??譯文。參考官方文檔??這篇指南描述了如何啟動(dòng)、停止nginx，重新加載配置，并且解釋了配置文件的結(jié)構(gòu)，描述了如何設(shè)置nginx去服務(wù)靜態(tài)內(nèi)容，如何配置nginx作為代理...
摘要：回調(diào)傳遞函數(shù)是將函數(shù)當(dāng)做值并作為參數(shù)傳遞給函數(shù)。這個(gè)例子中就是因?yàn)槭录壎C(jī)制中的傳入了回調(diào)函數(shù)，產(chǎn)生了閉包，引用著所在的作用域，所以此處的數(shù)據(jù)無(wú)法從內(nèi)存中釋放。 javascript作用域 一門語(yǔ)言需要一套設(shè)計(jì)良好的規(guī)則來(lái)存儲(chǔ)變量，并且之后可以方便的找到這些變量，這逃規(guī)則被稱為作用域。 這也意味著當(dāng)我們?cè)L問(wèn)一個(gè)變量的時(shí)候，決定這個(gè)變量能否訪問(wèn)到的依據(jù)就是這個(gè)作用域。 一、詞法作用域 ...
摘要：大括號(hào)的作用，在不同的上下文中差別很大以下觀點(diǎn)若有錯(cuò)誤，請(qǐng)前輩及時(shí)指出一被當(dāng)做對(duì)象字面量如，外層的被賦值給了，這里的被當(dāng)做對(duì)象處理。本文參考你不知道的 大括號(hào)‘{ }’的作用，在不同的上下文中差別很大！以下觀點(diǎn)若有錯(cuò)誤，請(qǐng)前輩及時(shí)指出！ 一、{ }被當(dāng)做對(duì)象字面量 如：var obj = { foo: function(){} };，外層的{...}被賦值給了obj，這里的{...}被...
閱讀 1986·2021-11-25 09:43
閱讀 3763·2021-11-24 10:32
閱讀 1269·2021-10-13 09:39
閱讀 2449·2021-09-10 11:24
閱讀 3424·2021-07-25 21:37
閱讀 3547·2019-08-30 15:56
閱讀 931·2019-08-30 15:44
閱讀 1518·2019-08-30 13:18
