「JavaScript」如何讓你的插件兼容CommonJS, AMD, CMD 和 原生 JS

模塊標準

CommonJS

CommonJS 有三個全局變量 module、exports 和 require。可是因爲 AMD 也有 require 這個全局變量，故不使用這個變量來進行檢測。

若是想要對外提供接口的話，能夠將接口綁定到 exports （即 module.exports） 上。

function MyModule() {
    // ...
}

if(typeof module !== `undefined` && typeof exports === `object`) {
    module.exports = MyModule;
}

CMD

CMD 規範中定義了 define 函數有一個公有屬性 define.cmd。

CMD 模塊中有兩種方式提供對外的接口，一種是 exports.MyModule = ...，一種是使用 return 進行返回。

AMD

AMD 規範中，define 函數一樣有一個公有屬性 define.amd。

AMD 中的參數即是這個模塊的依賴。那麼如何在 AMD 中提供接口呢？它是返回一個對象，這個對象就做爲這個模塊的接口，故咱們能夠這樣寫：

function MyModule() {
    // ...
}

if(typeof define === `function` && define.amd) {
    define(function() { return MyModule; });
}

總結

咱們除了提供 AMD 模塊接口，CMD 模塊接口，還得提供原生的 JS 接口。
因爲 CMD 和 AMD 均可以使用 return 來定義對外接口，故能夠合併成一句代碼。

一個直接能夠用的代碼以下：

;(function(){
    function MyModule() {
        // ...
    }
    
    var moduleName = MyModule;
    if (typeof module !== 'undefined' && typeof exports === 'object') {
        module.exports = moduleName;
    } else if (typeof define === 'function' && (define.amd || define.cmd)) {
        define(function() { return moduleName; });
    } else {
        this.moduleName = moduleName;
    }
}).call(this || (typeof window !== 'undefined' ? window : global);