ES6模塊化操作

在ES5中我們要進行模塊化操作需要引入第三方類庫，隨着前后端分離，前端的業務日漸復雜，ES6為我們增加了模塊化操作。模塊化操作主要包括兩個方面。
export :負責進行模塊化，也是模塊的輸出。
import : 負責把模塊引，也是模塊的引入操作。

export的用法：

export可以讓我們把變量，函數，對象進行模塊化，提供外部調用接口，讓外部進行引用。先來看個最簡單的例子，把一個變量模塊化。我們新建一個temp.js文件，然后在文件中輸出一個模塊變量。

export var a = 'js';

然后可以在index.js中以import的形式引入。

import {a} from './temp.js';
console.log(a);
這就是一個最簡單的模塊的輸出和引入。

多變量的輸出

這里聲明了3個變量，需要把這3個變量都進行模塊化輸出，這時候我們給他們包裝成對象就可以了。

var a ='js';
var b ='技術';
var c = 'web';
export {a,b,c}

函數的模塊化輸出

as的用法

有些時候我們並不想暴露模塊里邊的變量名稱，而給模塊起一個更語義話的名稱，這時候我們就可以使用as來操作。

var a ='js';
var b ='技術';
var c = 'web';

export {
    x as a,
    y as b,
    z as c
}

import用as方式引入 (多個變量用一個空對象來代理,你所有的方法和屬性都是在types命名空間)

 const LOGIN = 'login';

 const LOGOUT = 'logout';

 const TITLE = 'title'

 export {LOGIN,LOGOUT,TITLE}

import * as types from './temp.js' //你所有的方法和屬性都是在types命名空間

調用里面里面的值可以 這樣做
types.LOGIN 
types.LOGOUT
types.TITLE

export default的使用

加上default相當是一個默認的入口。在一個文件里export default只能有一個。我們來對比一下export和export   default的區別

1.export

export var a ='js';

export function add(a,b){
    return a+b;
}
對應的導入方式
import {a,add} form './temp';//也可以分開寫

2.export defalut

export default var a='jspang';
對應的引入方式
import str from './temp';

ES6的模塊化不能直接在瀏覽器中預覽，必須要使用Babel進行編譯之后正常看到結果。這節課講完我們ES6的課程就算結束了，你可能覺的沒有書上的內容多，那是因為很多東西都歸到了ES7中。甚至連Babel都不能很好的轉換，這些知識我就不給大家講解了。另外如果你想繼續深入學習，可以搜索阮一峰大神的ES6在線圖書。

 與es5對應的寫法

var App = require('./App')  等價寫法   import App from './App'
module.exports={ } 等價寫法  export default { } 

 實例

const formatStartTime = date => { 功能塊代碼 }

module.exports = {
    formatStartTime: formatStartTime,
}

import formatStartTime from '../../assets/js/curData'
var StartTime =formatStartTime.formatStartTime;