欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ES6基礎(chǔ)語法之模塊化介紹

 更新時(shí)間：2022年05月02日 13:47:11   作者：農(nóng)碼一生  
這篇文章介紹了ES6基礎(chǔ)語法之模塊化，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

ES6 引入了模塊化， ES6 的模塊化分為導(dǎo)出（export） @與導(dǎo)入（import）兩個(gè)模塊。

ES6模塊化特點(diǎn)：

（1）ES6 的模塊自動(dòng)開啟嚴(yán)格模式，不管你有沒有在模塊頭部加上 use strict;。

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

（3） 每個(gè)模塊都有自己的上下文，每一個(gè)模塊內(nèi)聲明的變量都是局部變量，不會(huì)污染全局作用域。

（4） 每一個(gè)模塊只加載一次（是單例的）， 若再去加載同目錄下同文件，直接從內(nèi)存中讀取。

一、export與import基本使用

export 命令用于導(dǎo)出， import 命令 用于導(dǎo)入：

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);  //男
//或?qū)氩糠肿兞?
import { sex } from "../export/module1.js";
console.log(sex);  //男

Demo01.html

<!-- 
    module1.js:模塊代碼,通過export暴露變量
    test1.js:導(dǎo)入module1.js提供的變量
    Demo01.html:引入test1.js內(nèi)容
-->
<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>
		<h1>姓名:<span id="spanName"></span></h1>
		<h1>性別:<span id="spanSex"></span></h1>
	</body>
</html>
<!-- 
 module1.js:模塊代碼,通過export暴露變量
 Demo02.html:導(dǎo)入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中的用法：變量使用別名,隱藏模塊內(nèi)部的變量

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暴露變量(變量使用別名,隱藏模塊內(nèi)部的變量)
 Demo03.html:導(dǎo)入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中的用法：導(dǎo)入多個(gè)模塊的變量,使用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:導(dǎo)入兩個(gè)模塊的變量,使用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>

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

