GlossarWiki:Bücher/Web-Programmierung/DOs and DON'Ts: Unterschied zwischen den Versionen
aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
| (9 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 3: | Zeile 3: | ||
=== Verwenden Sie aktuelle ECMAScript-Features === | === Verwenden Sie aktuelle ECMAScript-Features === | ||
* Ihre Anwendung muss in aktuellen Browsern (mindestens Chrome; zusätzlich erwünscht: Firefox, Safari, Edge) | * Ihre Anwendung muss in aktuellen Browsern laufen (mindestens Chrome; zusätzlich erwünscht: Firefox, Safari, Edge). | ||
* Ältere Browserversionen brauchen nicht unterstützt zu werden. | * Ältere Browserversionen brauchen nicht unterstützt zu werden. | ||
Sie dürfen und alle aktuellen ES6-Anweisungen/-Features verwenden, die von diesen vier Browsern unterstützt werden: | Sie dürfen und sollen alle aktuellen ES6-Anweisungen/-Features verwenden, die von diesen vier Browsern unterstützt werden: | ||
[https://kangax.github.io/compat-table/es6/ ES6 Compatibility Table] und | [https://kangax.github.io/compat-table/es6/ ES6 Compatibility Table] und | ||
[https://kangax.github.io/compat-table/es2016plus/ ES6+ Compatibility Table] (ES 2016 bis ES 2023). | [https://kangax.github.io/compat-table/es2016plus/ ES6+ Compatibility Table] (ES 2016 bis ES 2023). | ||
| Zeile 14: | Zeile 14: | ||
=== Verwenden Sie keine veralteten ECMAScript-Anweisungen/-Features === | === Verwenden Sie keine veralteten ECMAScript-Anweisungen/-Features === | ||
{| class="wikitable" style="width: | {| class="wikitable" style="width:100%" | ||
! veraltet || aktuell || Anmerkung | ! veraltet || aktuell || Anmerkung | ||
|- | |- | ||
| || [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode?retiredLocale=de strict mode] || | | || [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode?retiredLocale=de strict mode] || in [[Vue]] automatisch aktiviert | ||
|- | |- | ||
| ES5-Modularisierung || ES6-Module || | | ES5-Modularisierung || ES6-Module || | ||
| Zeile 23: | Zeile 23: | ||
| <code>require</code> {{oÄ}} || <code>export</code>, <code>import</code> || | | <code>require</code> {{oÄ}} || <code>export</code>, <code>import</code> || | ||
|- | |- | ||
| <code>var</code> || <code>let</code> und <code>const</code> || | | <code>var</code> || <code>let</code> und <code>const</code> || | ||
|- | |- | ||
| <code>==</code> || <code>===</code> || <code>... == null</code> ist erlaubt (Test auf <code>null</code> oder <code>undefined</code>) | | <code>==</code> || <code>===</code> || <code>... == null</code> ist erlaubt (Test auf <code>null</code> oder <code>undefined</code>) | ||
|- | |- | ||
| <code> | | <code>p_event.keyCode == 13</code> || <code>p_event.key === 'Enter'</code> || | ||
|- | |||
| Array:<br><code>for e in a</code> || <code>for e of a</code> <br> <code>for (let i=0, n=a.length; i<n; i++)<br>{ ... } </code> || | |||
|- | |||
| Objekt:<br><code>for e in o</code> || <code>for k of Object.keys(o)</code><br><code>for v of Object.values(o)</code><br><code>for [k,v] of Object.entries(o)</code> || | |||
|- | |- | ||
| Prototyping || Classes || | | Prototyping || Classes || | ||
| Zeile 35: | Zeile 39: | ||
| <code>getA()</code>, <code>setA(x)</code> || Getter- und Setter-Funktionen || | | <code>getA()</code>, <code>setA(x)</code> || Getter- und Setter-Funktionen || | ||
|} | |} | ||
=== Schreiben Sie modularen und wiederverwendbaren Code === | |||
* Modulare Programmierung macht, wenn man es richtig macht, den Code wartbarer. Jedes Modul sollte nur eine Aufgabe erfüllen. Wenn man überprüft hat, dass das Modul die ihm zugewiesene Aufgabe korrekt erfüllt, | |||
* Schreiben Sie wiederverwendbare Module. | |||
** Wiederverwendbare Module können mehrfach im Code verwendet werden. Dies verhindert [[DRY|Don't Repeat Yourself]], d.h.der Code wird “[[DRY]]”. | |||
** Wiederverwendbare Module können auch in Folgeprojekten verwendet werden. | |||
=== Laden Sie CSS- und JS-Module asynchron=== | |||
* In einer HTML-Datei sollten kein CCS- und JS-Code direkt eingefügt werden (Ausnahme: <code>head.css</code>). | |||
* Der Code sollte '''asynchron''' aus (von Vite optimierenten) Dateien geladen werden. | |||
Aktuelle Version vom 5. April 2023, 09:47 Uhr
Vorgaben für eine Studienarbeit im Fach Web-Programmierung
Verwenden Sie aktuelle ECMAScript-Features
- Ihre Anwendung muss in aktuellen Browsern laufen (mindestens Chrome; zusätzlich erwünscht: Firefox, Safari, Edge).
- Ältere Browserversionen brauchen nicht unterstützt zu werden.
Sie dürfen und sollen alle aktuellen ES6-Anweisungen/-Features verwenden, die von diesen vier Browsern unterstützt werden: ES6 Compatibility Table und ES6+ Compatibility Table (ES 2016 bis ES 2023).
Auch für Node.js-Anwendungen sollen Sie die aktuellen ES6-Anweisungen/-Features verwenden.
Verwenden Sie keine veralteten ECMAScript-Anweisungen/-Features
| veraltet | aktuell | Anmerkung |
|---|---|---|
| strict mode | in Vue automatisch aktiviert | |
| ES5-Modularisierung | ES6-Module | |
require o. Ä. |
export, import |
|
var |
let und const |
|
== |
=== |
... == null ist erlaubt (Test auf null oder undefined)
|
p_event.keyCode == 13 |
p_event.key === 'Enter' |
|
Array:for e in a |
for e of a for (let i=0, n=a.length; i<n; i++) |
|
Objekt:for e in o |
for k of Object.keys(o)for v of Object.values(o)for [k,v] of Object.entries(o) |
|
| Prototyping | Classes | |
function wenn nötig |
Arrow Functions ansonsten | |
getA(), setA(x) |
Getter- und Setter-Funktionen |
Schreiben Sie modularen und wiederverwendbaren Code
- Modulare Programmierung macht, wenn man es richtig macht, den Code wartbarer. Jedes Modul sollte nur eine Aufgabe erfüllen. Wenn man überprüft hat, dass das Modul die ihm zugewiesene Aufgabe korrekt erfüllt,
- Schreiben Sie wiederverwendbare Module.
- Wiederverwendbare Module können mehrfach im Code verwendet werden. Dies verhindert Don't Repeat Yourself, d.h.der Code wird “DRY”.
- Wiederverwendbare Module können auch in Folgeprojekten verwendet werden.
Laden Sie CSS- und JS-Module asynchron
- In einer HTML-Datei sollten kein CCS- und JS-Code direkt eingefügt werden (Ausnahme:
head.css). - Der Code sollte asynchron aus (von Vite optimierenten) Dateien geladen werden.
