一、ES6模块化优点
1.防止命名冲突
2.代码可复用
3.高维护性
二、模块化规范产品
ES6模块化规范有
1.CommonJS => NodeJS、Browerify
2.AMD => requireJS
3.CMD => seaJS
三、ES6模块化语法
模块功能主要由两个命令构成：export和import
export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能
四、ES6暴露数据语法汇总
代码演示：
test01.js
//分别暴露
export let school1 = 'DGUT';
export function teach1() {
console.log("ES6分别暴露");
}
test02.js
//统一暴露
let school2 = 'DGUT';
function teach2() {
console.log("ES6统一暴露");
}
export{ school2,teach2}
test03.js
//默认暴露
export default {
school3 :'DGUT',
change: function () {
console.log("默认暴露");
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
//1.通用导入方式
//引入test01模块内容(分别暴露)
import * as t1 from "./src/js/test01.js";//必须加./不能加../
//引入test02模块内容(统一暴露)
import * as t2 from "./src/js/test02.js";
//引入test03模块内容(默认暴露)
import * as t3 from "./src/js/test03.js";
//2.解构赋值形式
import {school1,teach1} from "./src/js/test01.js";
//变量名称冲突采用别名解决
import {school2 as xuexiao ,teach2} from "./src/js/test02.js";
//默认暴露引入方式
import {default as test3} from "./src/js/test03.js";
//3.简便形式，只针对默认暴露
import test3 from "./src/js/test03.js";
</script>
</body>
</html>
