溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

ES6基礎語法之模塊化怎么實現(xiàn)

發(fā)布時間：2022-05-05 10:11:36 來源：億速云 閱讀：114 作者：iii 欄目：開發(fā)技術

本篇內容介紹了“ES6基礎語法之模塊化怎么實現(xiàn)”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

ES6 引入了模塊化， ES6 的模塊化分為導出（export） @與導入（import）兩個模塊。

ES6模塊化特點：

（1）ES6 的模塊自動開啟嚴格模式，不管你有沒有在模塊頭部加上 use strict;。

（2） 模塊中可以導入和導出各種類型的變量，如函數(shù)，對象，字符串，數(shù)字，布爾值，類等。

（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>

二、網(wǎng)頁中直接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>網(wǎng)頁中import模塊</title>
	</head>
	<body>
		<h2>姓名:<span id="spanName"></span></h2>
		<h2>性別:<span id="spanSex"></span></h2>
	</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>
		<h2>姓名:<span id="spanName"></span></h2>
		<h2>性別:<span id="spanSex"></span></h2>
	</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>
		<h2>姓名:<span id="spanName1"></span></h2>
		<h2>性別:<span id="spanSex1"></span></h2>
		<hr />
		<h2>姓名:<span id="spanName2"></span></h2>
		<h2>性別:<span id="spanSex2"></span></h2>
	</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>

四、導入模塊中的函數(shù)和類

（1）導入模塊中的函數(shù)

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">
	//導入函數(shù)
	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命令的時候，用戶需要知道所要加載的變量名或函數(shù)名，否則無法加載，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導出函數(shù)

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">
	//接受默認函數(shù)
	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 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>

“ES6基礎語法之模塊化怎么實現(xiàn)”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。

es6
AI
助
手