ES6模块化

ES6模块化

ES6模块化规范

ES6模块化规范中定义：

• 每个js文件都是一个独立的模块
• 导入模块成员使用import关键字
• 暴露模块成员使用export关键字

ES6模块化的基本语法

1. 默认导出与默认导入

   • 默认导出语法exprot default 默认导出成员

     //当前文件模块为m1.js
     
     //定义私有成员a和c
     let a = 10;
     let c = 20;
     //外界访问不到d因为没有暴露出去
     let d = 30;
     
     function show(){}
     export default {
         a,
         c,
         show
     }
     

   • 默认导入模块成员

     //导入模块成员
     import m1 from './m1.js'
     
     console.log(m1)
     //打印输出结果为：
     //{a: 10,c: 20, show:[Function: show]}
     

ES6按需导出与按需导入

• 按需导出语法 export let s1 = 10

  //当前文件模块为 m1.js
  
  //向外按需导出变量s1
  export let s1 = 'aa'
  //向外按需导出变量s2
  export let s2 = 'bbb'
  //向外按需导出方法say
  export function say  = function() {}
  

• 按需导入语法 import {s1} from ‘模块标识符’

  import {s1,s2 as ss2,say} from './m1.js'
  //默认导入和按需导入同时存在import m1, {s1,s2 as ss2,say} from './m1.js'
  
  console.log(s1) //打印输出aa
  console.log(ss2) //打印输出bbb
  console.log(say) //打印输出[Function: say]
  

• 默认导出只能使用一次，按需导出可以使用多次

ES6直接导入并执行模块代码

有时候，我们只想单纯的执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时可以直接导入并执行模块代码

//当前文件模块为m2.js

//在当前模块中执行一个for循环操作
for(let i = 0;i<3 ;i++){
    console.log(i);
}

//直接导入并执行模块代码
import './m2.js'