Computer Keyboard - Głównie JavaScript

Głównie JavaScript

rss feed icon

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.

  • javascript
  • node.js
  • umd
  • modules