怎么導(dǎo)入導(dǎo)出Javascript模塊呢

筆者開始學(xué)習(xí) Javascript 的時候，對模塊不太懂，不知道怎么導(dǎo)入模塊，導(dǎo)出模塊，就胡亂一通試 比如import xx from 'test.js'不起作用，就加個括號import {xx} from 'test.js' 反正總是靠蒙，總有一種寫法是對的，其實還是沒有理解，還是不懂 尤其是在當(dāng)初寫www.helloworld.net網(wǎng)站的時候，一遇到這種問題，就懵逼了，尤其是引入第三方庫的時候 這種情況下更多，此篇文章也是為了怕以后忘記，自查用的，也希望能幫助更多的朋友，此篇文章只是針對 ES6 的模塊相關(guān)知識

首先要知道 export，import 是什么

我們知道，JS 模塊導(dǎo)入導(dǎo)出，使用import,export這兩個關(guān)鍵字

export用于對外輸出本模塊

import用于導(dǎo)入模塊

也就是說使用 export 導(dǎo)出一個模塊之后，其它文件就可以使用 import 導(dǎo)入相應(yīng)的模塊了

下面我們具體看看， import 和 export 到底怎么用？怎么導(dǎo)出模塊（比如變量，函數(shù)，類，對象等）

1 導(dǎo)出單個變量

//a.js 導(dǎo)出一個變量，語法如下
export var site = "www.helloworld.net"

//b.js 中使用import 導(dǎo)入上面的變量
import { site } from "/.a.js" //路徑根據(jù)你的實際情況填寫
console.log(site)//輸出：www.helloworld.net

2 導(dǎo)出多個變量

上面的例子是導(dǎo)出單個變量，那么如何導(dǎo)出多個變量呢

 //a.js 中定義兩個變量，并導(dǎo)出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld開發(fā)者社區(qū)"
 
 //將上面的變量導(dǎo)出
 export { siteUrl ,siteName }  
 
 
 
 // b.js 中使用這兩個變量
 import { siteUrl , siteName } from "/.a.js" //路徑根據(jù)你的實際情況填寫

 console.log(siteUrl)//輸出：www.helloworld.net
 console.log(siteName)//輸出：helloworld開發(fā)者社區(qū)

3 導(dǎo)出函數(shù)

導(dǎo)出函數(shù)和導(dǎo)出變量一樣，需要添加{ }

//a.js 中定義并導(dǎo)出一個函數(shù)
function sum(a, b) {
    return a + b
}
//將函數(shù)sum導(dǎo)出
export { sum } 


//b.js 中導(dǎo)入函數(shù)并使用
import { sum } from "/.a.js" //路徑根據(jù)你的實際情況填寫
console.log( sum(4,6) ) //輸出：10

4 導(dǎo)出對象

js 中一切皆對象，所以對象一定是可以導(dǎo)出的，并且有兩種寫法

4.1 第一種寫法

使用export default關(guān)鍵字導(dǎo)出，如下

//a.js 中，定義對象并導(dǎo)出, 注意，使用export default 這兩個關(guān)鍵字導(dǎo)出一個對象
export default {
    siteUrl:'www.helloworld.net',
    siteName:'helloworld開發(fā)者社區(qū)'
}


//b.js 中導(dǎo)入并使用
import obj from './a.js'   //路徑根據(jù)你的實際情況填寫
console.log(obj.siteUrl)//輸出：www.helloworld.net
console.log(obj.siteName)//輸出：helloworld開發(fā)者社區(qū)

4.2 第二種寫法

同樣是使用export default關(guān)鍵字，如下

//a.js 中定義對象，并在最后導(dǎo)出
var obj = {
   siteUrl:'www.helloworld.net',
    siteName:'helloworld開發(fā)者社區(qū)'
}

export default obj//導(dǎo)出對象obj


//b.js 中導(dǎo)入并使用
import obj from './a.js'   //路徑根據(jù)你的實際情況填寫
console.log(obj.siteUrl)//輸出：www.helloworld.net
console.log(obj.siteName)//輸出：helloworld開發(fā)者社區(qū)

5 導(dǎo)出類

導(dǎo)出類與上面的導(dǎo)出對象類似，同樣是用export default關(guān)鍵字，同樣有兩種寫法

5.1 第一種寫法

//a.js 中定義一個類并直接導(dǎo)出
export default class Person {
    //類的屬性
    site = "www.helloworld.net"

    //類的方法
    show(){
        console.log(this.site)
    }
}


//b.js 中導(dǎo)入并使用
//導(dǎo)入類
import Person from './a.js'

//創(chuàng)建類的一個對象person
let person = new Person()

//調(diào)用類的方法
person.show()  //輸出：www.helloworld.net

5.2 第二種寫法

//a.js 中定義一個類，最后導(dǎo)出
class Person {
    //類的屬性
    site = "www.helloworld.net"

    //類的方法
    show(){
        console.log(this.site)
    }
}

//導(dǎo)出這個類
export default Person 



//b.js 中導(dǎo)入并使用
//導(dǎo)入類
import Person from './a.js'

//創(chuàng)建類的一個對象person
let person = new Person()

//調(diào)用類的方法
person.show()  //輸出：www.helloworld.net

小結(jié)

下面我們簡單總結(jié)一下 export與export default的區(qū)別

export 與 export default 均可用于導(dǎo)出常量、函數(shù)、文件、模塊等

可以在其它文件或模塊中通過 import+(常量 | 函數(shù) | 文件 | 模塊) 名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M行使用

export default 后面不能跟 const 或 let 的關(guān)鍵詞

export、import 可以有多個，export default 僅有一個。

通過 export 方式導(dǎo)出，在導(dǎo)入時要加 { }，export default 則不需要

export 具名導(dǎo)出 xxx ，export default 匿名。區(qū)別在于導(dǎo)入的時候，export 需要一樣的名稱才能匹配，后者無論取什么名都可以。

模塊化管理中一個文件就是一個模塊，export 可以導(dǎo)出多個方法和變量，export default 只能導(dǎo)出當(dāng)前模塊，一個 js 文件中只支持出現(xiàn)一個

對于import,export,export default，他們的用法上面的例子已經(jīng)很詳細(xì)的列出了，忘記的時候，可以當(dāng)作參考看看 最重要的還是要明白為什么要這么寫，實在不明白記住就行了。

審核編輯：劉清