JavaScript
Techniki modularyzacji

Universal Module Definition (UMD)

Wzorzec UMD (Universal Module Definition) jest używany, gdy nasz moduł musi zostać zaimportowany przez wiele różnych modułów ładujących (np. AMD, CommonJS).

Sam wzór składa się z dwóch części:

1. IIFE (Natychmiastowe wywołanie funkcji), które sprawdza moduł ładujący wdrażany przez użytkownika. To wymaga dwóch argumentów; root ( this odniesienie do zasięgu globalnego) i factory (funkcja, w której deklarujemy nasz moduł).

2. Anonimowa funkcja tworząca nasz moduł. Jest to przekazywane jako drugi argument do części IIFE wzorca. Do tej funkcji przekazywana jest dowolna liczba argumentów w celu określenia zależności modułu.

W poniższym przykładzie sprawdzamy AMD, a następnie CommonJS. Jeśli żaden z tych modułów ładujących nie jest używany, wracamy do udostępniania modułu i jego zależności na całym świecie.

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'b'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('b'));
    } else {
        // Browser globals
        factory((root.commonJsStrict = {}), root.b);
    }
}(this, function (exports, b) {
    //use b in some fashion.

    // attach properties to the exports object to define
    // the exported module properties.
    exports.action = function () {};
}));

Natychmiast wywołane wyrażenia funkcyjne (IIFE)

Natychmiast wywołanych wyrażeń funkcyjnych można użyć do utworzenia zakresu prywatnego podczas tworzenia publicznego interfejsu API.

var Module = (function() {
  var privateData = 1;

  return {
    getPrivateData: function() {
      return privateData;
    }
  };
})();
Module.getPrivateData(); // 1
Module.privateData; // undefined

Zobacz wzór modułu, aby uzyskać więcej informacji.

Definicja modułu asynchronicznego (AMD)

AMD to system definicji modułów, który próbuje rozwiązać niektóre typowe problemy z innymi systemami, takimi jak CommonJS i anonimowe zamknięcia.

AMD rozwiązuje te problemy poprzez:

• Rejestrowanie funkcji fabrycznej poprzez wywołanie funkcji definiuj () zamiast natychmiastowego jej wykonania
• Przekazywanie zależności w postaci tablicy nazw modułów, które są następnie ładowane zamiast globałów
• Wykonywanie funkcji fabrycznej dopiero po załadowaniu i wykonaniu wszystkich zależności
• Przekazywanie modułów zależnych jako argumentów do funkcji fabryki

Kluczową kwestią jest to, że moduł może mieć zależność i nie utrzymywać wszystkiego w oczekiwaniu na załadowanie, bez konieczności pisania skomplikowanego kodu przez programistę.

Oto przykład AMD:

// Define a module "myModule" with two dependencies, jQuery and Lodash
define("myModule", ["jquery", "lodash"], function($, _) {
    // This publicly accessible object is our module
    // Here we use an object, but it can be of any type
    var myModule = {};

    var privateVar = "Nothing outside of this module can see me";

    var privateFn = function(param) {
        return "Here's what you said: " + param;
    };

    myModule.version = 1;

    myModule.moduleMethod = function() {
        // We can still access global variables from here, but it's better
        // if we use the passed ones
        return privateFn(windowTitle);
    };

    return myModule;
});

Moduły mogą również pomijać nazwę i być anonimowe. Gdy to nastąpi, zwykle są ładowane według nazwy pliku.

define(["jquery", "lodash"], function($, _) { /* factory */ });

Mogą również pomijać zależności:

define(function() { /* factory */ });

Niektóre moduły ładujące AMD obsługują definiowanie modułów jako zwykłych obiektów:

define("myModule", { version: 1, value: "sample string" });

CommonJS - Node.js

CommonJS to popularny wzorzec modularyzacji używany w Node.js.

System CommonJS koncentruje się wokół funkcji require() która ładuje inne moduły, oraz właściwości exports która pozwala modułom eksportować publicznie dostępne metody.

Oto przykład CommonJS, załadujemy moduł fs Lodash i Node.js:

// Load fs and lodash, we can use them anywhere inside the module
var fs = require("fs"),
    _ = require("lodash");

var myPrivateFn = function(param) {
    return "Here's what you said: " + param;
};

// Here we export a public `myMethod` that other modules can use
exports.myMethod = function(param) {
    return myPrivateFn(param);
};

Możesz także wyeksportować funkcję jako cały moduł za pomocą module.exports :

module.exports = function() {
    return "Hello!";
};

Moduły ES6

export function greet(name) {
    console.log("Hello %s!", name);
}

var myMethod = function(param) {
    return "Here's what you said: " + param;
};

export {myMethod}

export class MyClass {
    test() {}
}

import greet from "mymodule.js";

greet("Bob");

import * as myModule from "mymodule.js";

myModule.greet("Alice");

import { greet as A, myMethod as B } from "mymodule.js";

Więcej informacji na temat modułów ES6 można znaleźć w temacie Moduły .