大家都知道es6是ECMAScript的下一代js版本,隨著瀏覽器的更新迭代,主流瀏覽器逐漸支持es6,那么今天就介紹一下es6的導(dǎo)入導(dǎo)出功能吧
想使用es6的導(dǎo)入導(dǎo)出功能不需要配置nodejs環(huán)境和webpack環(huán)境,直接可以用
導(dǎo)入導(dǎo)出的功能是模塊化,使你的js功能獨(dú)立,這樣有利于你的代碼解耦,提高代碼的復(fù)用性
- 1.新建js文件寫入下列代碼
// 使用es6箭頭函數(shù)定義一個(gè)函數(shù)
let fn = a=> alert(a);
// 導(dǎo)出函數(shù)
export {fn};
- 2.新建HTML文件導(dǎo)入這個(gè)函數(shù)模塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"></div>
<script type="module">
// 導(dǎo)入這個(gè)模塊
import {fn} from "./index1.js"
// 調(diào)用這個(gè)模塊
fn(1);
</script>
</body>
</html>
ps:這里說明一下要想使用es6的導(dǎo)入導(dǎo)出模塊,必須給導(dǎo)入的script標(biāo)簽設(shè)置type類型為
module
-
3.執(zhí)行HTML文件你會(huì)發(fā)現(xiàn)有一個(gè)彈框
執(zhí)行之后會(huì)有彈框 - 4.如果你想在js中導(dǎo)入其他js也是可以的
// 在index2.js中導(dǎo)入index1.js的模塊
import {fn} from './index1.js';
function f2() {
// 執(zhí)行index1的模塊
fn(1);
alert(2);
}
export { f2 };
- 5.外界使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"></div>
<script type="module">
import {f2} from "./index2.js"
f2(1);
</script>
</body>
</html>
- 6.好了今天的es6語法的導(dǎo)入導(dǎo)出就到這里了
持續(xù)更新實(shí)用的干貨
微信公眾號(hào)關(guān)注coderYJ
簡(jiǎn)書關(guān)注coderYJ
微博關(guān)注coderYJ
