技術文章 » 徹底弄懂Javascript模組匯入匯出

徹底弄懂Javascript模組匯入匯出

2022-12-24 18:00:20

筆者開始學習Javascript的時候，對模組不太懂，不知道怎麼匯入模組，匯出模組，就胡亂一通試

比如 import xx from 'test.js' 不起作用，就加個括號 import {xx} from 'test.js'

反正總是靠蒙，總有一種寫法是對的，其實還是沒有理解，還是不懂

尤其是在當初寫 www.helloworld.net 網站的時候，一遇到這種問題，就懵逼了，尤其是引入第三方庫的時候

這種情況下更多，此篇文章也是為了怕以後忘記，自查用的，也希望能幫助更多的朋友，此篇文章只是針對ES6的模組相關知識

首先要知道export，import 是什麼

我們知道，JS 模組匯入匯出，使用 import , export 這兩個關鍵字

  • export 用於對外輸出本模組
  • import 用於匯入模組

也就是說使用 export 匯出一個模組之後，其它檔案就可以使用 import 匯入相應的模組了

下面我們具體看看， import 和 export 到底怎麼用？怎麼匯出模組（比如變數，函數，類，物件等）

1 匯出單個變數

//a.js 匯出一個變數，語法如下
export var site = "www.helloworld.net"

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

2 匯出多個變數

上面的例子是匯出單個變數，那麼如何匯出多個變數呢

 //a.js 中定義兩個變數，並匯出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld開發者社群"
 
 //將上面的變數匯出
 export { siteUrl ,siteName }  
 
 
 
 // b.js 中使用這兩個變數
 import { siteUrl , siteName } from "/.a.js" //路徑根據你的實際情況填寫

 console.log(siteUrl)	//輸出： www.helloworld.net
 console.log(siteName)	//輸出： helloworld開發者社群

3 匯出函數

匯出函數和匯出變數一樣，需要新增{ }

//a.js 中定義並匯出一個函數
function sum(a, b) {
    return a + b
}
//將函數sum匯出
export { sum } 


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

4 匯出物件

js中一切皆物件，所以物件一定是可以匯出的，並且有兩種寫法

4.1 第一種寫法

使用 export default 關鍵字彙出，如下

//a.js 中，定義物件並匯出, 注意，使用export default 這兩個關鍵字彙出一個物件
export default {
    siteUrl:'www.helloworld.net',
    siteName:'helloworld開發者社群'
}


//b.js 中匯入並使用
import obj from './a.js'   	//路徑根據你的實際情況填寫
console.log(obj.siteUrl)	//輸出：www.helloworld.net
console.log(obj.siteName)	//輸出：helloworld開發者社群

4.2 第二種寫法

同樣是使用export default 關鍵字，如下

//a.js 中定義物件，並在最後匯出
var obj = {
   	siteUrl:'www.helloworld.net',
    siteName:'helloworld開發者社群'
}

export default obj	//匯出物件obj


//b.js 中匯入並使用
import obj from './a.js'   	//路徑根據你的實際情況填寫
console.log(obj.siteUrl)	//輸出：www.helloworld.net
console.log(obj.siteName)	//輸出：helloworld開發者社群

5 匯出類

匯出類與上面的匯出物件類似，同樣是用 export default 關鍵字，同樣有兩種寫法

5.1 第一種寫法

//a.js 中定義一個類並直接匯出
export default class Person {
    //類的屬性
    site = "www.helloworld.net"

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


//b.js 中匯入並使用
//匯入類
import Person from './a.js'

//建立類的一個物件person
let person = new Person()

//呼叫類的方法
person.show()  	//輸出：www.helloworld.net

5.2 第二種寫法

//a.js 中定義一個類，最後匯出
class Person {
    //類的屬性
    site = "www.helloworld.net"

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

//匯出這個類
export default Person 



//b.js 中匯入並使用
//匯入類
import Person from './a.js'

//建立類的一個物件person
let person = new Person()

//呼叫類的方法
person.show()  	//輸出：www.helloworld.net

小結

下面我們簡單總結一下

export與export default的區別

  • export與export default均可用於匯出常數、函數、檔案、模組等
  • 可以在其它檔案或模組中通過import+(常數 | 函數 | 檔案 | 模組)名的方式，將其匯入，以便能夠對其進行使用
  • export default後面不能跟const或let的關鍵詞
  • export、import可以有多個，export default僅有一個。
  • 通過export方式匯出，在匯入時要加 { }，export default則不需要
  • export具名匯出xxx ，export default匿名。區別在於匯入的時候，export需要一樣的名稱才能匹配，後者無論取什麼名都可以。
  • 模組化管理中一個檔案就是一個模組，export可以匯出多個方法和變數，export default只能匯出當前模組，一個js檔案中只支援出現一個

對於 import ,export , export default ，他們的用法上面的例子已經很詳細的列出了，忘記的時候，可以當作參考看看

最重要的還是要明白為什麼要這麼寫，實在不明白記住就行了。