Skip to content

Commit 4181f3b

Browse files
authored
Merge pull request #101 from jonasrdl/master
Polyfills and transpilers
2 parents b85092b + 7023014 commit 4181f3b

File tree

2 files changed

+57
-57
lines changed

2 files changed

+57
-57
lines changed
Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
11

22
# Polyfills
33

4-
The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
4+
JavaScript entwickelt sich stetig weiter. Neue Vorschläge für die Sprache erscheinen regelmäßig, sie werden analysiert und, wenn sie als würdig erachtet werden, an die Liste unter <https://tc39.github.io/ecma262/> angehängt und dann zur [Spezifikation](http:// www.ecma-international.org/publications/standards/Ecma-262.htm) freigegeben.
55

6-
Teams behind JavaScript engines have their own ideas about what to implement first. They may decide to implement proposals that are in draft and postpone things that are already in the spec, because they are less interesting or just harder to do.
6+
Teams hinter JavaScript-Engines haben ihre eigenen Vorstellungen davon, was zuerst implementiert werden soll. Sie können beschließen, Vorschläge zu implementieren, die sich im Entwurf befinden, und Dinge, die bereits in der Spezifikation enthalten sind, verschieben, weil sie weniger interessant oder einfach schwieriger zu machen sind.
77

8-
So it's quite common for an engine to implement only the part of the standard.
8+
Es ist also durchaus üblich, dass eine Engine nur einen Teil des Standards implementiert.
99

10-
A good page to see the current state of support for language features is <https://kangax.github.io/compat-table/es6/> (it's big, we have a lot to study yet).
10+
Eine gute Seite, um den aktuellen Stand der Unterstützung für Sprachfunktionen zu sehen, ist <https://kangax.github.io/compat-table/es6/> (es ist groß, wir haben noch viel zu lernen).
1111

1212
## Babel
1313

14-
When we use modern features of the language, some engines may fail to support such code. Just as said, not all features are implemented everywhere.
14+
Wenn wir moderne Funktionen der Sprache verwenden, können einige Engines diesen Code möglicherweise nicht unterstützen. Wie gesagt, nicht alle Funktionen sind überall implementiert.
1515

16-
Here Babel comes to the rescue.
16+
Hier kommt Babel zur Rettung.
1717

