模塊標準
現(xiàn)在的前端模塊化標準主要有兩種绿贞, CMD , AMD 浅乔。
CMD
CMD 在模塊定義當中有三個變量,分別是 require , exports , module 舰讹。除了這三個變量可以辨識 CMD 外北苟, define 函數(shù)還有一個公有屬性 define.cmd 奏夫。我們也可以檢測這個值來判斷是否是 CMD 。
如果想要對外提供接口的話草慧,可以將接口綁定到 exports (即 module.exports ) 上桶蛔。
function MyModule() {
// ...
}
if(typeof module !== `undefined` && typeof exports === `object` && define.cmd) {
module.exports = MyModule;
}
如果需要支持除了 CMD 之外的其他符合 CommonJS 的標準,請去掉 define.cmd
AMD
AMD 規(guī)范中漫谷, define 函數(shù)同樣有一個公有屬性 define.amd 仔雷。
AMD 中的參數(shù)便是這個模塊的依賴。那么如何在 AMD 中提供接口呢舔示?它是返回一個對象碟婆,這個對象就作為這個模塊的接口,故我們可以這樣寫:
function MyModule() {
// ...
}
if(typeof define === `function` && define.amd) {
define(function() { return MyModule; });
}
總結(jié)
我們除了提供 AMD 模塊接口惕稻, CMD 模塊接口竖共,還得提供原生的 JS 接口,一個直接可以用的代碼如下:
;(function(){
function MyModule() {
// ...
}
var moduleName = MyModule;
if (typeof module !== 'undefined' && typeof exports === 'object' && define.cmd) {
module.exports = moduleName;
} else if (typeof define === 'function' && define.amd) {
define(function() { return moduleName; });
} else {
this.moduleName = moduleName;
}
}).call(function() {
return this || (typeof window !== 'undefined' ? window : global);
});