前端模塊化規範

什麼是模塊？

塊的內部數據與實現是私有的，只是向外部暴露一些接口與外部其餘模塊通訊

採用 CommonJS 模塊規範

在服務器端，模塊的加載是運行時同步加載的，在瀏覽器端，模塊須要提早編譯打包處理。

CommonJS。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。

基本語法：

暴露模塊：module.exports = value 或 exports.xxx = value

引入模塊：require(xxx),若是是第三方模塊，xxx爲模塊名；若是是自定義模塊，xxx爲模塊文件路徑

侷限：不適用於瀏覽器環境，require操做是同步的。這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。

可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於」假死」狀態。

所以，瀏覽器端的模塊，不能採用」同步加載」（synchronous），只能採用」異步加載」（asynchronous）

採用AMD規範

特色：非同步加載模塊，容許指定回調函數

require.js。

CMD

特色：專門用於瀏覽器端，模塊的加載是異步的，模塊使用時纔會加載執行

Sea.js

CMD與AMD區別

UMD

UMD是AMD和CommonJS的糅合。UMD先判斷是否支持Node.js的模塊（exports）是否存在，存在則使用Node.js模塊模式。再判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。

ES6模塊化

ES6 模塊的設計思想是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時肯定這些東西

ES6 Module默認目前尚未被瀏覽器支持，須要使用babel

導入：import

導出：export {<變量>}，export default

ES6 在語言標準的層面上，實現了模塊功能，並且實現得至關簡單，徹底能夠取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。