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'