ES6模块化的导入和导出

ES6模块化的导入和导出

导出export

// 导出方式一
export {
  flag,sum,
}
// 导出方式二
export var num = 1000;
export var height = 1.88;

//导出方式三
export function mul(num1,num2){
  return num1+num2
}
export class Person(){
    run(){
        console.log('runnnnnn');
    }
}

导入import

我们需要在HTML代码中引入两个js文件，并且类型都设置为module

// 导入的{}中定义的变量
import {flag,sum} from "./aaa.js"


if (flag){
  console.log("xiaomintiancai");
  console.log(sum(20,30));
}
// 直接导入export定义的变量
import {num,height} from "./aaa.js"
console.log(num);
console.log(height);

//导入export的function/class
import {mul,Person} from "./aaa.js";
console.log(mul(20,30));

let a = new Person();
a.run();

//统一导入
inmport * as  aaa from 'aaa.js';
console.log(aaa.name);

export default

某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名。

export default在同一个模块中不允许同时存在多个

export default function(){
	console.log('default function');
}

//导入export defaul中的内容
import addr from "./aaa.js";   //此时addr是导入者自己命名，指向的是default的哪个函数
addr('你好啊');