前端模組化AMD與CMD的差別是什麼？

區別：AMD和CMD對依賴模組的執行時機處理不同，AMD推崇依賴前置，在定義模組的時候就要聲明其依賴的模組；CMD推崇就近依賴，只有在用到某個模組的時候再去require。

在JavaScript發展初期就是為了實現簡單的頁面互動邏輯，寥寥數語即可；如今CPU、瀏覽器效能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹

這時候JavaScript作為嵌入式的腳本語言的定位動搖了，JavaScript卻沒有為組織程式碼提供任何明顯幫助，甚至沒有類別的概念，更不用說模組（module）了，JavaScript極其簡單的程式碼組織規範不足以駕馭如此龐大規模的程式碼

模組

既然JavaScript不能handle如此大規模的程式碼，我們可以藉鑑一下其它語言是怎麼處理大規模程式設計的，在Java中有一個重要帶概念－package，邏輯上相關的程式碼組織到同一個包內，包內是一個相對獨立的王國，不用擔心命名衝突什麼的，那麼外部如果使用呢？直接import對應的package即可

import java.util.ArrayList;

遺憾的是JavaScript在設計時定位原因，沒有提供類似的功能，開發者需要模擬出類似的功能，來隔離、組織複雜的JavaScript程式碼，我們稱為模組化。

一個模組就是實現特定功能的文件，有了模組，我們就可以更方便地使用別人的程式碼，想要什麼功能，就載入什麼模組。模組開發需要遵循一定的規範，各行其是就都亂套了

規範形成的過程是痛苦的，前端的先驅在刀耕火種、茹毛飲血的階段開始，發展到現在初具規模，簡單了解一下這段不凡的歷程

函數封裝

我們講函數的時候提到，函數一個功能就是實作特定邏輯的一組語句打包，而且JavaScript的作用域就是基於函數的，所以把函數當作模組化的第一步是很自然的事情，在一個檔案裡面寫幾個相關函數就是最開始的模組了

function fn1(){
    statement
}

function fn2(){
    statement
}

這樣在需要的以後夾在函數所在文件，呼叫函數就可以了

這種做法的缺點很明顯：污染了全域變量，無法保證不與其他模組發生變數名稱衝突，而且模組成員之間沒什麼關係。

物件

為了解決上面問題，物件的寫法應運而生，可以把所有的模組成員封裝在一個物件中

var myModule = {
    var1: 1,

    var2: 2,

    fn1: function(){

    },

    fn2: function(){

    }
}

這樣我們在希望調用模組的時候引用對應文件，然後

myModule.fn2();

這樣避免了變量污染，只要保證模組名唯一即可，同時同一模組內的成員也有了關係

#不錯的解決方案，但是也有缺陷，外部可以隨意修改內部成員

myModel.var1 = 100;

這樣就會產生意外的安全問題

#立即執行函數

可以透過立即執行函數，來達到隱藏細節的目的

var myModule = (function(){
    var var1 = 1;
    var var2 = 2;

    function fn1(){

    }

    function fn2(){

    }

    return {
        fn1: fn1,
        fn2: fn2
    };
})();

這樣在模組外部無法修改我們沒有暴露出來的變數、函數

上述做法就是我們模組化的基礎，目前，通行的JavaScript模組規格主要有兩種：CommonJS和AMD

CommonJS

我們先從CommonJS談起，因為網頁端沒有模組化程式設計只是頁面JavaScript邏輯複雜，但也可以工作下去，在伺服器端卻一定要有模組，所以雖然JavaScript在web端發展這麼多年，第一個流行的模組化規格卻由伺服器端的JavaScript應用程式帶來，CommonJS規格是由NodeJS發揚光大，這標誌著JavaScript模組化程式設計正式登上舞台。

1. 定義模組
   根據CommonJS規範，一個單獨的檔案就是一個模組。每一個模組都是一個單獨的作用域，也就是說，在該模組內部定義的變量，無法被其他模組讀取，除非定義為global物件的屬性

