原生支持模塊化了
ES6中新增的模塊化，即從ES6開始，原生js支持模塊化了，現在很多瀏覽器也支持模塊化了。
- 模塊化的兩個概念
- 導出（export關鍵字）：導出就是對外開放的，可以導出變量，常量，函數，對象等等。使用export關鍵字。放在export關鍵字後面的（即對外導出的）變量，常量，函數和對象，在其它js文件中可以使用，否則，其它js文件中是不能使用的。即只能內部使用的。
在用export導出時，可以導出多個
如：person.js文件（模塊）裏，如下：
//導出字符串
export var str = "hello";
//導出函數
export var fun = function(){
alert("我是函數");
}
//導出對象
export const p = {
"id":"007",
"name":"張三瘋",
"eat":function(){
alert("喫");
ff();
}
}
//此函數沒有使用export關鍵字導出，所以，只能在當前js文件內部使用
function ff(){
alert("我只能在當前js被使用");
}
2.導入（import）：導入就是把其它js文件引入到當前js文件裏。使用關鍵字import。
在使用import導入（export導出的）時，要使用花括號，
如：import {str,fun,p} from './person.js';
在index.js文件中，引入模塊person.js；
//導入時，需要使用{}，這是解構賦值。
import {str,fun,p} from './person.js';
window.onload = function(){
document.getElementById("btn01").onclick = function(){
console.log(str);
fun();
console.log(p.id);
p.eat();
}
}
-
-
- 在html文件中引入index.js（注意： type="module"）
注意：js中使用了模塊化的關鍵字import，在引入時，script標籤的type屬性的值必須寫成module。即：<script type="module" src="js/index.js"></script>
- 在html文件中引入index.js（注意： type="module"）
-
<body>
<input id="btn01" type="button" value="測試" />
</body>
<script type="module" src="js/index.js"></script>
注意：測試以上代碼時，google瀏覽器要求放在服務器上進行 ，否則，就會有跨域問題。
-
- export default和export 有什麼區別：
- 、export與export default均可用於導出常量、函數、文件、模塊等
- 、在一個文件或模塊中，export可以有多個，export default僅有一個，而且export default在導出是不需要變量名，相當於匿名的。
- 、通過export方式導出，在導入時要加{ }，export default則不需要。
代碼示例：
模塊定義：dog.js
export default {
"name":"大黃",
"eat":function(){
alert("喫");
}
}
導入模塊：
import d from './dog.js';
window.onload = function(){
document.getElementById("btn01").onclick = function(){
console.log(d);
d.eat();
}
}