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

nifhlheimr 發布于2019-08-22 10:34 / 1760人閱讀

摘要：模塊化編程首先，我想說說模塊化編程這個概念當我不清楚這個概念的時候，其實說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實也是因為我從開始寫，就一直都在模塊化編程啊我們寫一個文件然后我們在文件中引入然后調用方法哈哈這樣已經是模塊化

模塊化編程

首先，我想說說模塊化編程這個概念
當我不清楚這個概念的時候，其實說什么模塊化編程多好多好都是懵逼的
而我一直不覺得有多好，其實也是因為我從開始寫js，就一直都在模塊化編程啊

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

function check(){
    return true;
}

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



//然后調用方法

這樣已經是模塊化編程了
其實我今天要探討的并不是如何模塊化編程
因為或多或少我們都是在模塊化編程
但想要把一個項目
用模塊化編程的思想去處理
讓它變得易擴展易維護
需要長期的撲街爬起撲街爬起

今天想講的其實應該是如何更有效的處理劃分引入js文件

CommonJS

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

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

先舉個CommonJS 的寫法的例子

//先創建一個 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定義的，在文件中作為全局存在的，在引入后，都還是私有的。當然，設計者們不是傻瓜
在定義內容前加入 global 那也還是全局的

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

AMD

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

// 先創建一個 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 解決了上述同步加載文件導致的問題

與AMD對應的就有CMD

CMD

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

先舉一個SeaJS的例子

// 先創建一個 check_cmd.js 的文件

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

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

可以看出來AMD與CMD的本質區別就是
AMD是加載完全部你所需要的文件
CMD是當你需要那個文件的時候他才加載
兩個比較下來就是說AMD用戶體驗好，因為沒有延遲，依賴模塊提前執行了，CMD性能好，因為只有用戶需要的時候才執行

最后

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

附上我的訂閱號，歡迎關注，一起學前端

云服務器 GPU云服務器 amd_cmd區別 amd模塊加載異步模塊加載機制-amd 亞馬遜云服務器租用以及使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90842.html

關于JavaScript模塊規范之CommonJSAMDCMD

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。也采用語句加載模塊，但是不同于，它要求兩個參數第一個參數，是一個數組，里面的成員就是要加載的模塊第二個參數，則是加載成功之后的回調函數。本篇文章來自對文章《js模塊化編程之徹底弄懂CommonJS和AMD/CMD！》的總結，大部分摘自文章原話，本人只是為了學習方便做的筆記，之后有新的體會會及時補充...

binaryTree 2019-08-26 13:22 評論0 收藏0
淺談 JavaScript 模塊化編程

摘要：與在模塊化編程的世界中，有兩個規范不得不提，它們分別是和。所有依賴于某個模塊的代碼全部移到模塊加載語句的回調函數中去。的語句接受兩個參數在回調函數中，可以通過變量引用模塊。回調函數的返回值就是當前對象的導出值。 JavaScript本身不是一種模塊化語言，設計者在創造JavaScript之初應該也沒有想到這么一個腳本語言的作用領域會越來越大。以前一個頁面的JS代碼再多也不會多到哪兒去，...

wdzgege 2019-08-21 12:17 評論0 收藏0
模仿RequireJs的用法實現一個低配版的模塊加載器

摘要：我想自己可以嘗試一下寫一個低配版的模塊加載器來應付一下我這個單頁網站，當然只是大致模仿了主要功能。是這樣處理的模塊依賴，同時依賴，這種情況下的模塊函數被調用時，被傳入的是，所以需要自己在里面手動一下。 Contents 前言回顧RequireJs的基本用法實現原理使用方法總結前言前段時間一直想用單頁開發技術寫一個自己的個人網站(使用es2015)，寫了一部分之后，發現單...

WalkerXu 2019-08-22 13:48 評論0 收藏0
JS學習筆記 - 模塊化

摘要：在開發大型的項目中，可能會使用到管理的模塊化工具。說道，學習過的同學會比較熟悉，是服務器模塊的規范，采用了這個規范。可能是未來模塊化解決方案的首選。本文章記錄本人在學習 JavaScript 中理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。在開發大型的web項目中，可能會使用到管理js的模塊化工具。但是在前端輪子漫天飛的時代。那一款js模塊化工具真正適合我...

CntChen 2019-08-22 10:57 評論0 收藏0
談談Js前端模塊化規范

摘要：依賴全部加載完成后，調用回調函數規范異步加載模塊規范和很相似，簡單，并與和的規范保持了很大的兼容性在規范中，一個模塊就是一個文件。拋出問題：在開發中在導入模塊時經常使用require和import；導出模塊時使用module.exports/exports或者export/export default; 有時候為了引用一個模塊會使用require奇怪的是也可以使用import？...

Steve_Wang_ 2019-08-29 16:22 評論0 收藏0