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

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

?

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//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变量
• 但是通常情况下我们需要给*起一个别名，方面后续使用

?

1 2 3

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