在es6中每乙個模組即是乙個檔案,在檔案中定義的變數,函式,物件在外部是無法獲取的。如果你希望外部可以讀取模組當中的內容,就必須使用export來對其進行暴露(輸出)。先來看個例子,來對乙個變數進行模組化。我們先來建立乙個test.js檔案,來對這乙個變數進行輸出:
export
let myname=
"laowang"
;
然後可以建立乙個index.js檔案,以import的形式將這個變數進行引入:
import
from
"./test.js"
;console.
log(myname)
;//laowang
如果要輸出多個變數可以將這些變數包裝成物件進行模組化輸出:
let myname=
"laowang"
;let myage=90;
letmyfn
=function()
export
/********接收的**調整為
/
import
from
"./test.js"
;console.
log(
myfn()
);//我是laowang!今年90歲了
console.
log(myage)
;//90
console.
log(myname)
;//laowang
如果你不想暴露模組當中的變數名字,可以通過as來進行操作:
let myname=
"laowang"
;let myage=90;
letmyfn
=function()
export
/********接收的**調整為
/
import
from
"./test.js"
;console.
log(fn(
));//我是laowang!今年90歲了
console.
log(age)
;//90
console.
log(name)
;//laowang
也可以直接匯入整個模組,將上面的接收**修改為:
import
*as info from
"./test.js"
;//通過*來批量接收,as 來指定接收的名字
console.
log(info.fn(
));//我是laowang!今年90歲了
console.
log(info.age)
;//90
console.
log(info.name)
;//laowang
預設匯出(default
export)
乙個模組只能有乙個預設匯出,對於預設匯出,匯入的名稱可以和匯出的名稱不一致。
/********匯出
/
export
default
function()
/********引入
/
import myfn from
"./test.js"
;//注意這裡預設匯出不需要用{}。
console.
log(
myfn()
);//預設匯出乙個方法
可以將所有需要匯出的變數放入乙個物件中,然後通過default export進行匯出
/********匯出
/
export
default
, myname:
"laowang"
}
/********引入
/
import myobj from
"./test.js"
;console.
log(myobj.
myfn()
,myobj.myname)
;//預設匯出乙個方法 laowang
同樣也支援混合匯出
/********匯出
/
export
default
function()
export
var myname=
"laowang"
;
/********引入
/
import myfn,
from
"./test.js"
;console.
log(
myfn()
,myname)
;//預設匯出乙個方法 laowang
重新命名export和import
如果匯入的多個檔案中,變數名字相同,即會產生命名衝突的問題,為了解決該問題,es6為提供了重新命名的方法,當你在匯入名稱時可以這樣做:
/******************************test1.js**********************/
export
let myname=
"我來自test1.js"
;/******************************test2.js**********************/
export
let myname=
"我來自test2.js"
;/******************************index.js**********************/
import
from
"./test1.js"
;import
from
"./test2.js"
;console.
log(name1)
;//我來自test1.js
console.
log(name2)
;//我來自test1.js
Js模組化匯入匯出
1.js var a 1 varb function module.exports 1 1.js var m1 require 1.js console.log m1.a 1 m1.b 1 1 2.js import m1 from 1.js console.log m1.a 1 m1.b 1 or...
前端模組化 匯入匯出
1 commonjs實現匯入匯出 匯出 通過乙個物件匯出 module.exports demo a,b 匯入 let require modulea 等價於let ma require modulea let test ma.test 2 es的匯入匯出 1 export的基本使用 export指...
Vue模組化開發 ES6模組化的匯入與匯出
常用的模組化規範 commonjs amd cmd 也有es6的modules 模組化的核心 匯出和匯入 採用匿名函式的形式,在每乙個js檔案中,都封裝乙個匿名函式,並在其內部定義乙個物件,將裡面的內容匯出,方便其他檔案復用 匯出 var modulea function var name 小明 v...