JS模塊簡介

js模塊化，簡單說就是將系統或者功能分隔成單獨的、互不影響的代碼片段，經過嚴格定義接口，使各模塊間互不影響，且可以為其他所用。

常見的模塊化有，C中的include (.h)文件、java中的import等。

為什么JS需要模塊

很顯然，沒有模塊我們也可以實現同樣的功能，為什么我們還要使用模塊來寫js代碼呢？下面幾點是模塊化給我們帶來的一些變化：

ES5及之前的模塊系統

在ES5及之前版本，還沒有原生的模塊語法。不過這并不代表ES5之前，前端沒有使用模塊。簡單介紹兩種：IIFE、Revealing Module.

IIFE

Immediately Invoked Function Expression，立即執行函數表達式。

(function(){  // ... })()

看上面的代碼，IIFE可以說成是一個在定義的時候就執行的匿名函數。注意函數是先被”()”包起來了，然后后面緊跟”()”表示執行函數。如果是以下代碼，將會報錯：

function(){  console.log('test'); }() // => Uncaught SyntaxError: Unexpected token )

這種寫法表示，先定義一個匿名函數，然后再去解析”()”。由于在第一行”function”出現在首位，這表明此處定義一個函數，函數后緊跟”()”，此時表示單獨解析”()”，就會報出上面的錯誤信息，因此需要先將函數定義包裹起來。
“(function…)”這種寫法表示執行”()”內部代碼，并返回該語句執行結果，此處返回結果為該函數，后面緊跟”()”即表示執行該函數。IIFE可以幫助我們做到：

顯而易見，這種編碼方式并沒有提供良好的機制來解決依賴管理問題。

Revealing Module

根據字面暫解釋為揭示模式，與IIFE形式類似，但是提供了一個返回值。方便集中管理公有的api，使模塊、公用api更加簡潔清晰。

// Expose module as global variable var singleton = function(){  // Inner logic  function sayHello(){  console.log('Hello');  }  // Expose API  return {  sayHello: sayHello  } }()

稍微注意下，上面的代碼，我們并沒有用”()”去包裹，因為關鍵字”function”并不在該行的開頭。