二十四、模块化（ export和import ）

一、需要在html代码中引用两个js文件，并且类型需要设置为module

 <script src="info.js" type="module"></script>
 <script src="main.js" type="module"></script>

二、export指令用于导出模块中的内容

let name = "小明";
var age = 18;
var flag = true;

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

if(flag){
  console.log(sum(20, 30));
}

//1. 导出方式一
export {
  flag, sum
}

//2. 导出方式二
export var num1 = 1000;
export var height = 188;

//3. 导出函数
export function mul(num1, num2){
  return num1+ num1;
}

//4. 导出ES6中的类
export class Person{
  run(){-
    console.log("奔跑");
  }
}

//5. export default（注意：在同一个模块中，default只能存在一个）
// 1.
// const address = "北京市";
// export {
//   address
// }
// 2.
//export const address = "北京市";
// 3.
// const address = "北京市";
// export default address;
export default function(atgument){
  console.log(atgument);
}

三、import指令用于导入模块中的内容

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

if(flag){
  console.log("哈哈哈");
  console.log(sum(50,20));
}

//2. 直接导入export定义的变量
import { num1,height } from "./aaa.js";
console.log(num1);
console.log(height);

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

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

//4. 导入default（addre名字可以随便写）
import addre from "./aaa.js"
addre("你好啊");

//5. 统一全部导入
import * as obj from './aaa.js'
console.log(obj.flag, obj.height, obj.num1, obj.sum);

如果希望某个模块中的所有信息都导入

• 通过*可以导入模块中的所有export变量
• 但是通常情况下我们需要给*起一个别名，方面后续使用

//5. 统一全部导入
import * as obj from './aaa.js'
console.log(obj.flag, obj.height, obj.num1, obj.sum);