模塊標(biāo)準(zhǔn)

// 支持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); } 復(fù)制代碼 //做的工作其實(shí)就是這么粗暴，判斷當(dāng)前用的什么就以當(dāng)前規(guī)范來定義(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;})); 復(fù)制代碼

UMD：
Universal Module Definition 通用模塊規(guī)范。
基于統(tǒng)一規(guī)范的目的出現(xiàn)，看起來沒那么簡約，但是支持amd和commonjs以及全局模塊模式。

//做的工作其實(shí)就是這么粗暴，判斷當(dāng)前用的什么就以當(dāng)前規(guī)范來定義 (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; }));復(fù)制代碼

現(xiàn)在的前端模塊化標(biāo)準(zhǔn)主要有兩種， CMD , AMD 。

CMD

CMD 在模塊定義當(dāng)中有三個(gè)變量，分別是 require , exports , module 。除了這三個(gè)變量可以辨識 CMD 外， define 函數(shù)還有一個(gè)公有屬性 define.cmd 。我們也可以檢測這個(gè)值來判斷是否是 CMD 。

如果想要對外提供接口的話，可以將接口綁定到 exports （即 module.exports ） 上。

function MyModule() {// ... }if(typeof module !== `undefined` && typeof exports === `object` && define.cmd) {module.exports = MyModule; } 復(fù)制代碼

如果需要支持除了 CMD 之外的其他符合 CommonJS 的標(biāo)準(zhǔn)，請去掉 define.cmd

AMD

AMD 規(guī)范中， define 函數(shù)同樣有一個(gè)公有屬性 define.amd 。

AMD 中的參數(shù)便是這個(gè)模塊的依賴。那么如何在 AMD 中提供接口呢？它是返回一個(gè)對象，這個(gè)對象就作為這個(gè)模塊的接口，故我們可以這樣寫：

function MyModule() {// ... }if(typeof define === `function` && define.amd) {define(function() { return MyModule; }); } 復(fù)制代碼

總結(jié)

我們除了提供 AMD 模塊接口， CMD 模塊接口，還得提供原生的 JS 接口，一個(gè)直接可以用的代碼如下：

;(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); }); 復(fù)制代碼

一般插件的做法：

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;}復(fù)制代碼

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。