使用CommonJS，AMD以及CMD編寫模塊化JavaScripts

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

摘要：模塊化編程首先，我想說說模塊化編程這個概念當(dāng)我不清楚這個概念的時候，其實(shí)說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實(shí)也是因?yàn)槲覐拈_始寫，就一直都在模塊化編程啊我們寫一個文件然后我們在文件中引入然后調(diào)用方法哈哈這樣已經(jīng)是模塊化

模塊化編程

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

//我們寫一個文件check.js

function check(){
    return true;
}

//然后我們在html文件中引入



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

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

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

CommonJS

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

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

先舉個CommonJS 的寫法的例子

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

var flag = true;

function check(){
    return flag;
}

module.exports = {
    check: check,
}

//在我們需要用到的頁面加載模塊

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

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

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

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

AMD

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

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

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

    return {
        check: check
    };
});

// 在我們需要用到的頁面加載模塊

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

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

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

CMD

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

先舉一個SeaJS的例子

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

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

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

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

最后

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

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