js導入導出

.js導入導出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js導入導出</title>
</head>



<body>
 <div>
     <button id="btn" >點我展示信息</button>
     </div>
 <!-- 導入showMessage.js文件的全部內容 -->
 <script src="showMessage.js"></script>

 <script>
    document.getElementById("btn").onclick = function(){
        complexMessage('bbbbb');
    }
</script>
</body>


</html>

//簡單的展示信息
function simpleMessage(msg){
    console.log(msg)
}

//復雜的展示信息
function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

//簡單的展示信息

export function simpleMessage(msg){

console.log(msg)

}

//復雜的展示信息

export function complexMessage(msg){

console.log(new Date()+": "+msg)

}

export命令可以按需導出，如果需要批量導出則可以添加

export{ simpleMessage,complexMessage};

導出時可以用別名

import { messageMethods as cm } from './showMessage.js’

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js導入導出</title>
</head>



<body>
 <div>
     <button id="btn" >點我展示信息</button>
     </div>


 <script type="module">
     import { complexMessage as cm } from "./showMessage.js";

     document.getElementById("btn").onclick = function(){
        cm('bbbbb');
    }
</script>
</body>


</html>

//簡單的展示信息
 function simpleMessage(msg){
    console.log(msg)
}

//復雜的展示信息
 function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

export{  simpleMessage ,complexMessage }

默認導出

//簡單的展示信息
export function simpleMessage(msg){
    console.log(msg)
}

//復雜的展示信息
export function complexMessage(msg){
    console.log(new Date()+": "+msg)
}
export default {  simpleMessage ,complexMessage }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js導入導出</title>
</head>



<body>
 <div>
     <button id="btn" >點我展示信息</button>
     </div>


 <script type="module">
     import xx from "./showMessage.js";

     document.getElementById("btn").onclick = function(){
        xx.complexMessage('bbbbb');
    }
</script>
</body>


</html>

使用默認導出后，那么xx.可以帶出函數。

一次知道javascript有模塊的概念通常都是使用<script>標簽進行引入，不過只能在html文件上使用

增加的模塊就如同php里的include、require可以使用引入的內容，

不過php是默認引入的文件內部全部可用，而javascript則是選擇導出、選擇導入，只可以使用引入的函數、變量、對象

codecademy上理解javascript module部分

JavaScript中的模塊是可重復使用的代碼段，可以從一個程序導出并導入到另一個程序中使用。

module.exports將模塊導出用于其他程序。

module.export = 變量; || module.export = {對象內屬性方法} require() 導入當前程序中使用的模塊。 conste 變量 = require('引入的文件相對地址帶后綴名.js'); ES6引入了一個更靈活，更簡單的語法來導出模塊：

默認導出用于export default導出JavaScript對象，函數和原始數據類型。

export default 變量; 命名導出使用export關鍵字來導出變量中的數據。 export {變量名、對象名、函數}; 命名導出可以用as關鍵字別名。 export {變量名 as 別名、對象名、函數}; import 是導入任何對象，函數或數據類型的關鍵字。 import 變量 from '文件相對地址（不要文件后綴）';

者開始學習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 ，他們的用法上面的例子已經很詳細的列出了，忘記的時候，可以當作參考看看

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

在線咨詢

上一篇：新老站一網打盡，快速提高你的網站收錄
下一篇：HTML前端常用標簽(復習)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商