八、ES6之模組化
阿新 • • 發佈：2022-03-06
ES6 引入了模組化， ES6 的模組化分為匯出（export） @與匯入（import）兩個模組。
ES6模組化特點：
（1）ES6 的模組自動開啟嚴格模式，不管你有沒有在模組頭部加上 use strict;。
（2） 模組中可以匯入和匯出各種型別的變數，如函式，物件，字串，數字，布林值，類等。
（3） 每個模組都有自己的上下文，每一個模組內宣告的變數都是區域性變數，不會汙染全域性作用域。
（4） 每一個模組只加載一次（是單例的）， 若再去載入同目錄下同檔案，直接從記憶體中讀取。
一、export與import基本使用
export 命令用於匯出， import 命令 用於匯入：
module1.js
// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};
test1.js
// import { name,sex } from "../export/module1.js";
// console.log(name); //孫悟空
// console.log(sex); //男
//或匯入部分變數
import { sex } from "../export/module1.js";
console.log(sex); //男
Demo01.html
<!-- module1.js:模組程式碼,通過export暴露變數 test1.js:匯入module1.js提供的變數 Demo01.html:引入test1.js內容 --> <script type="module" src="import/test1.js"></script>
二、網頁中直接import模組
module1.js
// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>網頁中import模組</title> </head> <body> <h1>姓名:<span id="spanName"></span></h1> <h1>性別:<span id="spanSex"></span></h1> </body> </html> <!-- module1.js:模組程式碼,通過export暴露變數 Demo02.html:匯入module1.js提供的變數 --> <script type="module"> import {name,sex} from "./export/module1.js"; document.getElementById("spanName").innerHTML = name; document.getElementById("spanSex").innerHTML = sex; </script>
三、as的使用
（1）as在export中的用法：變數使用別名,隱藏模組內部的變數
module2.js：
let name = "孫悟空";
let sex = "男";
export {name as expName,sex as expSex};
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>as在export中的用法</title>
</head>
<body>
<h1>姓名:<span id="spanName"></span></h1>
<h1>性別:<span id="spanSex"></span></h1>
</body>
</html>
<!--
module2.js:模組程式碼,通過export暴露變數(變數使用別名,隱藏模組內部的變數)
Demo03.html:匯入module2.js提供的變數
-->
<script type="module">
import {expName,expSex} from "./export/module2.js";
document.getElementById("spanName").innerHTML = expName;
document.getElementById("spanSex").innerHTML = expSex;
</script>
（2）as在import中的用法：匯入多個模組的變數,使用as解決命名衝突。
module1.js
// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};
module3.js
// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "豬八戒";
let sex = "男";
export {name,sex};
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>as在import中的用法</title>
</head>
<body>
<h1>姓名:<span id="spanName1"></span></h1>
<h1>性別:<span id="spanSex1"></span></h1>
<hr />
<h1>姓名:<span id="spanName2"></span></h1>
<h1>性別:<span id="spanSex2"></span></h1>
</body>
</html>
<!--
module1.js:模組程式碼(暴露name,sex)
module3.js:模組程式碼(暴露name,sex)
Demo04.html:匯入兩個模組的變數,使用as解決命名衝突
-->
<script type="module">
import {name as name1,sex as sex1} from "./export/module1.js";
import {name as name2,sex as sex2} from "./export/module3.js";
document.getElementById("spanName1").innerHTML = name1;
document.getElementById("spanSex1").innerHTML = sex1;
document.getElementById("spanName2").innerHTML = name2;
document.getElementById("spanSex2").innerHTML = sex2;
</script>
四、匯入模組中的函式和類
（1）匯入模組中的函式
module4.js
// function Add(...items)
// {
// let sum = 0;
// for(let item of items)
// {
// sum += item;
// }
// return sum;
// }
// export{Add};
//或
export function Add(...items)
{
let sum = 0;
for(let item of items)
{
sum += item;
}
return sum;
};
HTML
<script type="module">
//匯入函式
import {Add} from './export/module4.js';
let result = Add(1,2,3,4,5);
console.log(result); //15
</script>
（2）匯入模組中的類：
module4.js
// class Student
// {
// constructor(stuno,stuname)
// {
// this.stuno = stuno;
// this.stuname = stuname;
// }
// sayHi()
// {
// console.log("大家好,我是"+this.stuname+",我的學號是"+this.stuno);
// }
// }
// export {Student};
//或
export class Student
{
constructor(stuno,stuname)
{
this.stuno = stuno;
this.stuname = stuname;
}
sayHi()
{
console.log("大家好,我是"+this.stuname+",我的學號是"+this.stuno);
}
}
HTML
<script type="module">
//匯入類
import {Student} from './export/module4.js';
let stu = new Student("001","孫悟空");
stu.sayHi();
</script>
五、import的特點
module5.js
let name = "孫悟空";
let sex = "男";
let emp = {name:"孫悟空",sex:"男"};
export {name,sex,emp};
HTML
<script type="module">
//只讀特點
//import {name,sex,emp} from './export/module5.js';
//(1)普通型別的值不能改變
// name = "豬八戒"; //報錯
// sex = "男";//報錯
//(2)不能直接改變物件
//emp = {name:"豬八戒",sex:"男"};
//(3)可以改變變數的屬性值
// emp.name = "豬八戒";
// emp.sex = "男";
//單例特點
//(1)下面兩句import只會執行一次
//import {name,sex,emp} from './export/module5.js';
//import {name,sex,emp} from './export/module5.js';
//(2)下面兩句import相當於 import {name,sex} from './export/module5.js';
// import {name} from './export/module5.js';
// import {sex} from './export/module5.js';
//靜態特點
//(1)不支援表示式
//import {"na"+"me"} from './export/module5.js'; //報錯
//(2)不支援動態匯入,以下程式碼也會報錯
// if(true)
// import {name,sex} from './export/module5.js';
// else
// import {emp} from './export/module5.js';
</script>
六、模組的整體import載入
module5.js
let name = "孫悟空";
let sex = "男";
let emp = {name:"孫悟空",sex:"男"};
export {name,sex,emp};
HTML
<script type="module">
//載入module5中所有暴露出來的內容
import * as test from './export/module5.js';
console.log(test.name);
console.log(test.emp.name);
</script>
七、export default命令
使用import命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入，export default 向外暴露的
成員，可以使用任意變數來接收，解決上述問題。
export default 命令特點:
（1）在一個檔案或模組中，export、import 可以有多個，export default 僅有一個。
（2）export default 中的 default 是對應的匯出介面變數。
（3）匯入匯出不需要{}符號。
（4）export default 向外暴露的成員，可以使用任意變數來接收。
（1）export default匯出變數
module6.js
//export default匯出變數不需要var
//export var a = 10; // 正確
// 正確
var a = 10;
export default a;
// 錯誤
//export default var a = 10;
HTML
<script type="module">
//接受預設變數
import b from './export/module6.js'; //此處可以用任意變數(b)來接受
console.log(b);
</script>
（2）export default匯出函式
module6.js
function Add(...items)
{
let sum = 0;
for(let item of items)
{
sum += item;
}
return sum;
}
//此處Add不需要{}
export default Add
HTML
<script type="module">
//接受預設函式
import sum from './export/module6.js'; //此處可以用任意變數(sum)來接受
let result = sum(1,2,3,4,5);
console.log(result);
</script>
八、export與import的複合寫法
export 與 import 可以在同一模組使用，我們稱為複合使用。
（1）複合使用的基本語法
module1.js
// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};
module7.js
//複合使用的語法
let emp = {name:"豬八戒",sex:"男"};
export { name, sex } from './module1.js';
// //上面的export等於如下：
// // import { name, sex } from './module1.js';
// // export { name, sex };
export {emp}
HTML
<script type="module">
//匯入module7,在module7中匯出module1內容
import {name,sex,emp} from "./export/module7.js";
console.log(name);
console.log(emp.name);
</script>
（2）複合寫法實現介面改名
module1.js
// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};
module7.js
//複合寫法實現介面改名
let emp = {name:"豬八戒",sex:"男"};
export { name as myname, sex as mysex } from './module1.js';
export {emp}
HTML
<script type="module">
//匯入改名後的變數
// import {myname,mysex,emp} from "./export/module7.js";
// console.log(myname);
// console.log(emp.name);
</script>
（3）轉換為預設介面
module1.js
// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};
module7.js
// 轉換為預設介面
let emp = {name:"豬八戒",sex:"男"};
export {name as default,sex} from './module1.js';
export {emp}
HTML
<script type="module">
//匯入修改成預設介面的name,使用abc接收
import abc from "./export/module7.js";
import {sex,emp} from "./export/module7.js";
console.log(abc);
console.log(emp.name);
</script>
（4）預設介面轉換為命名介面
module6.js
function Add(...items)
{
let sum = 0;
for(let item of items)
{
sum += item;
}
return sum;
}
//此處Add不需要{}
export default Add
module7.js
//將預設介面轉換為命名介面
export {default as sum} from './module6.js';
HTML
<script type="module">
//匯入預設介面轉換成的sum介面
import {sum} from "./export/module7.js";
let result = sum(1,2,3,4,5);
console.log(result);
</script>
（5）匯出所有介面
module1.js
// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};
module7.js
//匯出所有
export * from './module1.js'
HTML
<script type="module">
//接收匯出的所有介面
import {name,sex} from "./export/module7.js";
console.log(name);
console.log(sex);
</script>
本文來自部落格園，作者：農碼一生，轉載請註明原文連結：https://www.cnblogs.com/wml-it/p/15967807.html
技術的發展日新月異，隨著時間推移，無法保證本部落格所有內容的正確性。如有誤導，請大家見諒，歡迎評論區指正！
個人開原始碼連結,歡迎點亮:
GitHub:https://github.com/ITMingliang
Gitee:https://gitee.com/mingliang_it
GitLab:https://gitlab.com/ITMingliang
進開發學習交流群：