// ES6 模块化;
// 导入 和 导出
// 例如:a.js 需要 b.js 的逻辑
// 导入:
import {a,b} from './b.js';
console.log(a,b);
import {a as c,b as d} from './b.js';
console.log(c,d);
import {e} from './b.js';
console.log(e);
import myobj from './b.js';
console.log(myobj);
import myobj1,{a as g,b as g1} from './b.js';
console.log(myobj1,g,g1);
import * as obj from './b.js';
console.log(obj);//它是一个obj
/*
import {a,b} from '路径';
{a,b}必须同名 因为是{}大括号和解构赋值一样
import {a as c,b as d} from '路径';
可以使用as起另名;
import myobj from './b.js';
接收export default导出的方法可以自定义名字;
import myobj1,{a as g,b as g1} from './b.js';
他们也可以同时接收导入内容
import * as obj from './b.js';
通配符方式接收
*/
// 导出:
export let a = 10;
export let b = 20;
let d = 30;
export {d as e};
let obj = {
name:"张三",
age:20
}
// export default obj;
export {obj as default};//新写法...
/*
export : 导出
此关键字可以多些,那么他也就是可以导出多个
export {d as e};
可以使用as导出别名
export default obj;
次关键字只能一次,那么也就是 使用此方法 只能导出一次;
*/
<!-- 注:type属性值必须是module -->
<script type="module" src='./a.js'></script>
<script type="module">
// import obj from './a.js';//这里是页面加载完就直接加载了
// 按需加载模块化js文件
/* document.onclick = function (){
// 返还 promise 对象;
import("./a.js").then(res=>{
// console.log(res);
});
} */
document.onclick = async function (){
// 返还 promise 对象;
// import("./a.js").then(res=>{
// // console.log(res);
// });
let res = await import("./a.js");
console.log(res);
}
</script>