Wer wie ich als Java-Entwickler in die Javascript-Welt eintaucht, vermisst eine vernünftige Gliederung in Module und die Definition von Abhängigkeiten dazwischen. In der alten Javascript-Welt wurden dafür viele Mechanismen geschaffen, deren Gebrauch für den Neuling verwirrend ist.
Mit EcmaScript 6 (auch EcmaScript 2015) ist eine Definition von Modulen und imports bzw. exports mit sauberen Sprachmitteln möglich. Ein Beispiel:
<!DOCTYPE html> <html> <head> <title>ES6 Module</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="module"> import {getGreeting} from "./js/greeting.js"; document.getElementById("content").textContent = getGreeting(); </script> </head> <body> <div id="content">placeholder for content</div> </body> </html>
import * as my from "./mylib.js"; export function getGreeting() { return my.addMy("Hello World!"); }
export function addMy(str) { return "My " + str; }
Die gute Nachricht: Moderne Browser wie Chrome (ab Version 61 ohne Flags), Firefox, Safari und Edge (Edge und Firefox allerdings hinter Flags) unterstützen das bereits ohne Zusatzmittel wie Transpiler etc.:
https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7
https://caniuse.com/#feat=es6-module
In EcmaScript 6 (synonym ES6 und EcmaScript 2015) sind aber noch viele andere gute Features und syntaktische Erleichterungen enthalten:
JavaScript ist damit eine richtig erwachsene Sprache und wird damit Java immer ähnlicher 😉