ES6模組的import和export用法總結

2021-07-31 10:41:18 字數 1873 閱讀 3590

es6之前已經出現了js模組載入的方案,最主要的是commonjs和amd規範。commonjs主要應用於伺服器,實現同步載入,如nodejs。amd規範應用於瀏覽器,如requirejs,為非同步載入。同時還有cmd規範,為同步載入方案如seajs。

es6在語言規格的層面上,實現了模組功能,而且實現得相當簡單,完全可以取代現有的commonjs和amd規範,成為瀏覽器和伺服器通用的模組解決方案。

es6模組主要有兩個功能:export和import

export用於對外輸出本模組(乙個檔案可以理解為乙個模組)變數的介面

import用於在乙個模組中載入另乙個含有export介面的模組。

也就是說使用export命令定義了模組的對外介面以後,其他js檔案就可以通過import命令載入這個模組(檔案)。如下圖(假設a和b檔案在同一目錄下)

//

a.js

var ***="boy";

var echo=function(value)

export

//通過向大括號中新增***,echo變數並且export輸出,就可以將對應變數值以***、echo變數識別符號形式暴露給其他檔案而被讀取到

//不能寫成export ***這樣的方式,如果這樣就相當於export "boy",外部檔案就獲取不到該檔案的內部變數***的值,因為沒有對外輸出變數介面,只是輸出的字串。

// b.js

通過import獲取a.js檔案的內部變數,{}括號內的變數來自於a.js檔案export出的變數識別符號。

import from "./a.js"

console.log(***) // boy

echo(***) // boy

a.js檔案也可以按如下export語法寫,但不如上邊直觀,不太推薦。

// a.js

export var ***="

boy"

;export var echo=function(value)

//因為function echo(){}等價於 var echo=function(){}所以也可以寫成

export function echo(value)

以上是export與module的基本用法,再進行拓展學習

前面的例子可以看出,b.js使用import命令的時候,使用者需要知道a.js所暴露出的變數識別符號,否則無法載入。可以使用export default

命令,為模組指定預設輸出,這樣就不需要知道所要載入模組的變數名。

var ***="

boy"

;export default ***(***不能加大括號)

//原本直接export ***外部是無法識別的,加上default就可以了.但是乙個檔案內最多只能有乙個export default。

其實此處相當於為***變數值"boy"起了乙個系統預設的變數名default,自然default只能有乙個值,所以乙個檔案內不能有多個export default。

//

b.js

本質上,a.js檔案的export default輸出乙個叫做default的變數,然後系統允許你為它取任意名字。所以可以為import的模組起任何變數名,且不需要用大括號包含

import any

from

"./a.js

"import any12 from "./a.js"

console.log(any,any12)

//boy,boy

ES6的export模組 import模組

參考 es6的模組分為匯出 export 和匯入 import 兩個模組 1 es6模組自動開啟嚴格模式,不管你有沒有在模組頭部加use strict 2 模組可以匯入匯出各種型別的變數,如函式 物件 字串 陣列 布林值 類等 3 每個模組都有自己的上下文,每個模組內宣告的變數都是區域性變數,不會汙...

ES6模組的import和export用法總結

es6之前已經出現了js模組載入的方案,最主要的是commonjs和amd規範。commonjs主要應用於伺服器,實現同步載入,如nodejs。amd規範應用於瀏覽器,如requirejs,為非同步載入。同時還有cmd規範,為同步載入方案如seajs。es6在語言規格的層面上,實現了模組功能,而且實...

ES6模組的import和export用法總結

es6之前已經出現了js模組載入的方案,最主要的是commonjs和amd規範。commonjs主要應用於伺服器,實現同步載入,如nodejs。amd規範應用於瀏覽器,如requirejs,為非同步載入。同時還有cmd規範,為同步載入方案如seajs。es6在語言規格的層面上,實現了模組功能,而且實...