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）復合寫法實現(xiàn)接口改名
module1.js
// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};module7.js
//復合寫法實現(xiàn)接口改名
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基礎語法之模塊化的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
深入解析contentWindow, contentDocument
沒有永恒的技術只有需求,沒有好說的客戶只有無奈的開發(fā)者,如果iframe的出現(xiàn)是一個錯誤的話,iframe里邊在來一個iframe那是錯上加錯,神話沒有在遠古的塵囂中消失,卻在懷具的今天不斷上演2013-07-07
簡介JavaScript中toUpperCase()方法的使用
這篇文章主要介紹了JavaScript中的toUpperCase()方法的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
本篇文章主要來為大家講解JS學習中的三大難點，JS同步異步的作用域，JS閉包原型以及JS原型鏈的詳細解析，有需要的同學可以借鑒參考下，希望可以有所幫助2021-09-09
這篇文章主要介紹了重寫window對象的方法,需要的朋友可以參考下2014-12-12
javascript中arguments,callee,caller詳解
javascript中arguments,caller,callee 是什么？ 在javascript 中有什么樣的作用？本篇會對于此做一些基本介紹。希望大家能夠喜歡。2016-03-03
javascript 觸發(fā)事件列表，整理的一些js的事件，一般常用的就是onclick,onmouseover等。大家可以了解下，方便以后應用。2009-09-09
本文從javascript簡介開始，介紹了javascript的語法以及注意事項、動態(tài)語言、引用外部JS文件、變量命名規(guī)則、判斷是否已經聲明、不存在塊級作用域這些方面的內容，是篇相當不錯的基礎語法的介紹文章，推薦給小伙伴們2015-02-02
用JavaScript腳本實現(xiàn)Web頁面信息交互
這篇文章主要給大家介紹了關于用JavaScript腳本實現(xiàn)Web頁面信息交互的相關資料,需要的朋友可以參考下2006-12-12
下面小編就為大家?guī)硪黄狫S之if語句對接事件動作邏輯(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
雖然我是做c#開發(fā)的，但是做實際工作中，少不了用到一些js，下面我來把經常會用的js、方法做一個小結2011-06-06