ES6 的模块化

项目中，每一个JS文件即是一个模块。

• 如何导出

• 如何引入

• 在开发项目时，需要理解如何对项目进行模块化的划分。（react）

一、直接导出

• 如何导出:module/1.js:

  // 导出变量userName
  export let userName = "zhangsan";
  export const age =12;
  export const fn = function(){
  }
  export const sex = "男";

• 如何引入

  // 导出的名字需要与引入的名字一致。
  import {userName,fn,age,sex} from "./module/1.js";
  console.log(userName,fn,age,sex);

二、解决冲突

• 如何导出 module/2.js

  export let a = 1;
  export let b = 2;
  export let c = 3;
  export let d = 4;

• 如何引入

      // 导入（依赖，引入）时可以通过as起个别名. as 是 alias的缩写
      let a = "100";
      let b = "200";
      import {a as aa,b as suibian,c,d} from "./module/2.js";
      console.log(aa,suibian,c,d);// 1 2 3 4

三、先定义再导出

• 如何导出

  function fn(){
  ​
  }
  let userName = "zhangsan";
  let age = 12;
  let obj = {};
  ​
  export {
      fn,
      userName as user,// 起个名字
      age,
      obj
  }
  ​

• 如何引入

  let userName = "lisi";
  import {fn,user,age,obj} from "./module/3.js";
  console.log(fn,user,age,obj)

四、可以批量导入

• 如何导出

  export let a = 1;
  export let b = 10;
  export let c = 2;
  export let d = 3;
  export let e = 4;
  export let f = 5;
  export let g = 6;

• 如何引入

  import * as mo4 from "./module/4.js";
  console.log(mo4.a,mo4.b,mo4.c);

五、默认导出（频率最高的）

• 如何导出

  // 默认导出在一个模块中只允许出现一次。
  // export default 1;
  export default {};

• 如何引入

  import num from "./module/5.js";
  console.log(num);

六、混合导出：导出时有默认也有非默认

• 如何导出

  export let age = 13;
  export let b = 2;
  export let fn = function(){
  ​
  }
  export function run(){
  ​
  }
  export default {
      hobby:"学习",
      sex:"男"
  }

• 如何引入

      import mo,{age,b,fn,run} from "./module/6.js";
      console.log(age,b,fn,run,mo.hobby,mo.sex);

七、注意：模块化（js）可以引入多次，但只会执行一次。

• 如何导出

  console.log("7.js");
  import mo6 from "./6.js";
  export default {
      a:1,
      b:2,
      hobby:mo6.hobby,
      sex:mo6.sex
  }

• 如何引入

  import mo7 from "./module/7.js";
  // import mo77 from "./module/7.js";
  // console.log(mo7===mo77);// true
  console.log(mo7);