JS模組化的實作方法有哪些？ js模組化的講解

本篇文章帶給大家的內容是關於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中文網其他相關文章！