ES6的模块化导入和导出

export

export指令用于导出变量，举个列子：

export default

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

• 此时需要用export default
  导出的方式及代码演示：

var name='小梦'
var age=19
var flag=true

function sum(num1, num2){
  return num1+num2
}

if (flag) {
  console.log(sum(20,30));
}
//1.导出方法1
export {
  flag,sum
}
//2.导出方式2
export var num1=1000;
export  var height=1.98

//3.导出函数/类
export function mul(num1,num2){
  return num2 + num2
}
// 4.导出类
 export  class Person{
  run(){
    console.log('是你吗')
  }
}
// 5.export default
//默认只能拥有一个export default
 const  address ='北京市'

export default address

import

我们提供了export指令导出了模块对外提供的的接口，下面我们就可以通过import命令来加载对应的这个模块

• 首先，我们得确定我们在HTML代码中应用了两个js文件，并且类型为：type= “module”
• 
• import指令用于导入模块中的内容
• 

导入方式及代码演示：

//1.导入
import {flag, sum}from "./aaa.js";

if  (flag) {
  console.log("小明是天才，哈哈哈哈");
  console.log(sum(20,30));
}
//2.直接导入export定义的变量
import {num1,height} from "./aaa.js";
console.log(num1);
console.log(height);

//3.导入export 的function/class
import {mul,Person} from "./aaa.js";

console.log(mul(30,50));

const p=new Person();
p.run();

//4.导入  export default
import add from "./aaa.js";

console.log(add)
//5.统一到入全部
import * as  aaa from './aaa.js'

console.log(aaa.flag);