ECMAScript6.0新特性介紹第七篇

在這篇部落格中我將介紹ES6的模組化。在ES6當中一個JS檔案就是一個模組，如果想要實現模組與模組之間進行訪問。就要用到ES6的兩個模組化命令：export和import。export關鍵字用於使用者自定義模組的對外介面，而import命令輸入其他模組的功能。關於import和export的使用參考如下程式碼：

• 使用export匯出單個變數。

//student.js
let name= 'zhangsan';
let age = '19';
let sex= 'male';
export {name, age, sex};

• 使用import命令獲取其他模組匯出的變數

import {name, age, sex} from './student';
console.log(name+':'+age+':'+sex);//輸出zhangsan:19:male
//你也可以給匯入的變數起別名
import { name as nickname} from './student';
console.log(nickname);//輸出zhangsan

• 使用export匯出函式

    // math.js 以下函式的作用是將傳入的一組引數乘以二倍後返回。
   export function double(...args) {
    return args.map(x => x * 2);
}
    //以下函式的作用是將傳入的引數進行求和。
    export function sum(...args) {
    let sum = args.reduce((currentSum, item, index) => currentSum + item);
    return sum;
}

• 使用import引入其他模組匯出的函式

import { double, sum} from './math';
console.log(double(1,2,3,4,5,6,7,8,9,10));//輸出:2,4,6,8,10,12,14,16,18,20
console.log(sum(1,2,3,4,5,6,7,8,9,10));//輸出：55

• module命令：可以取代import語句，達到整體輸入模組的作用。

module math from './math';
console.log(math.double(1,2,3,4,5,6,7,8,9,10));//輸出:2,4,6,8,10,12,14,16,18,20
console.log(math.sum(1,2,3,4,5,6,7,8,9,10));//輸出：55

• export default命令：為載入模組指定預設輸出

 // hello.js
 export default function () {
      console.log('weclome to the imooc!');
    }
//其他模組載入hello.js時可以指定任意名稱。
import  imooc from './hello';
imooc(); // 輸出'weclome to the imooc!

關於ES6的模組化就介紹到這裡。