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

模塊化編程

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

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

function check(){
    return true;
}

//而後咱們在html文件中引入

<scripts src="check.js"></scripts>

//而後調用方法

<script type="text/javascript">
if(check()){
    console.log("哈哈");
}
</script>

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

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

CommonJS

像上述最原始的模塊化編程引入的方法
咱們能夠看到會有多行
<scripts src=""></scripts>
但凡有點追求的程序員，是不會容許一個頁面裏面有多行重複的內容的
並且主要引入文件的時候會有過多的全局變量暴露在外
平時寫寫小項目 就算有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模塊在瀏覽器環境中沒法正常運行的問題呢
且聽下回分解

附上個人訂閱號，歡迎關注，一塊兒學前端