一.為什么要使用模塊化
隨著技術的發(fā)展,框架的層出不窮坐漏,前端的復雜程度日益增加薄疚,代碼量也快速增加,使用模塊化勢在必得赊琳。模塊化解耦了代碼输涕,使代碼更易于閱讀,同時又提高了代碼的復用性慨畸。模塊化開發(fā)還解決了各個模塊之間的命名沖突以及模塊之間的依賴問題莱坎。
二.CMD規(guī)范
CMD全稱通用模塊定義, CMD 是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產出寸士。在CMD中一個模塊就是一個文件檐什。
CMD通過define定義模塊,define 接受 factory 參數弱卡,factory 為函數時乃正,表示是模塊的構造方法。執(zhí)行該構造方法婶博,可以得到模塊向外提供的接口瓮具。factory 方法在執(zhí)行時,默認會傳入三個參數:require凡人、exports 和 module:
define(function(require, exports, module) {
// 模塊代碼
});
CMD通過require來加載模塊
define(function(require, exports) {
// 獲取模塊 a 的接口
var a = require('./a');
// 調用模塊 a 的方法
a.doSomething();
});
三.AMD規(guī)范
AMD規(guī)范叫異步模塊定義名党。在該機制下模塊和依賴可以異步加載。這對瀏覽器端的異步加載尤其適用挠轴。AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產出传睹。
AMD規(guī)范的語法
define(id?, dependencies?, factory);
例子:
define('modal', ['jQuery', 'dialog'], function($, Dialog){
$('.modal').show();
Dialog.open();
});//先加載模塊,當模塊加載完成之后在function里使用模塊
四.CommonJS 規(guī)范
CommonJS是服務器端模塊的規(guī)范岸晦,Node.js采用了這個規(guī)范欧啤。Node.JS首先采用了js模塊化的概念睛藻。
根據CommonJS規(guī)范,一個單獨的文件就是一個模塊邢隧。每一個模塊都是一個單獨的作用域店印,也就是說,在該模塊內部定義的變量倒慧,無法被其他模塊讀取按摘,除非定義為global對象的屬性。
CommonJS定義模塊輸出:
//模塊定義 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();