模塊化之AMD、CMD、UMD、commonJS

作後臺的對模塊化的思想很清晰，都是類、繼承什麼的，而JavaScript早期開始就沒有包、類模塊的概念，甚至只有函數做用域。

我理解的模塊就是實現特定功能的文件或者代碼，模塊化就是隔離、組織這些複雜功能代碼。模塊可讓咱們更方便的加載不一樣的功能。

如今還有什麼組件化、插件化，我以爲都是模塊化思想。好比登陸是模塊、搜索是模塊、訂單是模塊，UI庫的吐司是組件、select是組件、pick是組件，jq的時間插件、視屏插件。這三者具體怎麼區分還真不知道怎麼去描述，可是我以爲思想都是同樣的。

模塊化的優勢：

避免變量污染、命名衝突

提升代碼複用率

提升可維護性

方便依賴管理

這些優勢應該是不須要解釋吧，一看就能知道了。

早以前JavaScript的模塊化有如下幾種：

函數：每個函數就是一個模塊

對象：一個模塊就是一個對象，有屬性有方法

當即執行函數：跟函數原理同樣

而模塊化有一個重點就是規範，不能各自寫各自的，須要統一使用一個規範，如今主流的幾個模塊化規範：commonJS、AMD、CMD、UMD

CommonJS：

這應該是最先的JavaScript模塊化編程，主要是用於服務端，nodeJS就是使用commonJS，咱們最經常使用的webpack也是使用commonJS。CommonJS規範中一個文件就是一個模塊，經過exports暴露模塊內的內容，經過require加載模塊使用，且commonJS是同步的，由於在服務端文件就在本地，能夠不用考慮異步。

AMD（Asynchronous Module Definition）：

CommonJS出來以後，因爲是同步，瀏覽器並不適合，咱們不可能等全部都加載完成才顯示頁面。因而AMD規範就出來了。AMD是requireJS推廣過程的規範產出，支持異步，因此AMD也是經過require加載模塊目前主要有兩個Javascript庫實現了AMD規範：require.js和curl.js。

CMD（Cmomon Module Definition）：

CMD是大神玉伯提出的，而後根據這個規範寫了個seaJS。由於AMD想兼容瀏覽器和後臺，因此大神就搞了個專一於瀏覽器的CMD。要說requireJS和seaJS最大的區別就是加載的機制：

SeaJS只會在真正須要使用(依賴)模塊時才執行該模塊

RequireJS會先儘早地執行(依賴)模塊, 至關於全部的require都被提早了

UMD（Universal Module Definition）：

通用模塊定義，兼容AMD和commonJS的規範，也就是AMD和commonJS的一個糅合。AMD異步加載，commonJS同步加載，而UMD就是判斷環境，有nodejs模塊（require）就使用commonJS，有AMD模塊（define）就使用AMD。

ES6：

ES6提供了模塊化export和import的實現。能夠說ES6模塊化的實現是替代UMD，服務器和瀏覽器都會實現ES6的模塊化。

最後總結一下：

CommonJS：同步加載，適用於服務器，node、webpack使用；

AMD：異步加載，瀏覽器使用，實現的requireJS想兼容服務器和瀏覽器，預加載。

CMD：異步加載，專一於瀏覽器，實現的是seaJS，玉伯大神提出的，使用時加載。

UMD：AMD和commonJS的結合，能夠服務端使用也能夠瀏覽器使用。

ES6：語言標準的模塊化，取代UMD，服務器和瀏覽器都能使用。

只是分享一下這幾個規範的大體理解，至於requireJS、seaJS怎麼使用，就自行查找資料。

Coding 我的筆記