Computer Keyboard - Głównie JavaScript

Głównie JavaScript

2017-07-14 by Jakub Jankiewicz

Uniwersalne biblioteki JavaScript czyli UMD

UMD czyli Uniwersalna definicja modułu (ang. Universal Module Definition) jest to sposób tworzenia definicji modułu/biblioteki JavaScript aby była możliwość korzystania z niej wszędzie.

Jeśli tworzymy bibliotekę JavaScript to warto zapewnić że będzie możliwość jej użycia w każdej sytuacji, czyli w przeglądarce lub na serwerze (node.js). Korzystając np. z require.js czyli definicji AMD lub CommonJS.

Jeśli nasza biblioteka tworzy nowy obiekt np. foo, który chcemy używać “wszędzie”, to możemy użyć poniższego kodu:

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define(["underscore"], factory);
    } else if (typeof exports === "object") {
        module.exports = factory(require("underscore"));
    } else {
        root.foo = factory(root._);
    }
}(typeof this == 'undefined' ? window : this, function (_) {
    var foo = {
        // nasza definicja obiektu foo
        bar: function() {
            console.log('bar');
        }
    };

    return foo;
}));

Nasza biblioteka posiada jedną zaleźnośc (underscore), w przypadku gdy nasza biblioteka nie ma zależności wystarczy poniższy kod:

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define([], factory);
    } else if (typeof exports === "object") {
        module.exports = factory();
    } else {
        root.foo = factory();
    }
}(typeof this == 'undefined' ? window : this, function () {
    var foo = {
        // nasza definicja obiektu foo
        bar: function() {
            console.log('bar');
        }
    };

    return foo;
}));

Nasz obiekt foo będzie dodany do obiektu globalnego, czyli window w przeglądarce, gdy dodamy nasz moduł za pomocą tagu script:

<script src="foo.js"></script>
<script>
foo.bar();
</script>

Będziemy mogli go załadować przez require.js czyli:

requirejs(['foo'], function(foo) {
    foo.bar();
});

lub w node.js w poniższy sposób:

var foo = require('./foo');
foo.bar();

Jeśli będziemy korzystali z biblioteki Babeljs, aby pisać w ES6, to wtedy będziemy mogli użyć poniższego kodu:

import foo from './foo';
foo.bar();

A wszystko to dzięki temu, że dodaliśmy trochę więcej kodu do naszej biblioteki. Więcej szablonów dotyczących UMD można znaleźć na stronie projektu na githubie.

źródło strony (aby zobaczyć kod na githubie musisz kliknąć przycisk raw)