（1）導(dǎo)入模塊中的函數(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">
	//導(dǎo)入函數(shù)
	import {Add} from './export/module4.js';
	let result = Add(1,2,3,4,5);
	console.log(result); //15
</script>

（2）導(dǎo)入模塊中的類：

module4.js

// class Student
// {
// 	constructor(stuno,stuname) 
// 	{
// 		this.stuno = stuno;
// 		this.stuname = stuname;
// 	}
// 	sayHi()
// 	{
// 		console.log("大家好,我是"+this.stuname+",我的學(xué)號(hào)是"+this.stuno);
// 	}
// }
// export {Student};
//或
export class Student
{
	constructor(stuno,stuname) 
	{
		this.stuno = stuno;
		this.stuname = stuname;
	}
	sayHi()
	{
		console.log("大家好,我是"+this.stuname+",我的學(xué)號(hào)是"+this.stuno);
	}
}

HTML

<script type="module">
	//導(dǎo)入類
	import {Student} from './export/module4.js';
	let stu = new Student("001","孫悟空");
	stu.sayHi();
</script>

五、import的特點(diǎn)

module5.js

let name = "孫悟空";
let sex = "男";
let emp = {name:"孫悟空",sex:"男"};
export {name,sex,emp};

HTML

<script type="module">
	//只讀特點(diǎn)
	//import {name,sex,emp} from './export/module5.js';
	//(1)普通類型的值不能改變
	// name = "豬八戒"; //報(bào)錯(cuò)
	// sex = "男";//報(bào)錯(cuò)
	//(2)不能直接改變對(duì)象
	//emp = {name:"豬八戒",sex:"男"};
	//(3)可以改變變量的屬性值
	// emp.name = "豬八戒";
	// emp.sex = "男";
	
	//單例特點(diǎn)
	//(1)下面兩句import只會(huì)執(zhí)行一次
	//import {name,sex,emp} from './export/module5.js';
	//import {name,sex,emp} from './export/module5.js';
	//(2)下面兩句import相當(dāng)于 import {name,sex} from './export/module5.js';
	// import {name} from './export/module5.js';
	// import {sex} from './export/module5.js';
	
	//靜態(tài)特點(diǎn)
	//(1)不支持表達(dá)式
	//import {"na"+"me"} from './export/module5.js'; //報(bào)錯(cuò)
	//(2)不支持動(dòng)態(tài)導(dǎo)入,以下代碼也會(huì)報(bào)錯(cuò)
	// 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中所有暴露出來的內(nèi)容
	import * as test from './export/module5.js';
	console.log(test.name);
	console.log(test.emp.name);
</script>

七、export default命令

使用import命令的時(shí)候，用戶需要知道所要加載的變量名或函數(shù)名，否則無法加載，export default 向外暴露的

成員，可以使用任意變量來接收，解決上述問題。

export default 命令特點(diǎn):

（1）在一個(gè)文件或模塊中，export、import 可以有多個(gè)，export default 僅有一個(gè)。

（2）export default 中的 default 是對(duì)應(yīng)的導(dǎo)出接口變量。

（3）導(dǎo)入導(dǎo)出不需要{}符號(hào)。

（4）export default 向外暴露的成員，可以使用任意變量來接收。

（1）export default導(dǎo)出變量

module6.js

//export default導(dǎo)出變量不需要var

//export var a = 10; // 正確

// 正確
var a = 10;
export default a;

// 錯(cuò)誤
//export default var a = 10;

HTML

<script type="module">
	//接受默認(rèn)變量
	import b from './export/module6.js'; //此處可以用任意變量(b)來接受
	console.log(b);
</script>

（2）export default導(dǎo)出函數(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">
	//接受默認(rèn)函數(shù)
	import sum from './export/module6.js'; //此處可以用任意變量(sum)來接受
	let result = sum(1,2,3,4,5);
	console.log(result);
</script>

八、export與import的復(fù)合寫法

export 與 import 可以在同一模塊使用，我們稱為復(fù)合使用。

（1）復(fù)合使用的基本語法

module1.js

// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};

module7.js

//復(fù)合使用的語法
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">
	//導(dǎo)入module7,在module7中導(dǎo)出module1內(nèi)容
	import {name,sex,emp} from "./export/module7.js";
	console.log(name);
	console.log(emp.name);
</script>

（2）復(fù)合寫法實(shí)現(xiàn)接口改名

module1.js

// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};

module7.js

//復(fù)合寫法實(shí)現(xiàn)接口改名
let emp = {name:"豬八戒",sex:"男"};
export { name as myname, sex as mysex } from './module1.js';
export {emp}

HTML

<script type="module">
	//導(dǎo)入改名后的變量
	// import {myname,mysex,emp} from "./export/module7.js";
	// console.log(myname);
	// console.log(emp.name);	
</script>

（3）轉(zhuǎn)換為默認(rèn)接口

module1.js

// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};

module7.js

// 轉(zhuǎn)換為默認(rèn)接口
let emp = {name:"豬八戒",sex:"男"};
export {name as default,sex} from './module1.js';
export {emp}

HTML

<script type="module">
	//導(dǎo)入修改成默認(rèn)接口的name,使用abc接收
	import abc from "./export/module7.js";
	import {sex,emp} from "./export/module7.js";
	console.log(abc);
	console.log(emp.name);
</script>

（4）默認(rèn)接口轉(zhuǎn)換為命名接口

module6.js

function Add(...items)
{
	let sum = 0;
	for(let item of items)
	{
		sum += item;
	}
	return sum;
}
//此處Add不需要{}
export default Add

module7.js

//將默認(rèn)接口轉(zhuǎn)換為命名接口
export {default as sum} from './module6.js';

HTML

<script type="module">
	//導(dǎo)入默認(rèn)接口轉(zhuǎn)換成的sum接口
	import {sum} from "./export/module7.js";
	let result = sum(1,2,3,4,5);
	console.log(result);
</script>

（5）導(dǎo)出所有接口

module1.js

// export let name = "孫悟空";
// export let sex = "男";
//或
let name = "孫悟空";
let sex = "男";
export {name,sex};

module7.js

//導(dǎo)出所有
export * from './module1.js'

HTML

<script type="module">
	//接收導(dǎo)出的所有接口
	import {name,sex} from "./export/module7.js";
	console.log(name);
	console.log(sex);
</script>

到此這篇關(guān)于ES6基礎(chǔ)語法之模塊化的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論