ES6模組的import和export用法總結

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 var ***="
boy"
;export var echo=function(value)
//因為function echo(){}等價於 var echo=function(){}所以也可以寫成
export function echo(value)

前面的例子可以看出，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在語言規格的層面上，實現了模組功能，而且實...