ES6模塊化

關於ES6模塊化

歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程式拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、複雜的項目形成了巨大障礙。

在nodeJS中，有模塊化的方法，使用CommonJS規範可以做到模塊化，也就是說，只有在用js進行後端node開發的時候，才能使用模塊化，前端js依然不行

在前端我們可以使用requireJS，seaJS來實現模塊化，但是requireJS也是通過對script標簽進行非同步導入的方式來進行，並不是js里自帶的語法

我們也可以使用webpack工具來進行模塊化打包，是因為webpack跑在nodeJS中，說到底還是nodeJS中的模塊化

但是在ES6中，我們第一次在js語法中加入了模塊化的東西，目前很多瀏覽器都不支持，所以說還需要編譯

ES6模塊化的規範

模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外介面，import命令用於輸入其他模塊提供的功能。

1. 暴露

可以export直接暴露出某些對象，可以暴露多個：

    //暴露多個介面 在定義的時候暴露
    export let str = 'abcd'
    export  let fn = function(){
        console.log('fn')
    }
    export let person = {
        name:'二狗'
    }

    //暴露多個介面，在{}里放入要暴露的對象
    export {str,fn,person}

因為直接暴露的對象在引入的時候名字不能改變，可能會導致在引入的模塊中造成命名衝突
可以在暴露的時候通過as來定義別名

    export {str as a_str,fn as a_fn,person as a_person}

在暴露對象的時候，如果只有一個，可以default暴露，在引入的時候叫啥都行，也不用加{}

    export default fn

default只能暴露一個東西，如果我們有一個是defualt暴露的，還有幾個是具名暴露

    export default str
    export {fn,person}

引入：

    import abc,{fn,person} from './modules/module_a'//abc就是上面的str

1. 導入

   如果被引入的模塊沒有暴露，只是一段邏輯代碼需要在引入模塊里運行的話

    import './modules/empty'

如果要導入某一個模塊中暴露的一些對象的話，註意，不一定非要把其暴露的模塊全部引入，導出的對象的名字不能錯

    import {str,fn,person} from './modules/module_a.js'
    console.log(str,person)
    fn()

在引入模塊中暴露的介面的時候，很可能會產生命名衝突，依賴於在暴露的時候定義別名的話，也不是很安全，所以最好在引入的時候命名別名

    import {str as a_str,fn as a_fn,person as a_person} from './modules/module_a.js'

如果要引入的模塊暴露出來的對象有很多，我們在引入的時候可以放入到一個對象中去使用：
A對象不需要自己定義，引入的時候會自動創建

    import * as A from './modules/module_a'
    console.log(A)