之一：关于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原型那些事，争夺立时更新！
对啦，人人有无什么温习数据结构与算法的好办法，愿望数据结构与算法大神指点明津！