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

转自https://segmentfault.com/a/1190000003732752

模块标准

现在的前端模块化标准主要有两种, CMD , AMD 。

CMD

CMD 在模块定义当中有三个变量,分别是 require , exports , module 。除了这三个变量可以辨识 CMD 外, define 函数还有一个公有属性 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 规范中, define 函数同样有一个公有属性 define.amd 。

AMD 中的参数便是这个模块的依赖。那么如何在 AMD 中提供接口呢?它是返回一个对象,这个对象就作为这个模块的接口,故我们可以这样写:

function MyModule() {
    // ...
}

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

总结

我们除了提供 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);
});

推荐阅读更多精彩内容