2. ##模組輸出：

   模組只有一個出口，
   module.exports對象，我們需要把模組希望輸出的內容放入該物件

##載入模組：
3. 載入模組使用

   require
   方法，該方法讀取一個檔案並執行，傳回檔案內部的module.exports物件

   ##看個範例

//模块定义 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();

不同的實作對require時的路徑有不同要求，一般情況可以省略

js

拓展名，可以使用相對路徑，也可以使用絕對路徑，甚至可以省略路徑直接使用模組名稱（前提是該模組是系統內建模組）

尷尬的瀏覽器

仔细看上面的代码，会发现require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。

这在服务器端实现很简单，也很自然，然而， 想在浏览器端实现问题却很多。

浏览器端，加载JavaScript最佳、最容易的方式是在document中插入script 标签。但脚本标签天生异步，传统CommonJS模块在浏览器环境中无法正常加载。

解决思路之一是，开发一个服务器端组件，对模块代码作静态分析，将模块与它的依赖列表一起返回给浏览器端。 这很好使，但需要服务器安装额外的组件，并因此要调整一系列底层架构。

另一种解决思路是，用一套标准模板来封装模块定义，但是对于模块应该怎么定义和怎么加载，又产生的分歧：

AMD

AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范

由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

requireJS主要解决两个问题

1. 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
2. js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

看一个使用requireJS的例子

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

    return {
        printName: printName
    };
});

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

语法

requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

1. id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
2. dependencies：是一个当前模块依赖的模块名称数组
3. factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

在页面上使用require函数加载模块

require([dependencies], function(){});

require()函数接受两个参数

1. 第一个参数是一个数组，表示所依赖的模块
2. 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块

require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

CMD

CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同

语法

Sea.js 推崇一个模块一个文件，遵循统一的写法

define

define(id?, deps?, factory)

因为CMD推崇

1. 一个文件一个模块，所以经常就用文件名作为模块id
2. CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写

factory有三个参数

function(require, exports, module)

require

require 是 factory 函数的第一个参数

require(id)

require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口

exports

exports 是一个对象，用来向外提供模块接口

module

module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

demo

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

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

});

AMD与CMD区别

关于这两个的区别网上可以搜出一堆文章，简单总结一下

最明显的区别就是在模块定义时对依赖的处理不同

• AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块

• CMD推崇就近依赖，只有在用到某个模块的时候再去require

这种区别各有优劣，只是语法上的差距，而且requireJS和SeaJS都支持对方的写法

AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机或者方式不同

很多人說requireJS是非同步載入模組，SeaJS是同步載入模組，這麼理解其實是不準確的，其實載入模組都是非同步的，只不過AMD依賴前置，js可以方便知道依賴模組是誰，立即加載，而CMD就近依賴，需要使用把模組變為字符串解析一遍才知道依賴了那些模組，這也是很多人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模組用的時間短到可以忽略

為什麼我們說兩個的區別是依賴模組執行時機不同，為什麼很多人認為ADM是異步的，CMD是同步的（除了名字的原因。。。）

同樣都是非同步載入模組，AMD在載入模組完成後就會執行改模組，所有模組都載入執行完後會進入require的回呼函數，執行主邏輯，這樣的效果就是依賴模組的執行順序和書寫順序不一定一致，看網路速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴載入完成後才執行

CMD載入完某個依賴模組後不執行，只是下載而已，在所有依賴模組載入完成後進入主邏輯，遇到require語句的時候才執行對應的模組，這樣模組的執行順序和書寫順序是完全一致的

這也是很多人說AMD用戶體驗好，因為沒有延遲，依賴模組提前執行了，CMD性能好，因為只有用戶需要的時候才執行的原因

更多編程相關知識，請訪問：編程視頻！ ！

以上是前端模組化AMD與CMD的差別是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！