模塊標準

// 支持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) {// AMDdefine(['jquery'], factory);} else if (typeof exports === 'object') {// CommonJSmodule.exports = factory(require('jquery'));} else {// 全局變量root.returnExports = factory(root.jQuery);}}(this, function ($) {// methodsfunction myFunc(){};// exposed public methodreturn 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) { //CMDmodule.exports = SB;} else if (typeof define == 'function' && define.amd) { //AMDdefine(function() {return SB;});} else { //no AMD or CMDwindow.SB= SB;}復制代碼

總結

以上是生活随笔為你收集整理的让你的插件兼容AMD, CMD ,CommonJS和 原生 JS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。