ES6，import時如何正確使用花括號

2022-06-16 03:51:08 字數 2021 閱讀 2811

在 es6 之前，社群制定了一些模組載入方案，最主要的有 commonjs 和 amd 兩種。前者用於伺服器，後者用於瀏覽器。es6 在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代 commonjs 和 amd 規範，成為瀏覽器和伺服器通用的模組解決方案。

而我們這裡要說的是在使用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.js：

import  from './a'
上面**生效的前提是，只有在模組a.js中有如下命名匯出為a的export name的**，也就是：

export const a = 42
而且，在明確宣告了命名匯出後，那麼在另乙個js中使用{}引用模組時，import時的模組命名是有意義的，如下：

// b.js


import  from './a'                 // 正確，因為a.js中有命名為a的export


import  from './a'               // 錯誤！因為a.js中沒有命名為mya的export


import  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,  from './a'
這裡我們使用匯入預設匯出a，以及命名匯出mya和something。

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

import x,  from './a'
總結：模組的預設匯出通常是用在你期望該從模組中獲取到任何想要的內容；而命名匯出則是用於一些有用的公共方法，但是這些方法並不總是必要的。

**（一句話總結上面的用法：是預設匯出（就是在defau{}裡面的），就要不加{}，其他就需要加{}）

es6 import 和 export細節說明

import匯入模組 export匯出模組 全部匯入 import people from example 有一種特殊情況，即允許你將整個模組當作單一物件進行匯入 該模組的所有匯出都會作為物件的屬性存在 import as example from example.js console.log ex...

基於es6 import 實現本地資料mock

import 動態載入相關資料 需求描述 前端專案中必定要有本地資料mock的模組，實現前後端分離，解決開發時因前後端介面的依賴而導致開發效率低下的問題。實現方案 這裡主要使用了es6 import 動態載入模組來實現mock功能。1 準備需要mock的json資料，命名為getlabeldetai...

關於ES6 import命令的乙個補充

其實，import命令乙個典型的表達是其後面的from子句中可以直接跟乙個路徑 也常常跟乙個省略.js副檔名的js模組檔名 此時，es6在解析時會到指定路徑下查詢乙個名字為index.js的檔案。注意 js檔案只能用index.js，換其他名字都會報錯！有關import命令的上述情況的乙個典型應用是...