ES6模块化

ES6模块化(重点中的重点)

一、直接导出

• 如何导出(暴露)

//在 mo1.js模块中导出了a,b,fn
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>

二、解决冲突

• 如何导出(暴露) module–>mo2.js

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);//1 2 3 4

三、如果导出的内容非常多的情况下

• 如果导出 model–>mo3.js

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);
// 1,2,3,7

四、先定义在导出

• 如何导出 model ==>mo4.js

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)

五、默认导出。(使用频率最高) 接收默认导出的数据不需要加{ }

• 如何导出 model==>mo5.js

//默认导出一个对象
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'

六、混合导出。将默认导出与直接导出同时使用的情况称为混合导出

• 如何导出 model–>mo6.js

export default {
    userName:'mo6.js'
}
export let age=12;
export let sex='男';

• 如何导入

//mo6是默认导出的数据。{ }接收的为直接导出的数据
//在混合引入时接收的默认数据在必须在左侧
import mo6,{age,sex} from './model/mo6.js';
console.log(mo6,age,sex);

七、一个模块，可以引入多次，但是模块只会运行一次

• 如何导出 model–>mo7.js

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);// true
console.log(mo7);