es模組化匯入匯出

2021-10-11 00:20:30 字數 3311 閱讀 4084

在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...