Table of Contents
Zur Erinnerung: JavaScript kann sowohl im Frontend (Browser) als auch im Backend (Serverseitig über Node.js) ausgeführt werden. Die hier beschriebenen Methoden sind teilweise für Frontend und/oder Backend anwendbar.
Asynchronous Module Definition (AMD)
AMD ist eine Art und Weise wie man JavaScript Module implementieren kann, die asynchron geladen werden.
define(['dep1', 'dep2'], function (dep1, dep2) {
//Define the module value by returning a value.
return function () {};
});AMD wurde primär nur für das Frontend (also Browser) entwickelt, nicht fürs Backend. Hauptsächlich wird hier RequireJS als Implementation dieser Methode verwendet.
D.h. damit diese Module im Browser funktionieren muss als erstes RequireJS geladen werden und danach erst die jeweiligen AMD Module. Siehe HIER
CommonJS (CJS)
CJS ladet JavaScript Module synchron, im Gegensatz zu AMD.
//importing
const doSomething = require('./doSomething.js');
//exporting
module.exports = function doSomething(n) {
// do something
}Primär wird CJS nur in Node.js verwendet – und damit serverseitiges JavaScript. Hier bauen Module auf dem Befehl „require“ und „module.exports“ auf.
CJS funktioniert NICHT im Browser.
Universal Module Definition (UMD)
Nach einiger Zeit waren sowohl AMD als auch CJS in allgemeiner Verwendung, jedoch nicht miteinander kompatibel.
Daher wurde UMD entwickelt welches für beide Welten (AMD und CJS) und damit sowohl Frontend als auch Backend verwendbar ist.
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(["jquery", "underscore"], factory);
} else if (typeof exports === "object") {
module.exports = factory(require("jquery"), require("underscore"));
} else {
root.Requester = factory(root.$, root._);
}
}(this, function ($, _) {
// this is where I defined my module implementation
var Requester = { // ... };
return Requester;
}));Jedoch wird UMD aktuell nur mehr als Fallback verwendet. Siehe nächstes Kapitel warum.
ES Modules (ESM empfohlene Variante)
ES Modules sind die „offizielle“ Art und Weiße laut dem ES6 Standard wie man JavaScript Module schreiben soll.
// in index.html
<script type="module" src="main.js"></script>
// in main.js
import {addTextToBody} from './util.js';
addTextToBody('Modules are pretty cool.');
// in util.js
export function addTextToBody(text) {
const div = document.createElement('div');
div.textContent = text;
document.body.appendChild(div);
}Sozusagen die Funktionalität von AMD (asynchrones laden) mit der Schreibweise von CJS.
Hier ein Beispiel mit einem „direkten“ laden von einem Module als auch einem asynchronen Laden eines Modules nach 5 Sekunden.
// index.html
<html>
<head>
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>
// main.js
import {addTextToBody} from './util.js';
addTextToBody('Modules are pretty cool.');
setTimeout(function(){
import('./later.js')
.then(module => {
module.laterFuncton();
})
}, 5000);
// util.js
export function addTextToBody(text) {
const div = document.createElement('div');
div.textContent = text;
document.body.appendChild(div);
}
// later.js
export function laterFuncton() {
alert("hello");
}Browser-Support: https://caniuse.com/#feat=es6-module
Source: https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm