研究一下javascript的模塊規範（CommonJs/AMD/CMD）

最近寫react須要使用nodejs做爲開發環境，須要經過npm安裝一些第三方的依賴庫，所以慢慢感受到nodejs基礎薄弱對我帶來了一些不安全感，尤爲是javascript模塊這一塊聽到了不少概念，好比：AMD，CMD，異步加載… …

我不禁的好奇，前端還能按需異步加載js，究竟是什麼聞所未聞的高科技？AMD, CMD聽起來像是主板型號，究竟是什麼鬼？因此，不如一探究竟吧！

模塊的黑歷史

這裏推薦先閱讀2個博客：

• 介紹了一下javascript模塊化的發展歷史，但不會講每一個規範的出現緣由或者工做原理，作一個興趣瞭解便可。
• 阮一峯的博客（Javascript模塊化編程（二），（三）），這裏淺顯易懂的講解了CommonJS，AMD，CMD爲什麼而生以及是如何工做的。
• 詳細看看CMD和AMD的使用差別，重點關注一下AMD依賴前置和CMD依賴就近。

通過閱讀後，我獲得了這樣幾個理解，與你們分享：

• 模塊簡單理解就是從某個js文件導出的若干代碼，引入模塊則可使用其導出的功能。
• 模塊加載分爲同步和異步，在服務端編程時因爲模塊的js文件在磁盤上，所以同步加載便可瞬間完成；而若是是瀏覽器中但願加載一個js模塊，那麼須要經過網絡請求服務器把對應的js文件下載回來，所以適合異步，也就是等下載完成後callback通知你。
• CommonJs就是nodejs遵循的規範，簡單說就是同步的require對應的js文件便可。我以前寫的react項目都屬於這一類，經過服務端直接編譯生成bundle.js將全部依賴的js模塊打包到一塊兒發佈，所以壓根沒有瀏覽器下載依賴js的需求。
• AMD就是爲了解決瀏覽器異步下載js文件產生的一個規範，其典型實現就是Require.js。基於Require.js編寫的js模塊，能夠定義其依賴模塊，當依賴和模塊自身均加載的完成時候，將經過回調的形式異步通知。這能夠避免由於下載模塊與其依賴模塊期間阻塞了瀏覽器的正常渲染。
• CMD的典型實現是seajs，它貌似是看不起AMD將依賴前置的寫法（以爲不太天然），因此再也不要求一次性把依賴模塊列出來，而是在回調中提供require方法，用戶按需reqquire依賴模塊。乍一想，這樣require依賴模塊豈不是又成了同步加載？？？原來，它是經過靜態分析模塊代碼裏的require調用（正則匹配）來採集依賴的模塊，本質上和AMD同樣是提早異步加載的，這方面能夠看一下博客：CMD的實現原理。

不要把異步加載想的很複雜，其實js文件的內容是能夠經過瀏覽器ajax下載，而後動態建立script標籤，將js內容填充進去就能夠執行了。

通通與我無關 – 我只要CommonJs

根據上述黑歷史可知，nodejs採用的是CommonJs規範，而且對於react後端編譯的發佈模式的來講，CMD和AMD對我意義真的不大！

鑑於react開發常常遇到一些報錯，加深對CommonJs的認識必定程度上有利於我排查第三方庫的使用問題，所以我決定學一下。

這裏，我經過博客《nodejs的exports的用法》來學習nodejs模塊的常見用法，3個關注重點：

1. exports是指向了module.exports，而最終require導入的是module.exports，因此像exports = xxx這種寫法：僅僅是讓exports脫離了對module.exports的引用，並不能實現導出的效果。
2. require是按文件路徑緩存的，所以屢次require返回的是同一個對象，這就給monkey patch（爲現有模塊打補丁）提供了可能性。
3. 熟悉常見的模塊導出方式，這個博客介紹了導出這些東東：命名空間，工廠方法，偏函數，構造函數，單例，全局對象。

有些東西，瞭解一下仍是有幫助的，因此要好好學。

有些東西，瞭解or不瞭解都不會形成影響，能夠選擇後學或者不學。

重要的是知道什麼對本身有真正的意義。