ES6的模塊化

注意：
若是是單獨用 export 來導出的。
必須使用 import {xxx} from 'xxx'; 的方式來導入。

1.export

模塊的功能主要由 export 和 import 組成。 每個模塊都有本身單獨的做用域，模塊之間的相互調用關係是經過 export 來規定模塊對外暴露的接口，經過 import 來引用其餘模塊提供的接口。同時還爲模塊創造了命名空間，防止函數的命名衝突。

ES6容許在一個模塊中使用 export 來導出多個變量或函數。

導出變量：

//test.js
export var name = 'Rainbow';
export let username = 'Jack';
複製代碼

ES6不只支持變量的導出，也支持常量的導出。

export const GET_PRODUCT_LIST = 'GET_PRODUCT_LIST';    // 獲取商品列表
複製代碼

ES6將一個文件視爲一個模塊，上面的模塊經過 export 向外輸出了一個變量。一個模塊也能夠同時往外面輸出多個變量。

//test.js
let username = 'Rainbow';
let age = '24';
export {username, age};
複製代碼

導出函數：

//common.js
export function myClick(options){
    return options;
}
複製代碼

導入(import)

定義好模塊的輸出之後，就能夠在另一個模塊經過 import 引用。

import { myClick } from 'common';   //common.js
import { username, age } from 'test';   //test.js
複製代碼

一條 import 語句能夠同時導入默認函數和其餘變量。

import defaultMethod, { otherFunction } from 'xxx.js'; 
複製代碼

2.示例

咱們先來建立一個 test.js 文件，來對這一個變量進行輸出：

export let myName = "laowang";
複製代碼

而後能夠建立一個 index.js 文件，以 import的形式將這個變量進行引入：

import { myName } from './test.js';
console.log(myName);    //laowang
複製代碼

若是要輸出多個變量能夠將這些變量包裝成對象進行模塊化輸出：

let myName = "laowang";
let myAge = 90;
let myfn = function () {
    return "我是" + myName + "!今年" + myAge + "歲了";
}
export {
    myName,
    myAge,
    myfn
}
/*********************接收的代碼調整爲*******************/
import { myfn,myAge,myName } from "./test.js";
console.log(myfn());        //我是laowang!今年90歲了
console.log(myAge);         //90
console.log(myName);        //laowang
複製代碼

若是你不想暴露模塊當中的變量名字，能夠經過as來進行操做：

let myName = "laowang";
let myAge = 90;
let myfn = function (){
    return "我是"+myName+"! 今年"+myAge+"歲了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}
/********************** 接收的代碼調整爲 **********************/
import { fn, age, name } from "./test.js";
console.log(fn());    //我是laowang! 今年90歲了
console.log(age);     //90
console.log(name);    //laowang
複製代碼

也能夠直接導入整個模塊，將上面的接收代碼修改成：

import * as info from "./test.js";  //經過*來批量接收， as來指定接收的名字
console.log(info.fn());             //我是laowang! 今年90歲了
console.log(info.age);              //90
console.log(info.name);             //laowang
複製代碼

默認導出(default export)

一個模塊只能有一個默認導出，對於默認導出，導入的名稱能夠和導出的名稱不一致。

/******************* 導出 ******************/
export default function() {
    return "默認導出一個方法";
}
/************************ 引入 ********************/
import myFn from "./test.js";    //注意這裏默認導出不須要用 {}。
console.log(myFn());             //默認導出一個方法
複製代碼

能夠將全部須要導出的變量放入一個對象中，而後經過default export進行導出。

/******************* 導出 ******************/
export default {
    myFn() {
        return "默認導出一個方法"
    },
    myName: "laowang"
}
/******************** 引入 *****************/
import myObj from "./test.js";
console.log(myObj.myFn(), myObj.myName);  //默認導出一個方法 laowang
複製代碼

一樣也支持混合導出

/******************* 導出 ******************/
export default function() {
    return "默認導出一個方法";
}
export var myName = "laowang";
/******************* 引入 ******************/
import myFn, { myName } from "./test.js";
console.log(myFn(), myName);     //默認導出一個方法 laowang
複製代碼

重命名export 和 import 若是導入的多個文件中，變量名字相同，即會產生命名衝突的問題，爲了解決該問題，ES6爲提供了重命名的方法，當你在導入名稱時能夠這樣作：

/******************* test1.js *****************/
export let myName = "我來自test1.js"; 
/******************* test2.js *****************/
export let myName = "我來自test2.js";
/******************* index.js *****************/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);        //我來自test1.js
console.log(name2);        //我來自test2.js
複製代碼

參考： es6中的模塊化