讓你的插件兼容AMD, CMD ,CommonJS和 原生 JS

模塊標準

// 支持AMD,CMD以及原生js的引用
  if (typeof module !== 'undefined' && typeof exports === 'object' && define.cmd) {
    module.exports = SB;
  } else if (typeof define === 'function' && define.amd) {
    define(function() {
      return SB;
    });
  } else {
    this.SB= SB;
  }
}).call(function() {
  return this || (typeof window !== 'undefined' ? window : global);
}
複製代碼

//作的工做其實就是這麼粗暴，判斷當前用的什麼就以當前規範來定義
    (function (root, factory) {
        if (typeof define === 'function' && define.amd) {
            // AMD
            define(['jquery'], factory);
        } else if (typeof exports === 'object') {
            // CommonJS
            module.exports = factory(require('jquery'));
        } else {
            //  全局變量
            root.returnExports = factory(root.jQuery);
        }
    }(this, function ($) {
        //    methods
        function myFunc(){};
        //    exposed public method
        return myFunc;
    }));
複製代碼

UMD：
Universal Module Definition 通用模塊規範。
基於統一規範的目的出現，看起來沒那麼簡約，可是支持amd和commonjs以及全局模塊模式。

//作的工做其實就是這麼粗暴，判斷當前用的什麼就以當前規範來定義
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// 全局變量
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
// methods
function myFunc(){};
// exposed public method
return myFunc;
}));複製代碼

如今的前端模塊化標準主要有兩種， 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);
});
複製代碼

通常插件的作法：

if (typeof module != 'undefined' && module.exports) {  //CMD
		module.exports = SB;
	} else if (typeof define == 'function' && define.amd) {  //AMD
		define(function() {
			return SB;
		});
	} else {           //no AMD or CMD
		window.SB= SB;
	}複製代碼