天天看點

export,import ,export default

es6子產品主要有兩個功能:export和import

export用于對外輸出本子產品(一個檔案可以了解為一個子產品)變量的接口

import用于在一個子產品中加載另一個含有export接口的子產品。

也就是說使用export指令定義了子產品的對外接口以後,其他js檔案就可以通過import指令加載這個子產品(檔案)。這幾個都是es6的文法。

一個a.js檔案有如下代碼:

在其它檔案裡引用如下:

export,import ,export default
export,import ,export default

上面的例子是導出單個變量的寫法,如果是導出多個變量就應該按照下邊的方法,用大括号包裹着需要導出的變量:

在其他檔案裡引用如下:

export,import ,export default
export,import ,export default

如果導出的是個函數呢,那應該怎麼用呢,其實一樣,如下

export,import ,export default
export,import ,export default

看完上面這幾個例子,想必你一定了解了如何使用export,import,如果還是不懂可以自己動手試一試。上面講的是export和import,但是export跟export default 有什麼差別呢?如下:

1、export與export default均可用于導出常量、函數、檔案、子產品等

2、你可以在其它檔案或子產品中通過import+(常量 | 函數 | 檔案 | 子產品)名的方式,将其導入,以便能夠對其進行使用

3、在一個檔案或子產品中,export、import可以有多個,export default僅有一個

4、通過export方式導出,在導入時要加{ },export default則不需要

這樣來說其實很多時候export與export default可以實作同樣的目的,隻是用法有些差別。注意第四條,通過export方式導出,在導入時要加{ },export default則不需要。使用export default指令,為子產品指定預設輸出,這樣就不需要知道所要加載子產品的變量名。

export,import ,export default
export,import ,export default

再看第3條,在一個檔案或子產品中,export、import可以有多個,export default僅有一個,也就是說如下代碼:

也可以寫成如下,也是可以的,import跟他類似。

一個人如果不想輸,就要不斷學好眼前的東西,它們将來都會大有用處…