amd、cmd、esmodule、commonjs區(qū)別是什么

這篇文章主要介紹“amd、cmd、esmodule、commonjs區(qū)別是什么”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“amd、cmd、esmodule、commonjs區(qū)別是什么”文章能幫助大家解決問題。

AMD、CMD、ESModule和CommonJS是JavaScript中最常用的模塊化規(guī)范。

AMD規(guī)范

AMD規(guī)范（Asynchronous Module Definition，異步模塊定義）是RequireJS在推廣模塊化開發(fā)的過程中提出的一種規(guī)范。該規(guī)范的主要特點是異步加載模塊，這樣可以在需要時才去加載模塊，提高頁面加載速度。AMD規(guī)范的代碼示例如下：

//定義模塊
define(['module1', 'module2'], function(m1, m2) {
  //...
  return module;
});
 
//使用模塊
require(['module'], function(module) {
  //...
});

在AMD規(guī)范中，使用define函數(shù)來定義一個模塊，require函數(shù)來加載一個模塊。在define函數(shù)中，第一個參數(shù)是一個數(shù)組，表示該模塊依賴的其他模塊；第二個參數(shù)是一個回調(diào)函數(shù)，表示該模塊的代碼。在回調(diào)函數(shù)中，我們可以使用依賴的模塊，并將模塊作為返回值。在require函數(shù)中，第一個參數(shù)也是一個數(shù)組，表示需要加載的模塊；第二個參數(shù)是一個回調(diào)函數(shù)，在該函數(shù)中可以使用已加載的模塊。

CMD規(guī)范

CMD規(guī)范（Common Module Definition，通用模塊定義）是SeaJS在推廣模塊化開發(fā)的過程中提出的一種規(guī)范。該規(guī)范與AMD規(guī)范類似，也是異步加載模塊，但是它的代碼風(fēng)格更加簡潔。CMD規(guī)范的代碼示例如下：

//定義模塊
define(function(require, exports, module) {
  var m1 = require('module1');
  var m2 = require('module2');
  //...
  module.exports = module;
});
 
//使用模塊
var module = require('module');

在CMD規(guī)范中，使用define函數(shù)來定義一個模塊，require函數(shù)來加載一個模塊。在define函數(shù)中，回調(diào)函數(shù)的參數(shù)可以自定義，但是一般情況下第一個參數(shù)是require，表示依賴其他模塊的方法；第二個參數(shù)是exports，表示該模塊對外輸出的方法和屬性；第三個參數(shù)是module，表示該模塊自身。在回調(diào)函數(shù)中，我們可以使用require函數(shù)來加載其他模塊，并將需要輸出的方法和屬性添加到exports對象上。在require函數(shù)中，只需要傳入需要加載的模塊名稱即可。

ESModule規(guī)范

ESModule規(guī)范（ES6 Module，ES6模塊）是ECMAScript 6在語言層面上提供的模塊化規(guī)范。該規(guī)范采用靜態(tài)編譯的方式來進行模塊化，也就像前面兩種規(guī)范，ESModule也支持異步加載模塊。但是它的語法與前兩種規(guī)范有很大的不同。ESModule規(guī)范的代碼示例如下：

//定義模塊
export function module() {
  //...
}
 
//使用模塊
import { module } from 'module';

在ESModule規(guī)范中，使用export關(guān)鍵字來將模塊的方法和屬性輸出，使用import關(guān)鍵字來加載其他模塊。在export關(guān)鍵字后面，可以跟著一個函數(shù)或者變量名，表示需要輸出的方法或?qū)傩浴Ｔ趇mport關(guān)鍵字后面，可以跟著需要加載的模塊名稱和需要導(dǎo)入的方法或?qū)傩浴?/p>

ESModule的語法比較簡潔，而且具有很好的可讀性，這是因為ESModule采用了語言層面上的支持。與前兩種規(guī)范不同，ESModule規(guī)范不需要使用額外的庫來實現(xiàn)模塊化，而是使用了標(biāo)準(zhǔn)的語法來支持。

CommonJS規(guī)范

CommonJS規(guī)范是Node.js在推廣模塊化開發(fā)的過程中提出的一種規(guī)范。該規(guī)范與前三種規(guī)范的最大區(qū)別在于它采用同步加載模塊的方式。CommonJS規(guī)范的代碼示例如下：

//定義模塊
var module1 = require('module1');
var module2 = require('module2');
 
//使用模塊
var module = require('module');

在CommonJS規(guī)范中，使用require函數(shù)來加載其他模塊，并將需要使用的模塊賦值給變量。在使用模塊時，只需要使用require函數(shù)來加載即可。

由于CommonJS規(guī)范是Node.js在推廣模塊化開發(fā)的過程中提出的一種規(guī)范，因此它在服務(wù)器端的應(yīng)用非常廣泛。但是在瀏覽器端的應(yīng)用中，CommonJS規(guī)范的同步加載方式可能會導(dǎo)致頁面加載速度變慢，因此在瀏覽器端的應(yīng)用中，更多地使用異步加載模塊的規(guī)范，比如AMD和CMD。

關(guān)于“amd、cmd、esmodule、commonjs區(qū)別是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。