ES6模块化

es6模块化：每一个JS即是一个模块。模块内部定义的变量或常量在外部是无法直接使用的。

一、直接导出

• 如何导出

  // 通过export导出
  export let userName = "zhangsan";
  export const age = 24;
  export function fn(){
      console.log("fn",this);// undefined
  }
  export let run = function(){
      console.log("run",this);// undefined
  }
  export let my = ()=>{
      console.log("my",this);// undefined
  }
  

• 如何引入

  // 1- 通过{}来接收导出的变量或常量,名字要保持一致
  import {userName,age,fn,run,my} from "./module/mo1.js";
  console.log(userName);// zhangsan
  console.log(age);// 24
  fn();
  run();
  my();
  

二、可以先定义再导出

• 如何导出

  let userName = "zhangsan";
  const age = 12;
  function fn (){
      console.log("fn",this);// fn undefined
  }
  // as ----> alias
  export {
      userName,
      age,
      // 可以通过as起别名
      fn as run
  }
  

• 如何引入

  import {userName,age,run} from "./module/mo2.js";
  console.log(userName);//zhangsan
  console.log(age);//12
  run();
  

三、通过as解决命名冲突

• 如何导出

  export let a = 1;
  export let b = 2;
  

• 如何引入

  // 3-通过as解决命名冲突
  let a = 100;
  import {a as aa,b} from "./module/mo3.js";
  console.log(a,b,aa);// 100,2,1
  

四、通过*批量接收

• 如何导出

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

• 如何引入

  // 4-通过*批量接收,as 右侧是一个对象,该对象拥有的属性,即是导出的内容.
  import * as mo4 from "./module/mo4.js";
  console.log(mo4.a);// 1
  console.log(mo4.b);// 2
  console.log(mo4.f);// 6
  

五、通过export default默认导出

• 如何导出

  // 导出数字1
  // export default 1;
  // 导出字符串
  // export default "字符串";
  // 导出函数
  // export default function(){
  //
  // }
  
  // 导出对象
  let c = 3;
  export default {
      a:1,
      b:2,
      c
  }
  

• 如何引入

  // 5- 默认导出(使用频率最高):默认导出只能导出一个.
  import mo5 from "./module/mo5.js";
  console.log(mo5);
  

六、混合导出

• 如何导出

  // 将直接导出与默认导出一起使用
  export let userName = 'zhangsan';
  export let age = 12;
  export default {
      a:1,
      b:2,
      c:3,
      fn(){
  
      },
      userName
  }
  

• 如何引入

      import mo6,{userName,age} from "./module/mo6.js";
      console.log(userName,age,mo6);// zhangsan 12 {a:1,b:2,c:3,fn:}
  

七、同一个模块，被引入多次，只会执行一次。

• 如何导出

console.log(123);
export let userName = "zhangsan";

• 如何引入

import "./module/mo7.js";
import {userName} from "./module/mo7.js";
import {userName as userName2} from "./module/mo7.js";
import {userName as userName3} from "./module/mo7.js";

\