ES6深刻淺出 模塊系統

一步，一步前進の一步。

模塊化主要是幫助咱們更好的組織代碼，模塊容許咱們將相關的變量和函數放在一個模塊中。在 ES6 模塊化以前，JS 語言並無模塊的概念，只有函數做用域和全局做用域很是容易發生命名衝突。以前的 RequireJS、SeaJS、AMD、UMD、CMD啥的，在必定層面上都是爲了解決 JS 模塊化的問題。

筆者是一個也不會用啊（技術發展太快了，新技術學不過來，仍是坐等它們過期吧，果真 webpack 和 es6替代了它們），一步心中有個期待，啥時候咱們用的 ES六、ES7直接運行在瀏覽器上吧，我如今還坐等 webpack 和 babel 死掉呢，一點還不會呢。

什麼是模塊

模塊是自動運行在嚴格模式下的JS 代碼，在模塊中建立的變量不會被添加到全局共享做用域，這個變量只會存在於模塊的做用域中，在模塊中 this的值是 undefined。模塊的真正魔力所在是僅導入、導出你須要的綁定，而不是將所用的東西都放在一個地方。一個文件即一個模塊。

嚴格模式

模塊中的代碼是在嚴格模式下運行的，等同於在文件的頂部use strict。JS 在嚴格模式下使用會更加的嚴謹。簡單列舉幾條嚴格模式的規則：

1. 變量使用前必須聲明
2. 函數不能有重名參數
3. with 不容許使用

。。。
更多規則請參考阮一峯老師的文章嚴格模式

export

在 ES6模塊中的聲明的做用範圍就被限定在了模塊文件中，文件外部是沒法訪問的，必須使用 export關鍵字將引用顯示的暴露出去。

默認導出

可使用 export default進行默認導出,注意一個模塊中只能夠有一個默認導出。

export default 1
export default NaN
export default 'foo'
export default { foo: 'bar' }
export default ['foo', 'bar']

命名導出

命名導出和默認導出一樣經常使用，若是一個模塊想要導出多個聲明時較爲經常使用，使用以下：

export var foo = 'bar'
export var baz = 'ponyfoo'

導出是綁定

須要注意的是 ES6模塊導出的是綁定關聯，不是值的複製，意味着若是你導出一個變量 foo,那麼 foo 是和模塊內部是相互關聯連動的，我我的反對去更改一個模塊所暴露出來的接口(export出來的部分)。

假設你有個模塊./a，導出的 foo 變量初始值是 bar 將在500ms 變成 baz，在使用該變量的地方（import處）也會有該變化。

export var foo = 'bar'
setTimeout(() => foo = 'baz', 500)

導出列表

ES6 的模塊容許你導出一個命名導出列表，代碼片斷以下：

var foo = 'ponyfoo'
var bar = 'baz'
export { foo, bar }

同時能夠對命名導出進行重命名:

export { foo as ponyfoo }

導出的最佳實踐

咱們學會了命名導出、導出列表、默認導出、導出重命名，此時你應該有點疑惑，我該選擇那種方式實現本身的導出呢？人吶之因此煩惱，就是由於選擇太多了。做者推薦你們在文件的尾部使用export default進行默認導出。

var foo = 'ponyfoo'
var bar = 'baz'
...

var api = {
  foo,
  baz,
  ...
}
export default api

這樣作的好處以下:

1. 模塊中導出的部分變得顯而意見，不須要從頭至尾去找模塊中哪裏是私有的，哪裏是須要export 出去的，只須要滾動到文件底部就能夠一目瞭然。
2. 不用糾結是應該使用命名導出，列表導出，仍是重命名導出了，只使用export default不知道你們有沒有注意到，當你將一個對象做爲默認導出接口時，便可以結合命名導出，還能夠重命名，還能支持導出多個。

import

import 關鍵字的做用和 export 的做用正好相反，import 的做用是當年想使用其餘模塊中的內容時進行關係綁定。

導入默認導出

當想在另外一個模塊中使用上一個模塊的默認導出時十分方便，impprt 後面的名字能夠隨便起，代碼以下：

import _ from 'lodash'
import lodash from 'lodash'

導入命名導出

import關鍵字後面使用花括號包上你想要使用的命名導出。

import {map, reduce} from 'lodash'

導入時也能夠進行重命名

import {cloneDeep as clone, map} from 'lodash'

徹底導入一個模塊

import * as _ from 'lodash'
//使用時採用_.的形式
_.map()

無綁定的導入

有些模塊也許沒有進行任何導出，相反只是修改全局做用域的對象。儘管這種模塊的頂級變 量、函數或類最終並不會自動被加入全局做用域，但這並不意味着該模塊沒法訪問全局做用 域。

加載模塊

雖然咱們平常編碼中在使用 ES6的 import和 export 關鍵字，可是仔細想一下，咱們並不瞭解 ES6的模塊是如何加載的，只知道打包工具幫咱們處理好了，實際上咱們並不瞭解模塊化的知識。有時間再更新👻。
。。。。

原文ES6 Modules in Depth

🌚 前端學習QQ羣: 538631558 🌚

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。