javascrip中UMD規範的詳細介紹（附程式碼）

這篇文章帶給大家的內容是關於javascrip中UMD規範的詳細介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1. UMD規範

網址：https://github.com/umdjs/umd

UMD規範，就是所有規範裡長得最醜的那個，沒有之一！ ！ ！它是為了讓模組同時相容於AMD和CommonJs規範而出現的，多被一些需要同時支援瀏覽器端和服務端引用的第三方函式庫所使用。 UMD是一個時代的產物，當各種環境最終實現ES harmony的統一的規範後，它也將退出歷史舞台。

UMD規範的結構乍看之下非常複雜，主要是因為想要看懂這段範式需要一些javascript基礎知識，它的基本結構是這樣的：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        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
    }
}));

2. 原始碼範式推演

2.1 基本結構

先來看最外層的結構：

(function (){}());

很簡單，就是一個自執行函數。既然它是一個模組化的標準，也意味著這個自執行函數最終可以導出一個模組，那麼從程式碼的角度來講其實有兩種常見的實作方式：

1. return回傳一個模組；

2. 實參傳入一個對象，把函數內部產生好的需要導出的東西掛在這個物件的屬性上；

可以看到上面的函數體內部是沒有return語句的，那麼可以猜測UMD在實作時是採用了第二種方式。既然UMD是一種模組化的規範，那麼它的功能就是根據使用要求生產模組，也就是說它的職責定位叫做模組工廠，我們可以定義一個factory方法，每當執行該方法時，就回返回一個模組，所以它的基本結構就變成瞭如下的樣子：

(function (factory){
    //假设没有使用任何模块化方案，那么将工厂函数执行后返回的内容直接挂载到全局
    window.Some_Attr = factory（）;
}(function(){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

#也就是說我們自訂一個匿名函數，然後把它當做實參傳給了自執行函數，然後在自執行函數內部透過形參來存取這個工廠方法（或者你會更熟悉回呼函數或callback這樣的叫法），把它簡單地掛在到全域物件上，這樣就完成了基本的模組導出。

有的時候我們也希望可以將模組掛載到非全局的環境，將掛載物件動態傳入可以讓程式碼變得更靈活，這裡涉及到一個基礎知識，就是瀏覽器環境中的全域物件擁有parent,top,self三個屬性來追蹤頁面中嵌入