JavaScript
Modulariseringstekniker

Universal Module Definition (UMD)

UMD-mönstret (Universal Module Definition) används när vår modul måste importeras av ett antal olika modullastare (t.ex. AMD, CommonJS).

Mönstret i sig består av två delar:

1. Ett IIFE (Immediately-Invoked Function Expression) som söker efter modullastaren som implementeras av användaren. Detta kommer att kräva två argument; root (en this referens till det globala räckvidden) och factory (funktionen där vi förklarar vår modul).

2. En anonym funktion som skapar vår modul. Detta överförs som det andra argumentet till IIFE-delen av mönstret. Denna funktion överförs vilket antal argument som helst för att specificera modulens beroenden.

I exemplet nedan kontrollerar vi för AMD, sedan CommonJS. Om ingen av dessa lastare används är vi tillbaka till att göra modulen och dess beroende tillgängliga globalt.

(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 () {};
}));

Omedelbart åberopade funktionsuttryck (IIFE)

Omedelbart åberopade funktionsuttryck kan användas för att skapa en privat räckvidd medan man producerar ett offentligt API.

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

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

Se modulmönstret för mer information.

Asynchronous Module Definition (AMD)

AMD är ett moduldefinitionssystem som försöker ta itu med några vanliga problem med andra system som CommonJS och anonyma stängningar.

AMD tar upp dessa frågor genom att:

• Registrera fabriksfunktionen genom att ringa definiera (), istället för att omedelbart köra den
• Vidarebefordra beroenden som en rad modulnamn, som sedan laddas, istället för att använda globala
• Kör endast fabriksfunktionen när alla beroenden har laddats och körts
• Vidarebefordra de beroende modulerna som argument till fabriksfunktionen

Det viktigaste här är att en modul kan ha ett beroende och inte hålla upp allt medan man väntar på att den laddas, utan att utvecklaren behöver skriva komplicerad kod.

Här är ett exempel på 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;
});

Moduler kan också hoppa över namnet och vara anonyma. När det är gjort laddas de vanligtvis med filnamn.

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

De kan också hoppa över beroenden:

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

Vissa AMD-laddare stöder att definiera moduler som vanliga objekt:

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

CommonJS - Node.js

CommonJS är ett populärt modulariseringsmönster som används i Node.js.

CommonJS-systemet är centrerat kring en require() -funktion som laddar andra moduler och en exports som låter moduler exportera offentligt tillgängliga metoder.

Här är ett exempel på CommonJS, vi laddar Lodash och Node.js ' fs modul:

// 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);
};

Du kan också exportera en funktion som hela modulen med module.exports :

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

ES6-moduler

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";

Mer information om ES6-moduler finns i modulens ämne.