之一：關于Cmd和Amd

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

1.開篇

我叫王彬，現在是百度首頁業務部（原網頁搜團隊索部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

2.Amd的代表require.js

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對加載的模塊是提前讀取并加載。

3. Cmd代表的sea.js

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對加載的模塊是提前讀取并不加載，而是在需要時加載。

4. 總結

我在百度實習時接觸到過一個框架，用于百度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原型那些事，爭取馬上更新！
對啦，大家有沒有什么復習數據結構與算法的好辦法，希望數據結構與算法大神指點明津！

總結

以上是生活随笔為你收集整理的【面试系列】之一：关于Cmd和Amd的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。