ES6模块化(重点中的重点)
一、直接导出
export let a=1;
export let b=2;
export let fn=function(){
console.log('fn函数')
}
<script type="module">
import {a,b,fn} from './model/mo1.js'
console.log(a,b,fn);
fn();
</script>
二、解决冲突
export let a=3;
export let b=4;
import {a,b,fn} from './model/mo1.js';
import {a as a2 , b as b2} from './model/mo2.js';
console.log(a,b,a2,b2);
三、如果导出的内容非常多的情况下
export let a = 1;
export let b = 2;
export let c = 3;
export let d = 4;
export let f = 5;
export let g = 6;
export let j = 7;
import * as suibian from './model/mo2.js';
console.log(suibian.a,suibian.b,suibian.c,suibian.j);
四、先定义在导出
let str= 'model->mo4.js';
let a=100;
let b=200;
let fn=funtion(){
console.log('我是一个函数')
}
let obj={
a:1,
b:2,
c:3
}
export {
str,
a,
b as b2,
fn,
obj
}
import {a,b2,fn,str,obj} from './model/mo4.js';
console.log(a,b2,obj,str,fn)
五、默认导出。(使用频率最高) 接收默认导出的数据不需要加{ }
export default {
a:1,
b:2
}
export default function(){
console.log('model->mo5->被默认导出的函数');
}
export default 1;
let str='model->mo5-str';
export default str;
export default 'zhangsan'
六、混合导出。将默认导出与直接导出同时使用的情况称为混合导出
export default {
userName:'mo6.js'
}
export let age=12;
export let sex='男';
import mo6,{age,sex} from './model/mo6.js';
console.log(mo6,age,sex);
七、一个模块,可以引入多次,但是模块只会运行一次
import mo6 from './mo6.js';
console.log('lalala,下雨了,我的心情总在跑');
export default {
str:'mo7.js',
mo6
};
import mo7 from './model/mo7.js';
import mo77 from './model/mo7.js';
console.log(mo7===mo777);
console.log(mo7);