ES6_08、模块化的使用

一：模块化使用注意事项：

1. 模块化需要放到服务器环境才有效；
2. 如何定义模块？
   1. 使用export
3. 如何使用？
   1. import ...
   2. import ... from ...

二：模块化的使用

注意事项：

1. import可以使用相对路径和绝对路径
2. import引入的文件只执行一次
3. 'import "./module/a.js"'相当于引入文件
4. 使用import必须使用服务器环境
5. import有提升功能，类似var和方法的提前执行
6. import倒入的变量或方法，虽然只加载一次，但是如果模块里面的值有变更，倒入的内容会同步变更！

引入方法一： 

export const a=2;
export let add=function(a,b){
	return a+b;
}
// 也可以使用
const x=1;
const y=2;
export {x,y as yy}  //使用别名

 

<script type="module">
	import {a,add,x as xx,yy} from './js/index.js';//使用别名
	setTimeout(()=>{
		console.log(add(1,9))
		console.log('页面',a,xx,yy)
	},3000)
</script>

引入方法二：

使用export default导出方法，接收的时候可以不实用花括号

三、简单案例

1、主页面

<script type="module">
	import mod,{show,sum,a,b} from './js/index02.js';
	let p1=new mod.Person("张三",15);
	console.log(p1.showName());
	show('我是show');
	console.log(sum(a,b));
</script>

2、index02.js 

import {a,b} from './index03.js';
const show=(val)=>{
	console.log("show:",val);
};
const sum=(a,b)=>{
	return a+b;
};
class Person{
	constructor(name,age){
		this.name=name;
		this.age=age;
	}
	showName(){
		return `我的名字是${this.name},我的年龄${this.age}`
	}
}
export {
	a,
	b,
	sum,
	show
};
export default{
	Person
}

3、index03.js 

const a=33;
const b=44;
export {a,b}

四、import()动态引入文件

• 类似node里面的require，可以动态引入，默认import语法不能写到if等里面
• 返回值是个promise对象

优点：

1. 按需加载
2. 可以写在条件语句中
3. 路径也可以动态控制

案例一： 

<script type="module">
	let flag=false;
	let urlA='./js/index03.js';
	let urlB='./js/index.js';
	if(flag){
		import (urlA).then(res1=>{
			console.log(res1);
		})
	}else{
		import (urlB).then(res2=>{
			console.log(res2);
		})
	}
</script>

案例二 ：

<script type="module">
	Promise.all([
		import('./js/index.js'),
		import('./js/index03.js')
	]).then(([mod1,mod2])=>{
		console.log(mod1,mod2)
	})
</script>

案例三：

<script type="module">
	async function main(){
		const mod1=await import('./js/index.js');
		const mod2=await import('./js/index03.js');
		console.log(mod1,mod2);
		const [m1,m2]=await Promise.all([
			import('./js/index.js'),
			import('./js/index03.js')
		]);
		console.log(m1,m2);
	};
	main();
</script>