Javascript模塊導入導出的方法是什么

這篇“Javascript模塊導入導出的方法是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Javascript模塊導入導出的方法是什么”文章吧。

首先要知道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

JavaScript的作用是什么

1、能夠嵌入動態文本于HTML頁面。

2、對瀏覽器事件做出響應。

3、讀寫HTML元素。

4、在數據被提交到服務器之前驗證數據。

5、檢測訪客的瀏覽器信息。

6、控制cookies，包括創建和修改等。

7、基于Node.js技術進行服務器端編程。

以上就是關于“Javascript模塊導入導出的方法是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。