一、UMD規(guī)范

UMD規(guī)范，就是多有規(guī)范里面長得最丑的那個，沒有之一?。?！他是為了讓模塊同時兼容AMD和CommonJS規(guī)范而出現(xiàn)的，多被一些需要同時支持瀏覽器端和服務(wù)端引用的第三方庫所使用，UMD是一個時代的產(chǎn)物，當各個環(huán)境最終實現(xiàn)ES harmony的統(tǒng)一的規(guī)范后，它也將退出歷史舞臺。

UMD規(guī)范的結(jié)構(gòu)乍一看非常復(fù)雜，主要是因為想看懂這段范式需要一些JavaScript基礎(chǔ)知識，它的基本機構(gòu)是這樣的：

(function(root, factory) {
  if(typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery', 'underscore'], factory);
  } else if (typeof exports === 'object') {
    // Node, CommomJs之類的
    module.exports = factory(require('jquery'), require('underscore'));
  } else {
    // 瀏覽器全局變量（root 即 window）
    root.returnExports = factory(root.jQuery, root._);
  }
} (this, function ($, _){
  // 方法
  function a() {}; // 私有方法，因為它沒有被返回（見下面）
  function b() {}; // 公共方法，因為被返回了
  function c() {}; // 公共方法，因為被反會了
  // 暴露公共方法
  return {
    b: b,
    c: c
  }
})

二、源碼范式推演

1、基本機構(gòu)

先來看最外層結(jié)構(gòu)：

(function(){}())

非常簡單，就是一個自執(zhí)行函數(shù)，既然它是一個模塊化的標準，也就意味著這個自執(zhí)行函數(shù)最終可以導出一個模塊，那么從大碼的角度講實際上有兩種常見的實現(xiàn)方式：
a.return 返回一個模塊；
b.實參傳入一個對象，把函數(shù)內(nèi)部生成好的需要導出的東西掛載這個對象的屬性上；

可以看到上面的函數(shù)體內(nèi)部是沒有return語句的，那么可以猜測UMD在實現(xiàn)時是采用了第二種方式，既然UMD是一種模塊化的規(guī)范，那么他的功能就是根據(jù)使用要求生產(chǎn)模塊，也就是說他的職責定位叫做模塊工廠，我們可以頂一個factory方法，每當執(zhí)行該方法時，就返回一個模塊，所以他的基本機構(gòu)就變成了如下的樣子：

(function(factory){
  // 假設(shè)沒有使用任何模塊化方案，那么將工廠函數(shù)執(zhí)行后返回的內(nèi)容直接掛載到全局
  window.Some_Attr = factory();
}(function(){
  // 自定義模塊主題的內(nèi)容
  /*
    var a,b ,c;
    function a1(){};
    function b1(){};
    function c1(){};
    return {
      a:a1,
      b:b1
    }
  */
}))

也就是說我們自頂一個匿名函數(shù)，然后把它當做實參傳給自執(zhí)行函數(shù)，然后在自執(zhí)行函數(shù)內(nèi)部通過形參來訪問這個工廠的方法（或者你回更熟悉回調(diào)函數(shù)或callback這樣的叫法），把它簡單的掛載到全局對象上沒這樣就完成了基本的模塊導出。

有的回收我們也希望可以將模塊掛載到非全局的環(huán)境，將掛載對象動態(tài)傳入可以讓代碼變得更加靈活，此處涉及到一個基礎(chǔ)知識，就是瀏覽器環(huán)境中的全局對象擁有parent，top，self三個屬性來追蹤頁面中嵌入<iframe>后引入的新的Window對象的，單頁面Window.self是指向自己的，代碼中常通過是否包含self屬性來鑒別全局對象，所以此處的寫法可以改進為兼容：

(function(root, factory){
  root.Some_Attr = factory();
}(self !== undefined ? self : this, function(){
}))

2適配AMD

接著我們來加入AMD的規(guī)范適配，規(guī)范地址：AMD規(guī)范git湖北地址：

// AMD規(guī)范的模塊定義格式是define(id?, dependencies?, factory),factory就是實際的模塊內(nèi)容
(function(factory){
  // 判斷全局環(huán)境是否支持AMD標準
  if(typeof define === 'function' && define.amd){
    // 定義一個AMD模塊
    define([dependencies*/], factory);
  }
}(function(){
  // 自定義模塊主題內(nèi)容
  /* 
    var a,b,a;
    function a1(){};
    function b1(){};
    function c1(){};
    return {
      a: a1,
      b: b1
    }
  */
}))

3適配CommonJs

接著我們先加入CommomJS的規(guī)范的適配：

(function(factory){
  // 判斷全局環(huán)境是否支持CommonJS標準
  if(typeof exports === 'object' && typeof define !== 'function'){
    module.eports = factory(/*require(moduleA),require(mouleB)*/);
  }
}(function(){
  // 自定義模塊主題內(nèi)容
  /* 
    var a,b,a;
    function a1(){};
    function b1(){};
    function c1(){};
    return {
      a: a1,
      b: b1
    }
  */
}))

加入CommonJs的適配后，函數(shù)主體的return的內(nèi)容（一般是一個對象）就被掛載到了module.exports上，如果你編寫過node.js代碼，對此一定不會陌生。

把上面的片段揉到一塊，你也就看懂UMD的樣子了。

三、更具針對性的UMD范式

UMD在其GitHub主頁上提供了更具針對性的范式，使用不同的場景，感情去的讀者可以自行查看
地址：https://github.com/umdjs/umd

在此帖一個可能對大多數(shù)開發(fā)者比較有用的jQueryPlugin的開發(fā)范式，如果你看懂了上面的分析，那么下面的代碼應(yīng)該不難看懂：

// Uses CommonJS,AMD or browser globals to create a jQuery plugin.
(fuction (factory){
  if(typeof define === 'funtion' && define.amd){
    // AMD Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports){
    // Node/ComonJS
    module.exports = function(root, jQuery){
      if(jQuery === undefined) {
        if(typeof window !== 'undefined'){
          jQuery = require('jquery');
        } esle {
           jQuery = require('jquery')(root);
        }
      }
      factory(jQuery);
      return jQuery;
    }
  } esle {
    // Browser globals
    factory(jQuery);
  }
}(fuction($){
  $.fn.jqueryPlugin = function(){ return true}
}))

原文 : https://www.php.cn/js-tutorial-410584.html