ES6 module使用示例（模塊化加載文件）

在使用到不少前端框架時候，不少框架都採用了模塊化的文件加載方式，利用import export 語句完成分割文件的功能。爲了更好的使用各個框架咱們就看看ES6模塊化的基本使用

---

export 導出的基本類型

首先導出通常有兩種方式，聲明的時候直接導出，或者聲明完成後導出。

//first method
export var firstName = 'Ajaxyz'
// second method
var firstName='Ajaxyz'

export {firstName}

1.變量（包括常量）

export var firstName = 'Ajaxyz'
export let lastName = 'Vue'
export const birthDay = new Date('1992-7-23')

2.函數

function logError() {
    console.log('here goes a mistake')
}
export { logError as log }

as 能夠給導出的變量或函數從新命名
3.類

export class Person {
    constructor() {
        this.name = firstName + lastName
        this.gend = 'female'
    }

    showName() {
        console.log(this.name)
    }
}

若是咱們想隨意指定導出的接口名稱，不用在導入的文件中和導出的文件保持命名一致，能夠使用default,可是default只能導出一個默認接口。

使用默認導出default

//export default variable
var defaultValue = 'http://www.sg.com'
export default defaultValue//needn't curly brave

//export default class
//1.
 class Person {
    constructor() {
        this.name = firstName + lastName
        this.gend = 'female'
    }

    showName() {
        console.log(this.name)
    }
}
export default Person
//2.
export default class Person {
    constructor() {
        this.name = firstName + lastName
        this.gend = 'female'
    }

    showName() {
        console.log(this.name)
    }
}

//export default function
//1.
export default function logError() {
    console.log('here goes a mistake')
}
//2.
function logError() {
    console.log('here goes a mistake')
}
export default logError

import 語句用法

1.導入普通變量，類，函數

import {lastName,birthday，funcion1}from 'data'
//命名必須和export保持一致

2.導入default

import var1 from 'data'//the name of import variable needn't 
                      // be the same with the variable it is exported

3.把全部變量，函數做爲一個對象的屬性導入

import * as externalFile from './data'
console.log( externalFile.firstName)

4.導入的時候從新命名

import {log as error}from './data'

注意的幾個問題

1.導入的文件中的可執行代碼會被執行一遍，且不管導入多少次只會執行一遍。
2.import export 是靜態編譯用到他們的時候不能使用可運行的語句，例如if判斷，變量賦值
var x='./index.js' import v from x//error exmaple ,import export 必須在代碼頂層不能放置在某個代碼塊中，可是能夠放置在任意行，沒必要在開頭。