本篇文章帶給大家的內容是關於JS模組化的實作方法有哪些？ js模組化的講解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
1、CommonJS
產生背景：一開始大家都認為JS是辣雞，沒什麼用，官方定義的API只能建立基於瀏覽器的應用程序，CommonJS就按耐不住了，CommonJS
API定義許多普通應用程式（主要指非瀏覽器的應用程式）所使用的API，從而填補了這個空白。它的終極目標是提供一個類似Python，Ruby和Java標準函式庫。這樣的話，開發者可以使用CommonJS
API編寫應用程序，然後 這些應用程式可以運行在不同的JavaScript解釋器和不同的主機環境中。 2009年，美國程式設計師Ryan
Dahl創造了node.js項目，將javascript語言用於伺服器端程式設計。這標誌"Javascript模組化程式設計"正式誕生。因為老實說，在瀏覽器環境下，沒有模組也不是特別大的問題，畢竟網頁程式的複雜性有限；但是在伺服器端，一定要有模組，與作業系統和其他應用程式互動，否則根本沒法程式設計.
具體代表：nodeJs、webpack
原則：瀏覽器不相容CommonJS的根本原因，在於缺少四個Node.js環境的變數（module,exports,require,global,只要能提供這 四個變量，瀏覽器可載入CommonJS 模組。
簡單實作：
## var module = {
exports: {}
};
(function(module, exports) {
exports.multiply = function (n) {
return n * 1000
};
}(module, module.exports))
var f = module.exports.multiply;
f(5) // 5000登入後複製
上面程式碼向一個立即執行函數提供module 和exports 兩個外部變量，模組就放在這個立即執行函數裡面。模組的輸出值放在module.exports 之中，這樣就實現了模組的載入。
2、AMD
產生背景：
基於commonJS規範的nodeJS出來以後，服務端的模組概念已經形成,但是，由於一個重大的局限，使得CommonJS
規格不適用於瀏覽器環境。 var math = require('math'); math.add(2,
3);require 是同步的.這對伺服器端不是一個問題，因為所有的模組都存放在本地硬碟，可以同步載入完成，等待時間就是硬碟的讀取時間。但是，對於瀏覽器，這卻是一個大問題，因為模組都放在伺服器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。瀏覽器端的模組，不能採用"同步載入"（synchronous），只能採用"非同步載入"（asynchronous）。這就是AMD規範誕生的背景。
具體代表
：RequireJS
用法範例：require([dependencies], function(){}); require()函數接受兩個參數
第一個參數是一個數組，表示所依賴的模組###第二個參數是一個回調函數，當前面指定的模組都載入成功後，它將被調用。載入的模組會以參數形式傳入函數，從而在回呼函數內部就可以使用這些模組######
// 定义模块 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加载模块
require(['myModule'], function (my){
my.printName();
});登入後複製
######3、CMD#########產生背景# ##：CMD 即Common Module Definition通用模組定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實作SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模組定義方式與模組載入（可以說在運行、解析）時機上有所不同 #######具體代表###：Sea.js######用法範例###：factory是一個函數，有三個參數，function(require, exports, module)###require 是方法，接受模組標識作為唯一參數，用來取得其他模組提供的介面：require(id)###exports 是一個對象，用來向外提供模組介面###module 是一個對象，上面儲存了與目前模組相關聯的一些屬性和方法######
// 定义模块 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('p').addClass('active');});
// 加载模块
seajs.use(['myModule.js'],
function(my){
});登入後複製
######AMD與CMD區別：#####執行機制：SeaJS對模組的態度是懶執行, 而RequireJS對模組的態度是預執行###遵循規範：RequireJS 遵循AMD（非同步模組定義）規範，Sea.js 遵循CMD （通用模組定義）規範。規範的不同，導致了兩者 API 不同#########4、ES6 Modules#######
產生背景：Es6*之前*JavaScript一直沒有模組（module）體系，無法將一個大程式拆分成互相依賴的小文件，再用簡單的方法拼裝起來，這對開發大型的、複雜的專案形成了巨大障礙。為了解決模組依賴載入問題，出現了AMD,CMD,COMMONJS ,其中AMD,CMD（兩者之間也存在差異，後期會說）用於客戶端，COMMONJS用於服務端，es6出現後，定義了Module功能，而且實作得相當簡單，完全可以取代現有的CommonJS和AMD規範，成為瀏覽器和伺服器通用的模組解決方案。
用法範例： export(拋出) import(引入) export default(其他模組載入該模組時，import指令可以為該匿名函數指定任何名字)
# 相關推薦：
JS模組化-RequireJS
#javascript模組化程式設計(轉載)，javascript模組化_PHP教學
#
以上是JS模組化的實作方法有哪些？ js模組化的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
