d.aster/Front-End
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

hinzugefügt 3th Part-Module (lodash, leaflet) in den Kode. Hinzugefügt package.json mit den hinzugefügten Dependencies

Browse Source
This commit is contained in:
David 2022-11-15 20:00:47 +01:00
parent 8eb52fb8ef
commit cd17210f52
5 changed files with 74 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
javascript/Javascript Expert/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

7
javascript/Javascript Expert/chapter17/modulePattern.js
View File

@ -1,6 +1,6 @@
const ShoppingCard2 = (function () { const ShoppingCard2 = (function () {
// solche function wird automatisch ausgeführt und die Eigenschaften/Werte werden eingestellt // solche function wird automatisch ausgeführt und die Eigenschaften/Werte werden eingestellt
//und werden in die Variable ShoppingCard2 als Object gespeichert //die erwähnten Eigenschaften werden in die Variable ShoppingCard2 als Object gespeichert (sehe die Zeile 19 - 25)
const cart = []; const cart = [];
const shippingCost = 10; const shippingCost = 10;
const totalPrice = 235; const totalPrice = 235;
@ -17,7 +17,7 @@ const ShoppingCard2 = (function () {
}; };
return { return {
// die Funktion gibt die eingestellten Werte zurück // die Funktion gibt die eingestellten Werte als Objekt der Eigenschaten zurück
cart, cart,
totalPrice, totalPrice,
totalQuantitiy, totalQuantitiy,
@ -30,4 +30,5 @@ const ShoppingCard2 = (function () {
ShoppingCard2.addToCart("apfel", 5); ShoppingCard2.addToCart("apfel", 5);
ShoppingCard2.addToCart("heidelbeeren", 1); ShoppingCard2.addToCart("heidelbeeren", 1);
console.log(ShoppingCard2); console.log(ShoppingCard2);
console.log(ShoppingCard2.shippingCost); // undefined console.log(ShoppingCard2.shippingCost); // undefined - die Eigenschaft des ShoppingCard2 Objektes liefert
// nur die folgenden Eigenschaften des ShoppingCard2 Objektes: cart, totalPrice, totalQuantitiy, addToCart,

30
javascript/Javascript Expert/chapter17/npmUsage/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script defer type="module" src="script.js"></script>
<title>Modern JavaScript Development: Modules and Tooling</title>
<style>
body {
height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
h1 {
font-family: sans-serif;
font-size: 50px;
line-height: 1.3;
width: 100%;
padding: 30px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>Modern JavaScript Development: Modules and Tooling</h1>
</body>
</html>

16
javascript/Javascript Expert/chapter17/npmUsage/package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "npmusage",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"leaflet": "^1.9.2",
"lodash-es": "^4.17.21"
},
"type": "module"
}

23
javascript/Javascript Expert/chapter17/npmUsage/script.js Normal file
View File

@ -0,0 +1,23 @@
import cloneDeep from "./node_modules/lodash-es/cloneDeep.js";
const state = {
cart: [
{ product: "bread", quantity: 3 },
{ product: "ananas", quantity: 2 },
],
user: {
loggedIn: true,
},
};
const stateClone = Object.assign({}, state);
console.log(stateClone);
stateClone.user.loggedIn = false;
console.log(state); // beim Object-Klonen, ändert sich auch die Eigenschaften aus dem originalen Objekt
const stateDeepClone = cloneDeep(state); // damit wird ein richtiges Klon des Objektes erstellt, das nicht von dem originalen Object abhängig ist.
// Mit Eigenschaften-Änderung werden sich die originalen Eigenschaften aus dem abgeleiteten Objekt nicht ändern. Es geht um zwei verschiedenen Objekte
stateDeepClone.user.loggedIn = true; //
console.log(stateDeepClone);
console.log();