import和export即其用法

import和export即其用法

ES6模块主要有两个功能：export和import

1.export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口；
2.import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

import、export和export default用法

它们的使用基于服务器端环境，我这边是安装了phpstudy 安装好之后会有一个www文件夹 把内容放入该文件夹中我的文件夹叫ES6_import 里面有一个ES6_import.js 和一个ES6_import.html 可以启动服务器 http://localhost/ES6_import/ES6_import.html

导入的js文件

<script type="module">
			/* 第一种 单个变量*/
			// import {a} from './ES6_import.js';
			// console.log(a);
			
			/* 第二种 多个变量*/
			// import {a,b,c} from './ES6_import.js';
			// console.log(a);
			// console.log(b);
			// console.log(c);
			
			/* 第三种 函数的导入 */
			// import {add} from './ES6_import.js';
			// console.log(add(1,2));
			
			/* 第四种 不想暴露js中的变量名*/
			// import {x,y,z} from './ES6_import.js';
			// console.log(x);
			// console.log(y);
			// console.log(z);
			
			/* 五、变量和函数联合导出 */
			// import {a,add} from './ES6_import.js';
			// console.log(a);
			// console.log(add(1,2));
			
			/* 六、使用export default 不用大括号，且导出时可以取别名 */
			// import b from './ES6_import.js';
			// console.log(b);
			
			/* 六、export default用于复杂结构 */
			// import b from './ES6_import.js';
			// console.log(b.logo);
			
			/* 七、 */
			// import {Person} from './ES6_import.js';
			// var p = new Person();
			// p.run();
			
			// import Person from './ES6_import.js';
			// var p = new Person();
			// p.run();
			
			/* 八、 */
			// import *as aaa from './ES6_import.js';
			// console.log(aaa.name);
			// console.log(aaa.flag);
		</script>

被导入的js文件

/* 第一种情况 单个变量 */
// export var a = 'Lee';

/* 第二种情况 多个变量*/
// var a = 'Lee',b = 'Lee1',c = 'Lee2';
// export{a,b,c}

/* 第三种情况 函数的导入 */
//export function add(a,b){
// 	return a+b;
// }

/* 第四种情况 不想暴露js中的变量名 */
// var a = 'Lee',b = 'Lee1',c = 'Lee2';
// export{
// 	a as x,
// 	b as y,
// 	c as z
// }

/* 第五种情况、函数和变量联合导出1 */
// export var a = 'Lee';
// export function add(a, b) {
// 	return a + b;
// }

/* 第五种情况、函数和变量联合导出2 */
// var a = 'Lee';
// function add(a,b){
// 	return a+b;
// }
// export{a,add};

/* 第六种情况、使用export default 不用大括号，且导出时可以取别名 */
// var a = 'Lee';
// export default a;

/* 第六种情况、export default用于复杂结构 */
// export default {
// 	logo: 'UNI-ADMIN',
// 	navBar: {
// 		active: '0',
// 		list: [{
// 				name: "首页",
// 				subActive: '0',
// 				submenu: [{
// 						icon: "el-icon-s-home",
// 						name: "后台首页",
// 						pathname: "index"
// 					},
// 					{
// 						icon: "el-icon-picture",
// 						name: "相册管理",
// 						pathname: "image"
// 					},
// 					{
// 						icon: "el-icon-s-claim",
// 						name: "商品列表",
// 						pathname: "shop_goods_list"
// 					}
// 				]
// 			},
// 			{
// 				name: "商品",
// 				subActive: '0',
// 				submenu: [{
// 					icon: "el-icon-s-claim",
// 					name: "商品列表",
// 					pathname: "shop_goods_list"
// 				}]
// 			},
// 			{
// 				name: "订单"
// 			},
// 			{
// 				name: "会员"
// 			},
// 			{
// 				name: "设置"
// 			},
// 		]
// 	}
// }

/* 第七种情况 */
// export class Person{
// 	run(){
// 		console.log('奔跑');
// 	}
// }

// class Person{
// 	run(){
// 		console.log('奔跑');
// 	}
// }
// export default Person

/* 第八种情况 */
// var name = 'name1';
// let flag = 'flag1';
// export{name,flag}

总结

1.在一个文件或模块中，export、import可以有多个，export default仅有一个
2.使用export default ，在用import引入时不用加{}