AMD, UMD, CommonJS

AMD(Asynchronous Module Definition)

中文稱作【異步加載模塊】,是從 RequireJS 發展出來的一個模式,使用方式如下:

下面範例是依賴注入jquery:

//    filename: one.js

define(['jquery'], function ($) {
    //    methods

    function myFunc(){};

    //    回傳 public methods

    return myFunc;
});

你當然不可能只會注入單一 module ,下面示範依賴注入多個 module:

//    filename: one.js

define(['jquery', 'underscore'], function ($, _) {
    //    methods

    function a(){};    //    private function,下面並沒有 return

    function b(){};    //    public function

    function c(){};    //    public function


    //    回傳 public methods

    return {
        b: b,
        c: c
    }
});

這邊要注意的是,jqueryunderscore 的兩個 module 變成由 $ 和 _ 取代,但只有在 define的範圍內有作用。

CommonJS

CommonJS 是一種在 Node.js 上的撰寫風格,在Browserify也有被實作。

//    filename: one.js


//    dependencies

var $ = require('jquery');

//    methods

function myFunc(){};

//    回傳 public method (單一個function)

module.exports = myFunc;

回傳多個 function 的範例為下:

//    filename: foo.js

var $ = require('jquery');
var _ = require('underscore');

//    methods

function a(){};    //    private function 因為並無 module.exports 回去

function b(){};    //    public function

function c(){};    //    public function


//    回傳 public methods

module.exports = {
    b: b,
    c: c
};

UMD(Universal Module Definition)

AMD 和 CommonJS 雖然都被大家廣泛的應用和接受,但彼此間卻沒有共識,而 UMD 則可以在這兩個平台上溝通。
雖然格式看起來很醜,但卻可以在 AMD 和 CommonJS下運作。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD

        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like

        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)

        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    methods

    function myFunc(){};

    //    輸出 public method

    return myFunc;
}));

回傳多個 function 的範例為下:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD

        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like

        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // Browser globals (root is window)

        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    methods

    function a(){};    //    private function 因為並無 module.exports 回去

    function b(){};    //    public function

    function c(){};    //    public function


    //    exposed public methods

    return {
        b: b,
        c: c
    }
}));

參考:

  1. What Is AMD, CommonJS, and UMD?
  2. 关于 CommonJS AMD CMD UMD
  3. Writing Modular JavaScript With AMD, CommonJS & ES Harmony
  4. AMD

Comments

comments powered by Disqus