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引入时不用加{}