18-
[Babel](https://babeljs.io) is a [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler). It rewrites modern JavaScript code into the previous standard.
18+
[Babel](https://babeljs.io) ist ein [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler). Es schreibt modernen JavaScript-Code in den vorherigen Standard um.
1919

20-
Actually, there are two parts in Babel:
20+
Tatsächlich gibt es in Babel zwei Teile:
2121

22-
1. First, the transpiler program, which rewrites the code. The developer runs it on their own computer. It rewrites the code into the older standard. And then the code is delivered to the website for users. Modern project build systems like [webpack](http://webpack.github.io/) provide means to run transpiler automatically on every code change, so that it's very easy to integrate into development process.
22+
1. Erstens das Transpiler-Programm, das den Code umschreibt. Der Entwickler führt es auf seinem eigenen Computer aus. Es schreibt den Code in den älteren Standard um. Und dann wird der Code für die Benutzer an die Website geliefert. Moderne Projekt-Build-Systeme wie [webpack](http://webpack.github.io/) bieten die Möglichkeit, den Transpiler bei jeder Codeänderung automatisch auszuführen, sodass er sehr einfach in den Entwicklungsprozess integriert werden kann.
2323

24-
2. Second, the polyfill.
24+
2. Zweitens, der polyfill.
2525

26-
New language features may include new built-in functions and syntax constructs.
27-
The transpiler rewrites the code, transforming syntax constructs into older ones. But as for new built-in functions, we need to implement them. JavaScript is a highly dynamic language, scripts may add/modify any functions, so that they behave according to the modern standard.
26+
Neue Sprachfeatures können neue integrierte Funktionen und Syntaxkonstrukte umfassen.
27+
Der Transpiler schreibt den Code neu und wandelt Syntaxkonstrukte in ältere um. Aber was neue eingebaute Funktionen betrifft, müssen wir sie implementieren. JavaScript ist eine hochdynamische Sprache, Skripte können beliebige Funktionen hinzufügen/ändern, damit sie sich dem modernen Standard entsprechend verhalten.
2828

29-
A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations.
29+
Ein Skript, das neue Funktionen aktualisiert/hinzufügt, wird "Polyfill" genannt. Es "füllt" die Lücke und fügt fehlende Implementierungen hinzu.
3030

31-
Two interesting polyfills are:
32-
- [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features.
33-
- [polyfill.io](http://polyfill.io) service that provides a script with polyfills, depending on the features and user's browser.
31+
Zwei interessante Polyfills sind:
32+
- [core js](https://github.com/zloirock/core-js), der vieles unterstützt, ermöglicht es, nur benötigte Funktionen einzubinden.
33+
- [polyfill.io](http://polyfill.io) Dienst, der ein Skript mit Polyfills bereitstellt, abhängig von den Funktionen und dem Browser des Benutzers.
3434

35-
So, if we're going to use modern language features, a transpiler and a polyfill are necessary.
35+
Wenn wir moderne Sprachfunktionen verwenden möchten, sind ein Transpiler und ein Polyfill erforderlich.
3636

37-
## Examples in the tutorial
37+
## Beispiele im Tutorial
3838

3939

4040
````online
41-
Most examples are runnable at-place, like this:
41+
Die meisten Beispiele sind direkt lauffähig, wie folgt:
4242
4343
```js run
44-
alert('Press the "Play" button in the upper-right corner to run');
44+
alert('Drücken Sie die Schaltfläche "Starten" in der oberen rechten Ecke, um zu starten');
4545
```
4646
47-
Examples that use modern JS will work only if your browser supports it.
47+
Beispiele, die modernes JS verwenden, funktionieren nur, wenn Ihr Browser dies unterstützt.
4848
````
4949

5050
```offline
51-
As you're reading the offline version, in PDF examples are not runnable. In EPUB some of them can run.
51+
Während Sie die Offline-Version lesen, sind PDF-Beispiele nicht lauffähig. In EPUB können einige von ihnen ausgeführt werden.
5252
```
5353

54-
Google Chrome is usually the most up-to-date with language features, good to run bleeding-edge demos without any transpilers, but other modern browsers also work fine.
54+
Google Chrome ist in der Regel mit Sprachfunktionen auf dem neuesten Stand und eignet sich gut, um topaktuelle Demos ohne Transpiler auszuführen, aber auch andere moderne Browser funktionieren einwandfrei.
Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,87 @@
11

2-
# Global object
2+
# Globales Objekt
33

4-
The global object provides variables and functions that are available anywhere. By default, those that are built into the language or the environment.
4+
Das globale Objekt stellt Variablen und Funktionen bereit, die überall verfügbar sind. Standardmäßig diejenigen, die in die Sprache oder die Umgebung integriert sind.
55

6-
In a browser it is named `window`, for Node.js it is `global`, for other environments it may have another name.
6+
In einem Browser heißt es `window`, für Node.js ist es `global`, für andere Umgebungen kann es einen anderen Namen haben.
77

8-
Recently, `globalThis` was added to the language, as a standardized name for a global object, that should be supported across all environments. In some browsers, namely non-Chromium Edge, `globalThis` is not yet supported, but can be easily polyfilled.
8+
Vor kurzem wurde der Sprache `globalThis` als standardisierter Name für ein globales Objekt hinzugefügt, das in allen Umgebungen unterstützt werden soll. In einigen Browsern, insbesondere Nicht-Chromium Edge, wird `globalThis` noch nicht unterstützt, kann aber leicht mit Polyfills umgangen werden.
99

10-
We'll use `window` here, assuming that our environment is a browser. If your script may run in other environments, it's better to use `globalThis` instead.
10+
Wir verwenden hier `window`, vorausgesetzt, unsere Umgebung ist ein Browser. Wenn dein Skript in anderen Umgebungen ausgeführt werden kann, ist es besser, stattdessen `globalThis` zu verwenden.
1111

12-
All properties of the global object can be accessed directly:
12+
Auf alle Eigenschaften des globalen Objekts kann direkt zugegriffen werden:
1313

1414
```js run
15-
alert("Hello");
16-
// is the same as
17-
window.alert("Hello");
15+
alert("Hallo");
16+
// ist das selbe wie
17+
window.alert("Halllo");
1818
```
1919

20-
In a browser, global functions and variables declared with `var` (not `let/const`!) become the property of the global object:
20+
In einem Browser werden mit `var` (nicht `let/const`!) deklarierte globale Funktionen und Variablen Eigentum des globalen Objekts:
2121

2222
```js run untrusted refresh
2323
var gVar = 5;
2424

25-
alert(window.gVar); // 5 (became a property of the global object)
25+
alert(window.gVar); // 5 (wurde Eigentum des globalen Objekts)
2626
```
2727

28-
Please don't rely on that! This behavior exists for compatibility reasons. Modern scripts use [JavaScript modules](info:modules) where such thing doesn't happen.
28+
Bitte nicht darauf verlassen! Dieses Verhalten existiert aus Kompatibilitätsgründen. Moderne Skripte verwenden [JavaScript-Module](info:modules), wo so etwas nicht passiert.
2929

30-
If we used `let` instead, such thing wouldn't happen:
30+
Wenn wir stattdessen `let` verwenden, würde so etwas nicht passieren:
3131

3232
```js run untrusted refresh
3333
let gLet = 5;
3434

35-
alert(window.gLet); // undefined (doesn't become a property of the global object)
35+
alert(window.gLet); // undefined (wird nicht Eigentum des globalen Objekts)
3636
```
3737

38-
If a value is so important that you'd like to make it available globally, write it directly as a property:
38+
Wenn ein Wert so wichtig ist, dass du ihn global verfügbar machen möchtest, schreibe ihn direkt als Eigenschaft:
3939

4040
```js run
4141
*!*
42-
// make current user information global, to let all scripts access it
42+
// aktuelle Benutzerinformationen global machen, damit alle Skripte darauf zugreifen können
4343
window.currentUser = {
4444
name: "John"
4545
};
4646
*/!*
4747

48-
// somewhere else in code
48+
// woanders im Code
4949
alert(currentUser.name); // John
5050

51-
// or, if we have a local variable with the name "currentUser"
52-
// get it from window explicitly (safe!)
51+
// oder, wenn wir eine lokale Variable mit dem Namen "currentUser" haben
52+
// Holen Sie es explizit aus dem Fenster (sicher!)
5353
alert(window.currentUser.name); // John
5454
```
5555

56-
That said, using global variables is generally discouraged. There should be as few global variables as possible. The code design where a function gets "input" variables and produces certain "outcome" is clearer, less prone to errors and easier to test than if it uses outer or global variables.
56+
Von der Verwendung globaler Variablen wird jedoch im Allgemeinen abgeraten. Es sollten möglichst wenige globale Variablen vorhanden sein. Der Codeentwurf, bei dem eine Funktion "Eingabe"-Variablen erhält und bestimmte "Ergebnisse" erzeugt, ist klarer, weniger fehleranfällig und einfacher zu testen, als wenn du äußere oder globale Variablen verwendest.
5757

58-
## Using for polyfills
58+
## Verwendung für Polyfills
5959

60-
We use the global object to test for support of modern language features.
60+
Wir verwenden das globale Objekt, um die Unterstützung moderner Sprachfunktionen zu testen.
6161

62-
For instance, test if a built-in `Promise` object exists (it doesn't in really old browsers):
62+
Testen Sie zum Beispiel, ob ein eingebautes `Promise`-Objekt existiert (in wirklich alten Browsern nicht):
6363
```js run
6464
if (!window.Promise) {
65-
alert("Your browser is really old!");
65+
alert("Dein Browser ist wirklich alt!");
6666
}
6767
```
6868

69-
If there's none (say, we're in an old browser), we can create "polyfills": add functions that are not supported by the environment, but exist in the modern standard.
69+
Wenn es keine gibt (sagen wir, wir befinden uns in einem alten Browser), können wir "Polyfills" erstellen: Funktionen hinzufügen, die von der Umgebung nicht unterstützt werden, aber im modernen Standard vorhanden sind.
7070

7171
```js run
7272
if (!window.Promise) {
73-
window.Promise = ... // custom implementation of the modern language feature
73+
window.Promise = ... // benutzerdefinierte Implementierung der modernen Sprachfunktion
7474
}
7575
```
7676

77-
## Summary
77+
## Zusammenfassung
7878

79-
- The global object holds variables that should be available everywhere.
79+
- Das globale Objekt enthält Variablen, die überall verfügbar sein sollten.
8080

81-
That includes JavaScript built-ins, such as `Array` and environment-specific values, such as `window.innerHeight` -- the window height in the browser.
82-
- The global object has a universal name `globalThis`.
81+
Dazu gehören JavaScript-Einbauten wie "Array" und umgebungsspezifische Werte wie `window.innerHeight` -- die Fensterhöhe im Browser.
82+
- Das globale Objekt hat einen universellen Namen `globalThis`.
8383

84-
...But more often is referred by "old-school" environment-specific names, such as `window` (browser) and `global` (Node.js). As `globalThis` is a recent proposal, it's not supported in non-Chromium Edge (but can be polyfilled).
85-
- We should store values in the global object only if they're truly global for our project. And keep their number at minimum.
86-
- In-browser, unless we're using [modules](info:modules), global functions and variables declared with `var` become a property of the global object.
87-
- To make our code future-proof and easier to understand, we should access properties of the global object directly, as `window.x`.
84+
...Aber häufiger wird mit umgebungsspezifischen Namen der "alten Schule" wie `window` (Browser) und `global` (Node.js) bezeichnet. Da `globalThis` ein neuer Vorschlag ist, wird es in Nicht-Chromium Edge nicht unterstützt (kann aber mit Polyfills umgangen werden).
85+
- Wir sollten Werte im globalen Objekt nur speichern, wenn sie wirklich global für unser Projekt sind. Und halten Sie ihre Anzahl auf ein Minimum.
86+
- Im Browser werden globale Funktionen und Variablen, die mit `var` deklariert sind, zu einer Eigenschaft des globalen Objekts, es sei denn, wir verwenden [modules](info:modules).
87+
- Um unseren Code zukunftssicher und verständlicher zu machen, sollten wir direkt auf die Eigenschaften des globalen Objekts zugreifen, als `window.x`.

0 commit comments

Comments
 (0)