前端各種模組化規範

記錄一些要點，以便於常記起時有據可循！

回首來時走過的-模組化之路  先前對於自個兒模組化之路的簡單回顧，由於雜七雜八的內容太多，屬於只可意會型，不便於對前端的模組化進行全面的理解；這幾天面試了些前端，發現除了大神來秒殺我之外，大多人對模組化這塊都比較陌生，甚至沒聽說過模組化是個什麼玩意兒，那麼就有些尷尬了；看看現在三分天下的流行框架：React、Angular(2)、Vue，他們的最大的共同點就是：模組化、元件化；還有由Nodejs衍生而來的各種前端建構工具：Webpack、Gulp、Systemjs，使用它們的基礎也是模組化、組件化，如果你一定要說，你沒有模組化、組件化，項目也跑的挺歡，也能用上這些構建工具，那麼，只能呵呵了，何必呢？可見，模組化是必須的，無論專案大小，都得好好理解，從而應用到實踐中去，一方面提高工作效率，另一方提高自己的前端水平；

至於模組化的好處，網上各種論調就不多說了，除此之外，更重要的是：在模組化的基礎上形成一種團隊成員間的默契化規範，形成團隊內的私有倉庫，統一管理，達到像後端調用package一樣自然而然的調用前端模組的目的；

一切源自CommonJS：

不要怕這又是個什麼框架要去花時間學習，CommonJS是JS的模組化規範，由於JS的歷史原因，起初並沒有模組化之說，之後JS成為了瀏覽器端的事實標準，地位越來越重要，CommonJS規範就是為了解決這個問題而提出的，並希望JS不僅僅運行於瀏覽器端，而是任何地方；感覺很牛逼的樣子！然後，Nodejs在服務端實作了CommonJS規範，從而將JS從瀏覽器的小環境拉到了前後端通行的大環境，醜小鴨終於變成天鵝了！

按照CommonJS規範，文件即模組，使用require引用和加載模組，exports定義和導出模組，module標識模組，使用require時需要去讀取並執行該文件，然後返回exports導出的內容，由於模組的讀取執行是同步的檔案操作，所以CommonJS只能在服務端由Nodejs發揚光大，Nodejs的模組化可以看看這裡：Browserify讓你的Javascript遊走於前後端；但是在瀏覽器端，這種同步操作並不適用，至少會很耗時，阻塞後續程式碼的運作；從而在瀏覽器端由CommonJS衍生出兩大分支：AMD（非同步模組定義）和CMD（通用模組定義）；

AMD（非同步模組定義） ：

AMD的代表是RequireJS，透過define(id?, dependencies?, factory)來定義模組，require([dependencies], function(){})來呼叫模組，使用提前異步載入依賴模組的方式，模組載入依賴模組的方式，模組載入依賴模組的方式，模組載入依賴模組的方式，模組加載完畢後執行回調函數，這裡要好好理解JS的異步機制，不可按同步順序執行的思維去理解，多個文件異步並行加載，哪個先執行完不是你按照加載順序可預料到的，而是等所有依賴執行完畢，最後一併回呼結果；

CMD（通用模組定義）：

CMD的代表是SeaJS，與RequireJS定義和載入模組的方式略有不同，同樣可以透過define(id?, dependencies? , factory)定義模組，但是SeaJS是採用的就近依賴的方式來加載模組，一般不在dependencies裡依賴模組，而是統一寫法：define(function(require, exports, module){})，在factory裡就近加載依賴模組，由seajs.use([dependencies],function(mod,[mod]){})來使用模組；本質上也是異步的加載模組，只是和RequireJS相比加載和執行的時機不一樣罷了；

相比來說，Seajs和Requirejs都是很不錯的前端模組化組織方案，各有千秋；Requirejs要等到所有前置依賴加載並執行完畢，再回調主要的程式碼邏輯，如果非要說有所欠缺，就得在前置依賴那裡做優化了，但大致上是很流暢的；Seajs只是將依賴模組預先加載並不執行，在需要時就近使用，這時就可能也許會出現延遲的現象；

關於Seajs的簡單理解：

好好的Seajs，說不用就不用了

好好的用好seajs吧！

工具是非常重要的生產力：

雖然瀏覽器端流行的模組化規範是AMD和CMD，但是藉助工具的力量，我們依然可以在瀏覽器端模擬CommonJS規範，比如借助Gulp、Webpack之類的工具，我們在開發環境依然可以像寫Nodejs一樣寫前端的JS程式碼，由工具打包成瀏覽器可運行的JS，同樣，異步的調用代碼塊也是可行的；

UMD（通用模組規範）：

現在JS已經可以通行前後端了，那麼很大程度上一個JS模組是既可以在瀏覽器端運行，同時也能在服務端跑了，UMD方案即是對AMD和CommonJS規範的整合，實現對JS模組化的跨平台；像下面這個鬼樣子：

(function(root, factory){
if(typeof define ==='function'&& define.amd){
// AMD
define(['jquery'], factory);
}elseif(typeof exports ==='object'){
// Node, CommonJS之类的
module.exports = factory(require('jquery'));
}else{
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this,function($){
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
}));

ES6的模組化：

ES6作為JavaScript新的標準，自帶了模組化的buff，透過import和export導入導出模組；基本思想與CMD、AMD差不多，只是多了更多語法糖式的東西，畢竟屬於原生的支持，當然更好用、更容易理解；由於目前的瀏覽器環境，要想安心的使用，還是得藉助工具的力量進行轉換；

總之，前端的模組化是必須的！不能安於現狀，即便隨便弄兩下也能運作；很多時候靜止也是一種後退，因為太多大神還比我們努力！