ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-08-05 09:49:28 +02:00
parent 07dfcec4ef
commit c548ea97a1
32 changed files with 4588 additions and 1956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
05_react/uebungen/u02-03_mathfn-modul/assets/js/MathFn.js Normal file
View File

@@ -0,0 +1,14 @@
// Factory Function
const MathFn = () => {
// closures
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => {
return b === 0 ? NaN : a / b;
};
export { add, subtract, multiply, divide };
};
export default MathFn;

27
05_react/uebungen/u02-03_mathfn-modul/assets/js/main.js Normal file
View File

@@ -0,0 +1,27 @@
import { add, subtract, divide, multiply } from './math';
import math from './math';
import MathFn from './MathFn';
const app = MathFn();
console.log(app.add(1, 2)); // => 3;
console.log(app.subtract(3, 2)); //=> 1
console.log(app.multiply(2, 3)); // => 6
console.log(app.divide(6, 3)); // => 2
console.log(add(1, 2)); // => 3;
console.log(subtract(3, 2)); //=> 1
console.log(multiply(2, 3)); // => 6
console.log(divide(6, 3)); // => 2
// -----------------------
console.log(math.add(1, 2)); // => 3;
console.log(math.subtract(3, 2)); //=> 1
console.log(math.multiply(2, 3)); // => 6
console.log(math.divide(6, 3)); // => 2

37
05_react/uebungen/u02-03_mathfn-modul/assets/js/math.js Normal file
View File

@@ -0,0 +1,37 @@
// explizite Freigabe von Einheiten
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// Übung 2: Mathfunktionen als Modul
// Programmiere zwei weitere Module, die jeweils eine Funktion multiply und divide enthalten. Importiere die Funktionen in der main.js-Datei und führe sie aus.
export const multiply = (a, b) => a * b;
export const divide = (a, b) => {
return b === 0 ? NaN : a / b;
};
// Übung 3: Exportieren Funktionen als Objekt
// Anstatt die Funktionen add, subtract, multiply und divide benannt zu exportieren, exportiere sie als Standard-Export in einem Objekt. Importiere das Objekt in der main.js-Datei und führe die Funktionen aus.
export default {
add,
subtract,
multiply,
divide,
// add: add,
// subtract: subtract,
// multiply:multiply,
// divide: divide,
};
// Übung 2: Mathfunktionen als Modul
// Programmiere zwei weitere Module, die jeweils eine Funktion multiply und divide enthalten. Importiere die Funktionen in der main.js-Datei und führe sie aus.
// Übung 3: Exportieren Funktionen als Objekt
// Anstatt die Funktionen add, subtract, multiply und divide benannt zu exportieren, exportiere sie als Standard-Export in einem Objekt. Importiere das Objekt in der main.js-Datei und führe die Funktionen aus.

14
05_react/uebungen/u02-03_mathfn-modul/esbuild.config.js Normal file
View File

@@ -0,0 +1,14 @@
// esbuild.config.js
// const esbuild = require('esbuild');
import * as esbuild from 'esbuild';
// https://esbuild.github.io/getting-started/#your-first-bundle
esbuild
.build({
entryPoints: ['assets/js/main.js'],
bundle: true,
outfile: 'dist/bundle.js',
minify: false,
sourcemap: true,
})
.catch(() => process.exit(1));

24
05_react/uebungen/u02-03_mathfn-modul/index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Module in JS mit Bundler</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="dist/bundle.js" defer></script>
</head>
<body>
<main>
<div class="container py-5">
<h1>Verwendung und Import von Modulen in JS MIT BUNDLER</h1>
<hr />
<p>Um die Modul-Schreibweise in JS zu verwenden, müssen folgende Punkte berücksichtigt werden:</p>
<ul class="list">
<li>Eingebundene Module können ohne Dateiendung eingebunden werden.</li>
</ul>
<h3>Ergebnis</h3>
<p>Die einzelnen Komponenten werden zur Kompilierzeit zu einer Datei zusammengefasst</p>
</div>
</main>
</body>
</html>

1130
05_react/uebungen/u02-03_mathfn-modul/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

18
05_react/uebungen/u02-03_mathfn-modul/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "02_modul-schreibweise",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx esbuild assets/js/main.js --bundle --watch --sourcemap --outfile=dist/bundle.js",
"server": "npx http-server -c-1 -p 3000"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"devDependencies": {
"esbuild": "^0.28.1",
"http-server": "^14.1.1"
}
}