前端模塊化開(kāi)發(fā)

常見(jiàn)的三大模塊化框架。

CommonJS：

1.根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)，在該模塊內(nèi)部定義的變量，無(wú)法被其他模塊讀取，除非定義為global對(duì)象的屬性
2.模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
3.加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象

    //模塊定義 myModel.js

    var name = 'Byron';

    function printName(){
        console.log(name);
    }

    function printFullName(firstName){
        console.log(firstName + name);
    }

    module.exports = {
        printName: printName,
        printFullName: printFullName
    }

    //加載模塊

    var nameModule = require('./myModel.js');

    nameModule.printName();

問(wèn)題：仔細(xì)看上面的代碼，會(huì)發(fā)現(xiàn)require是同步的。模塊系統(tǒng)需要同步讀取模塊文件內(nèi)容，并編譯執(zhí)行以得到模塊接口。這在服務(wù)器端實(shí)現(xiàn)很簡(jiǎn)單，也很自然，然而， 想在瀏覽器端實(shí)現(xiàn)問(wèn)題卻很多。瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script 標(biāo)簽。但腳本標(biāo)簽天生異步，傳統(tǒng)CommonJS模塊在瀏覽器環(huán)境中無(wú)法正常加載。

RequireJS:
RequireJS屬于AMD規(guī)范，AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范。

RequireJS主要解決兩個(gè)問(wèn)題：
1.多個(gè)js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
2.js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件越多，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)

    // 定義模塊 myModule.js
    define(['dependency'], function(){
        var name = 'Byron';
        function printName(){
            console.log(name);
        }

        return {
            printName: printName
        };
    });

    // 加載模塊
    require(['myModule'], function (my){
    　 my.printName();
    });

語(yǔ)法：
require()函數(shù)接受兩個(gè)參數(shù)
第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊
第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊
require()函數(shù)在加載依賴的函數(shù)的時(shí)候是異步加載的，這樣瀏覽器不會(huì)失去響應(yīng)，它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后，才會(huì)運(yùn)行，解決了依賴性的問(wèn)題。

SeaJS:
SeaJS屬于CMD規(guī)范，CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國(guó)內(nèi)發(fā)展出來(lái)的，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問(wèn)題和requireJS一樣，只不過(guò)在模塊定義方式和模塊加載（可以說(shuō)運(yùn)行、解析）時(shí)機(jī)上有所不同。

語(yǔ)法：
Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫法，因?yàn)镃MD推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊idCMD推崇依賴就近，所以一般不在define的參數(shù)中寫依賴，在factory中寫，factory有三個(gè)參數(shù)：

    function(require, exports, module)

require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口,
exports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口,
module 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法

例子：

    // 定義模塊  myModule.js
    define(function(require, exports, module) {
      var $ = require('jquery.js')
      $('div').addClass('active');
    });

    // 加載模塊
    seajs.use(['myModule.js'], function(my){

    });

AMD與CMD的區(qū)別：

1、最明顯的區(qū)別就是在模塊定義時(shí)對(duì)依賴的處理不同：

AMD推崇依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊，CMD推崇就近依賴，只有在用到某個(gè)模塊的時(shí)候再去require，這種區(qū)別各有優(yōu)劣，只是語(yǔ)法上的差距，而且requireJS和SeaJS都支持對(duì)方的寫法。

2、AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同，注意不是加載的時(shí)機(jī)或者方式不同

很多人說(shuō)requireJS是異步加載模塊，SeaJS是同步加載模塊，這么理解實(shí)際上是不準(zhǔn)確的，其實(shí)加載模塊都是異步的，只不過(guò)AMD依賴前置，js可以方便知道依賴模塊是誰(shuí)，立即加載，而CMD就近依賴，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K，這也是很多人詬病CMD的一點(diǎn)，犧牲性能來(lái)帶來(lái)開(kāi)發(fā)的便利性，實(shí)際上解析模塊用的時(shí)間短到可以忽略。

為什么我們說(shuō)兩個(gè)的區(qū)別是依賴模塊執(zhí)行時(shí)機(jī)不同，為什么很多人認(rèn)為ADM是異步的，CMD是同步的（除了名字的原因。。。）

同樣都是異步加載模塊，AMD在加載模塊完成后就會(huì)執(zhí)行該模塊，所有模塊都加載執(zhí)行完后會(huì)進(jìn)入require的回調(diào)函數(shù)，執(zhí)行主邏輯，這樣的效果就是依賴模塊的執(zhí)行順序和書(shū)寫順序不一定一致，看網(wǎng)絡(luò)速度，哪個(gè)先下載下來(lái)，哪個(gè)先執(zhí)行，但是主邏輯一定在所有依賴加載完成后才執(zhí)行

CMD加載完某個(gè)依賴模塊后并不執(zhí)行，只是下載而已，在所有依賴模塊加載完成后進(jìn)入主邏輯，遇到require語(yǔ)句的時(shí)候才執(zhí)行對(duì)應(yīng)的模塊，這樣模塊的執(zhí)行順序和書(shū)寫順序是完全一致的

這也是很多人說(shuō)AMD用戶體驗(yàn)好，因?yàn)闆](méi)有延遲，依賴模塊提前執(zhí)行了，CMD性能好，因?yàn)橹挥杏脩粜枰臅r(shí)候才執(zhí)行的原因。