ES6——模块化
注意：模块化定义与使用，需要在服务器环境下。
定义与使用
在js文件中定义
export let a=1; export const b=2; export const c=3;
或者
let a=1; const b=2; const c=3;
export{a,b,c}
在html文件中使用
<script type="module">
import {a,b,c} from './modules.js';//引入模块中多个具体的变量等等
</script>
也可以使用别名：
let a=1; const b=2; const c=3;
export{a as aa, b as bb, c as cc}
<script type='module'>
import {aa,bb,cc} from './modules.js';//引入模块中多个具体的变量等等
</script>
或者
let a=1; const b=2; const c=3;
export{a as aa, b as bb, c as cc}
<script type='module'>
import {aa as a,bb as b,cc as c} from './modules.js';//引入模块中多个具体的变量等等
</script>
或者
<script type="module">
import * as mod from './mod.js';
console.log(mod.a);
</script>
也可以配合default定义
export default 12;//注意区别
export let b=12;
export let c=17;
<script type="module">
import a,{b,c}from './mod.js';//注意区别，不带{ }
console.log(a,b,c);
</script>
也可以结合Promise.all()使用:
<script type="moudle">
Promise.all([
import("./mod1.js");
import("./mod2.js");
]).then(([mod1,mod2])=>{
console.log(mod1,mod2);
})
</script>
特点
a).import可以是相对路径，也可以是绝对路径。
import 'https://code.jquery.com/jquery-3.3.1.js';
b).import模块只会导入一次，无论你引用多少次。但是，导出去的模块内容中，如果里面有定时器动态更改数据，外面也会跟着动态更改。
c).import './modules.js'; 这样相当于引入文件。
d).import会自动提升到顶部，首先执行。
e).默认import语法不能写到if之类的语句里面，要想实现按需加载模块，可以使用import( ) ，类似node里面require，其优点：1、可以动态引入模块，2、可以写入if等语句，3、路径也可以写成动态的。例如：
import('./mod.js').then(res=>{
console.log(res.a,res.b);
})
或者
import('https://code.jquery.com/jquery-3.3.1.js').then(res=>{
$(function(){
$('body').css({
background:'gray';
})
})
})
使用方式小综合：
html中：
<script type="module">
import mod,{show,sum,a,b} from './mod.js';
let p1=new mod.Person('yangyi','18');
console.log(p1.showName());//我的名字是yangyi,我今年18岁
console.log(show());// 执行了show
console.log(sum());//333
console.log(a,b);//111 222
</script>
mod.js中：
import {a,b} from './mod2.js';
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
showName(){
return `我的名字是${this.name},我今年${this.age}岁`;
}
}
const show=()=>{
return '执行了show'
};
const sum=()=>{
return a+b;
}
export{
a,
b,
show,
sum
}
export default{
Person
}
mod2.js中：
const a=111;
const b=222;
export{
a,
b
}
