摘要：開篇我叫王彬，現在是百度首頁業務部原網頁搜團隊索部前端的實習，兩天前我得知我所在的部門只有兩個，而且要分給策略，這就意味著我要面臨千軍萬馬過獨木橋的秋招。總結我在百度實習時接觸到過一個框架，用于百度首頁和首頁的模塊化開發。

為什么想起來做這樣一個專題呢，答案應該是為了勉勵面試筆試秋招中的自己吧！
而且也是為了和我一樣的你。

我叫王彬，現在是百度首頁業務部（原網頁搜團隊索部FE前端）的實習FE，
兩天前我得知我所在的部門只有兩個hc，而且要分給策略rd，
這就意味著我要面臨千軍萬馬過獨木橋的“秋招”。
可能我的描述有點夸張，但是此時此刻的真的是這么感覺的。
我覺得以我現在的水平，可能不會有一家大公司要我，所以我發自內心的厭惡秋招！
但是必須面對！
一起努力吧，希望自己可以一直寫下去。
所寫的文章肯定有不完善的地方，希望看的朋友可以指正，我會虛心接受一切聲音。
好，言歸正傳！
我今天要寫的是關于Amd和Cmd

首先來看這個http://www.zhihu.com/question...
玉伯知乎上的回答

說到Amd和Cmd，你可能和我一樣，最先想到的就是require.js以及sea.js
因為兩者分別的是Amd和Cmd的代表
在開始深入了解Amd以及Cmd之前，我和大家一樣，只是知道這都是js模塊化加載的工具
至于模塊化加載的好處自然不必多說，用過的應該都懂
那么我們就從require.js和sea.js蔓延開來講講Amd和Cmd

Amd是指Asynchronous Module Definition，異步的模塊加載機制。是在推廣require.js時對模塊規范化產出。

以下的內容引自阮一峰老師的博客http://www.ruanyifeng.com/blo...

要說Amd就要先從Common.js說起。

2009年，美國程序員Ryan Dahl創造了node.js項目，將javascript語言用于服務器端編程。
node.js的模塊系統，就是參照CommonJS規范實現的。在CommonJS中，有一個全局性方法require()，用于加載模塊。假定有一個數學模塊math.js，就可以像下面這樣加載。

var math = require("math");
math.add(2,3); // 5

有了服務器端模塊以后，很自然地，大家就想要客戶端模塊。而且最好兩者能夠兼容，一個模塊不用修改，在服務器和瀏覽器都可以運行。
但是，由于一個重大的局限，使得CommonJS規范不適用于瀏覽器環境。還是上一節的代碼，如果在瀏覽器中運行，會有一個很大的問題，你能看出來嗎？

第二行math.add(2,3)，在第一行require("math")之后運行，因此必須等math.js加載完成。也就是說，如果加載時間很長，整個應用就會停在那里等。

這對服務器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。

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

因此，瀏覽器端的模塊，不能采用"同步加載"（synchronous），只能采用"異步加載"（asynchronous）。這就是AMD規范誕生的背景。

下面具體的用法，看一下下面的舉例（具體詳細配置以及使用方法請大家查看require.js官方文檔）：

//通過數組引入依賴 ，回調函數通過形參傳入依賴 
define(["someModule1", ‘someModule2’], function (someModule1, someModule2) { 

    function foo () { 
        // something 
        someModule1.test(); 
    } 

    return {foo: foo} 
}); 

AMD規范允許輸出模塊兼容CommonJS規范，這時define方法如下：

define(function (require, exports, module) { 
     
    var reqModule = require("./someModule"); 
    requModule.test(); 
     
    exports.asplode = function () { 
        //something
    } 
}); 

但是值得注意的是：
仍然按照這種寫法，加載的模塊仍會被提前讀取且加載（記住是讀取且加載，后面有用），
與下面的這種寫法效果一樣！

define(["./someModule"], function (require, exports, module, reqModule) { 

    requModule.test(); 
     
    exports.asplode = function () { 
        // something
    } 
}); 

因此我們可以得出結論：
1.Amd推崇的是依賴前置。
2.Amd對加載的模塊是提前讀取并加載。

Cmd是指Common Module Definition，異步的模塊加載機制。是在推廣sea.js時對模塊規范化產出。
說到Cmd，大家千萬不要望文生義，認為這和Common.js在服務器端的加載方式相同，其實并不一樣。
其實Cmd更像是Amd和Common.js的升級版，結合了兩者的優點。

Common.js可以做到當需要這個模塊時，再讀取并加載。
Amd可以做到避免Common.js的 “臨時讀取并加載文件”，它是提前讀取并加載。

而Cmd可以做到的是，“提前讀取文件，但在需要再加載”，這樣可以避免瀏覽器臨時加載文件的假死，也可以避免提前加載引起的邏輯問題。

具體的邏輯問題指什么呢？我們來看這篇圖文并茂的講解：

請戳：https://www.douban.com/note/2...

請仔細看，如果有點懵的話，像我一樣，再看兩遍。

所以大家叫sea.js懶加載，也就是 “as lazy as possible”，如果你面試的時候說出這句話，面試官一定對你刮目相看。這也是Cmd的標志！
懶加載可以很好的作為判別Amd和Cmd的方法哈！

因此我們可以總結出：
1.Cmd推崇的是就近依賴。
2.Cmd對加載的模塊是提前讀取并不加載，而是在需要時加載。

我在百度實習時接觸到過一個框架，用于百度PC首頁和PAD首頁的模塊化開發。
這個框架是F框架（移動端由于性能優化的要求使用的是B框架，esl.js），感興趣的朋友可以深入了解一下。

F框架有一個特點，

F.module("hello", function () {
    // require("world");
    // do something...
}) 

如果代碼這么寫，雖然require("world")被注釋掉了
但是world這個模塊依然會被加載，大家知道為什么嗎？

答案是：因為F框架遵循的是Amd規范，會正則匹配factory也就是模塊的主體函數中的require字段，一但匹配到就會進行前置讀取并加載。
所以會出現這種現象。

這個例子希望可以幫助大家理解。
最后再看遍文章開頭提到的玉伯大神的問答 http://www.zhihu.com/question... 加深理解

文章的內容并不是全部原創，
我在網上借鑒了許多老師的經驗

http://www.zhihu.com/question...
https://www.douban.com/note/2...
http://zccst.iteye.com/blog/2...
http://www.ruanyifeng.com/blo...

感謝以上所有老師的智慧結晶！

下一次想和大家聊聊js原型那些事，爭取馬上更新！
對啦，大家有沒有什么復習數據結構與算法的好辦法，希望數據結構與算法大神指點明津！