使用CommonJS，AMD以及CMD編寫(xiě)模塊化JavaScripts

nifhlheimr 發(fā)布于2019-08-22 10:34 / 1755人閱讀

摘要：模塊化編程首先，我想說(shuō)說(shuō)模塊化編程這個(gè)概念當(dāng)我不清楚這個(gè)概念的時(shí)候，其實(shí)說(shuō)什么模塊化編程多好多好都是懵逼的而我一直不覺(jué)得有多好，其實(shí)也是因?yàn)槲覐拈_(kāi)始寫(xiě)，就一直都在模塊化編程啊我們寫(xiě)一個(gè)文件然后我們?cè)谖募幸肴缓笳{(diào)用方法哈哈這樣已經(jīng)是模塊化

模塊化編程

首先，我想說(shuō)說(shuō)模塊化編程這個(gè)概念
當(dāng)我不清楚這個(gè)概念的時(shí)候，其實(shí)說(shuō)什么模塊化編程多好多好都是懵逼的
而我一直不覺(jué)得有多好，其實(shí)也是因?yàn)槲覐拈_(kāi)始寫(xiě)js，就一直都在模塊化編程啊

//我們寫(xiě)一個(gè)文件check.js

function check(){
    return true;
}

//然后我們?cè)趆tml文件中引入



//然后調(diào)用方法

這樣已經(jīng)是模塊化編程了
其實(shí)我今天要探討的并不是如何模塊化編程
因?yàn)榛蚨嗷蛏傥覀兌际窃谀K化編程
但想要把一個(gè)項(xiàng)目
用模塊化編程的思想去處理
讓它變得易擴(kuò)展易維護(hù)
需要長(zhǎng)期的撲街爬起撲街爬起

今天想講的其實(shí)應(yīng)該是如何更有效的處理劃分引入js文件

CommonJS

像上述最原始的模塊化編程引入的方法
我們可以看到會(huì)有多行

但凡是有點(diǎn)追求的程序員，是不會(huì)允許一個(gè)頁(yè)面里面有多行重復(fù)的內(nèi)容的
而且主要引入文件的時(shí)候會(huì)有過(guò)多的全局變量暴露在外
平時(shí)寫(xiě)寫(xiě)小項(xiàng)目就算有bug 找出原因也是容易的
但項(xiàng)目一大開(kāi)發(fā)人員一多
就會(huì)出現(xiàn)我放在客廳里的點(diǎn)心被偷吃了一塊，那么怪誰(shuí)呢，誰(shuí)叫你放在客廳里

先舉個(gè)CommonJS 的寫(xiě)法的例子

//先創(chuàng)建一個(gè) check_commonjs.js 的文件

var flag = true;

function check(){
    return flag;
}

module.exports = {
    check: check,
}

//在我們需要用到的頁(yè)面加載模塊

var module = require("./check_commonjs.js");

if(module.check()){
    console.log("哈哈哈");
}

在CommonJS里面，被var定義的，在文件中作為全局存在的，在引入后，都還是私有的。當(dāng)然，設(shè)計(jì)者們不是傻瓜
在定義內(nèi)容前加入 global 那也還是全局的

CommonJS的用法在Node里面被應(yīng)用的很溜
然而平時(shí)我們?cè)谧鰓eb開(kāi)發(fā)的時(shí)候并不被前端開(kāi)發(fā)人員所追逐
那是為什么呢？
Node作為服務(wù)端應(yīng)用，加載一個(gè)文件，速度就是真的是可以忽略不計(jì)的
然而瀏覽器作為一個(gè)客戶端，在這個(gè)大框框下面，想要加載完一個(gè)js文件
再執(zhí)行下面的js語(yǔ)句
起碼現(xiàn)在速度真沒(méi)那么快
所以就有了我們常用的AMD和CMD

AMD

AMD:異步模塊定義
最常見(jiàn)的應(yīng)用例子就是RequireJS
先舉一個(gè)RequireJS的例子

// 先創(chuàng)建一個(gè) check_amd.js 的文件

define(["check"], function(){
    var flag = true;
    function check(){
        return flag;
    }

    return {
        check: check
    };
});

// 在我們需要用到的頁(yè)面加載模塊

require(["check_amd"], function (check){
    if(check.check()){
        console.log("哈哈哈");
    }
});

從代碼的整潔性和可讀性來(lái)講
CommonJS 要好很多
但AMD定義下的RequireJS 解決了上述同步加載文件導(dǎo)致的問(wèn)題

與AMD對(duì)應(yīng)的就有CMD

CMD

CMD:通用模塊定義
最常見(jiàn)的應(yīng)用例子就是SeaJS
有些人把RequireJS 與 SeaJS做比較的時(shí)候
會(huì)簡(jiǎn)單的認(rèn)為異步與同步的區(qū)別
這明顯不太對(duì)是不是
加載文件的時(shí)候首先一定是異步的

先舉一個(gè)SeaJS的例子

// 先創(chuàng)建一個(gè) check_cmd.js 的文件

define(function(require, exports, module) {
    var a = require("a");//這里就不舉例再創(chuàng)建a文件了
    function check(){
       return a.flag;
    }
    exports.check = check;
});

// 在我們需要用到的頁(yè)面加載模塊
seajs.use(["check_cmd.js"], function(check){
    if(check.check()){
        console.log("哈哈哈");
    }
});

可以看出來(lái)AMD與CMD的本質(zhì)區(qū)別就是
AMD是加載完全部你所需要的文件
CMD是當(dāng)你需要那個(gè)文件的時(shí)候他才加載
兩個(gè)比較下來(lái)就是說(shuō)AMD用戶體驗(yàn)好，因?yàn)闆](méi)有延遲，依賴(lài)模塊提前執(zhí)行了，CMD性能好，因?yàn)橹挥杏脩粜枰臅r(shí)候才執(zhí)行

最后

其實(shí)AMD與CMD的模式比較下來(lái)還是很繁瑣
最喜歡的還是CommonJS的模式
那么如何利用CommonJS來(lái)編寫(xiě)JavaScripts，并沒(méi)有最上述提到的由于瀏覽器加載文件需要時(shí)間，傳統(tǒng)CommonJS模塊在瀏覽器環(huán)境中無(wú)法正常運(yùn)行的問(wèn)題呢
且聽(tīng)下回分解

附上我的訂閱號(hào)，歡迎關(guān)注，一起學(xué)前端