ES6基礎語法之模塊化介紹
更新時間：2022年05月02日 13:47:11 作者：農碼一生
這篇文章介紹了ES6基礎語法之模塊化，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
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只會執(zhí)行一次
//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';
//靜態(tài)特點
//(1)不支持表達式
//import {"na"+"me"} from './export/module5.js'; //報錯
//(2)不支持動態(tài)導入,以下代碼也會報錯
// 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 AddHTML
<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 Addmodule7.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>到此這篇關于ES6基礎語法之模塊化的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章介紹了js中值類型和引用類型的區(qū)別，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
Flash對聯廣告的關閉按鈕討論...2007-01-01
對于許多想學習 JavaScript 的朋友來說，無疑如何選擇入門的書籍是他們最頭疼的問題，或許也是他們一直畏懼，甚至放棄學習 JavaScript 的理由。2008-06-06
這篇文章主要介紹了盤點30個經典常用的JavaScript知識點,為大家總結一篇日常經常使用可能還不知道的點,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了JavaScript中的prototype原型學習指南,包括原型鏈與原型繼承等重要知識,需要的朋友可以參考下2016-05-05
這篇文章給大家分享了關于JavaScript事件循環(huán)機制的相關知識點內容，有興趣的朋友們可以學習參考下。2018-09-09
這篇文章主要為大家介紹了javascript的防抖和節(jié)流，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
我的網頁的圖片較多，而服務器也不是很好，所以每次打開網頁后總有一、兩幅圖片無法顯示，但刷新一遍后又全部可顯示了,這種問題相信每個人都遇到過，接下來介紹詳細解決方法2012-12-12
javascript類型系統(tǒng)——undefined和null全面了解
下面小編就為大家?guī)硪黄猨avascript類型系統(tǒng)——undefined和null全面了解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
javascript學習筆記之檢測瀏覽器插件代碼，需要的朋友可以參考下2012-06-06