Heute, im siebten Teil der Übersetzung des JavaScript-Handbuchs, werden wir über die Codeausführung im strengen Modus, über die Funktionen dieses Schlüsselworts, über Ereignisse, über Module und über mathematische Berechnungen sprechen. Hier werden wir die Themen der Arbeit mit Timern und der asynchronen Programmierung behandeln.
→
Teil 1: Erstes Programm, Sprachfunktionen, Standards→
Teil 2: Codestil und Programmstruktur→
Teil 3: Variablen, Datentypen, Ausdrücke, Objekte→
Teil 4: Funktionen→
Teil 5: Arrays und Loops→
Teil 6: Ausnahmen, Semikolons, Platzhalterliterale→
Teil 7: Strict Mode, dieses Schlüsselwort, Ereignisse, Module, mathematische Berechnungen→
Teil 8: Übersicht über die ES6-Funktionen→
Teil 9: Übersicht über die ES7-, ES8- und ES9-Standards
Strenger Modus
Der strikte Modus wurde im ES5-Standard angezeigt. In diesem Modus, der Semantik des Sprachwechsels, soll das Verhalten von JavaScript verbessert werden, was dazu führt, dass sich der Code in diesem Modus anders als normal verhält. In der Tat sprechen wir über die Tatsache, dass in diesem Modus die Mängel, Mehrdeutigkeiten der Sprache und veralteten Funktionen, die aus Kompatibilitätsgründen darin gespeichert sind, beseitigt werden.
▍ Aktivieren des strengen Modus
Um den strengen Modus in einigen Codes verwenden zu können, muss er explizit aktiviert sein. Das heißt, wir sprechen nicht über die Tatsache, dass dieser Modus standardmäßig verwendet wird. Ein solcher Ansatz würde die Arbeit zahlreicher bestehender Programme stören, die auf den seit 1996 von Anfang an vorhandenen Sprachmechanismen beruhen. Tatsächlich zielen erhebliche Anstrengungen derjenigen, die JavaScript-Standards entwickeln, speziell auf die Gewährleistung der Kompatibilität ab, sodass Code, der auf alten Versionen von Standards basiert, auf den heutigen JS-Engines ausgeführt werden kann. Dieser Ansatz kann als einer der Schlüssel zum Erfolg von JavaScript als Sprache für die Webentwicklung angesehen werden.
Um den strengen Modus zu aktivieren, wird eine spezielle Anweisung verwendet, die so aussieht.
'use strict'
Die Direktive in Form von
"use strict" und dieselbe Direktive, nach der ein Semikolon (
'use strict'; und
"use strict"; ) zum gleichen Effekt führt. Diese Anweisung (einfach so - zusammen mit Anführungszeichen), damit der gesamte Code in einer bestimmten Datei im strengen Modus ausgeführt wird, wird am Anfang dieser Datei platziert.
'use strict' const name = 'Flavio' const hello = () => 'hey'
Der strikte Modus kann auf der Ebene einer separaten Funktion aktiviert werden. Dazu muss die entsprechende Anweisung am Anfang des Funktionskörpercodes stehen.
function hello() { 'use strict' return 'hey' }
Dies kann sich als nützlich erweisen, wenn der strikte Modus in der vorhandenen Codebasis verwendet werden muss und gleichzeitig das Aktivieren auf Dateiebene nicht praktikabel ist, da nicht genügend Zeit für gründliche Tests des Codes für diese gesamte Datei vorhanden ist.
Es ist zu beachten, dass Sie den strikten Modus während der Programmausführung nicht ausschalten können, wenn er aktiviert ist.
Betrachten Sie einige Funktionen des strengen Modus.
▍ Bekämpfung der zufälligen Initialisierung globaler Variablen
Wir haben bereits gesagt, dass, wenn Sie einer nicht deklarierten Variablen versehentlich einen bestimmten Wert zuweisen, selbst wenn Sie dies im Funktionscode tun, eine solche Variable standardmäßig global gemacht wird (zum globalen Objekt gehörend). Dies kann zu Überraschungen führen.
Der folgende Code erstellt beispielsweise eine solche Variable.
;(function() { variable = 'hey' })()
Die
variable wird nach der Ausführung von IIFE im globalen Bereich verfügbar sein.
Wenn der strikte Modus auf der Ebene dieser Funktion aktiviert ist, verursacht derselbe Code einen Fehler.
;(function() { 'use strict' variable = 'hey' })()
▍ Fehler, die bei Zuweisungsvorgängen auftreten
JavaScript meldet im normalen Modus keine Fehler, die während der Zuweisungsvorgänge auftreten.
In JS gibt es beispielsweise einen
undefinierten Wert, der einer der primitiven Werte der Sprache ist und durch die Eigenschaft eines
undefined globalen Objekts dargestellt wird. In regulären JS ist ein solcher Befehl durchaus möglich.
undefined = 1
Es sieht so aus, als würde eine Einheit in eine bestimmte Variable mit dem Namen
undefined , aber tatsächlich handelt es sich um einen Versuch, einen neuen Wert in eine Eigenschaft eines globalen Objekts zu schreiben, die übrigens gemäß dem Standard nicht überschrieben werden kann. Im normalen Modus führt ein solcher Befehl zwar zu nichts, führt jedoch zu nichts. Das heißt, der
undefined Wert wird nicht geändert und es wird keine Fehlermeldung angezeigt. Im strengen Modus führt dies zu einem Fehler. Versuchen Sie den folgenden Code in einem Browser oder in Node.js, um diese Fehlermeldung anzuzeigen und gleichzeitig sicherzustellen, dass der
undefined Wert im normalen Modus nicht überschrieben wird.
undefined = 1 console.log('This is '+undefined) ;(() => { 'use strict' undefined = 1 })()
Das gleiche Verhalten des Systems ist auch charakteristisch, wenn mit Entitäten wie
Infinity und
NaN sowie mit anderen ähnlichen Entitäten gearbeitet wird. Im strengen Modus können Sie all dies vermeiden.
In JavaScript können Sie Eigenschaften von Objekten mithilfe der
Object.defineProperty () -Methode
festlegen . Mit dieser Methode können Sie insbesondere Eigenschaften festlegen, die nicht geändert werden können.
const car = {} Object.defineProperty(car, 'color', { value: 'blue', writable: false }) console.log(car.color) car.color = 'yellow' console.log(car.color)
Beachten Sie das Attribut
writable: false , das beim Festlegen der
color .
Der obige Code, der im normalen Modus ausgeführt wird, führt weder zu einer Änderung der Eigenschaft des Farbobjekts noch zur Ausgabe eines Fehlers. Ein Versuch, diese Eigenschaft im strengen Modus zu ändern, führt zu einem Fehler.
;(() => { 'use strict' car.color = 'red' })()
Gleiches gilt für Getter. Dieser Code wird ausgeführt, jedoch ohne Erfolg.
const car = { get color() { return 'blue' } } console.log(car.color) car.color = 'red' console.log(car.color)
Ein Versuch, dasselbe im strengen Modus zu tun, führt zu einem Fehler, der einen Versuch meldet, die Eigenschaft eines Objekts festzulegen, das nur einen Getter enthält.
;(() => { 'use strict' car.color = 'yellow' } )()
JavaScript verfügt über eine
Object.preventExtensions () -Methode, die ein Objekt nicht erweiterbar macht,
dh zu einem Objekt, zu dem keine neuen Eigenschaften hinzugefügt werden können. Wenn Sie mit solchen Objekten im üblichen Modus arbeiten, zeigen sich dieselben Merkmale der Sprache, die wir oben untersucht haben.
const car = { color: 'blue' } Object.preventExtensions(car) console.log(car.model) car.model = 'Fiesta' console.log(car.model)
Hier führen beide Versuche, eine Eigenschaft des Modellobjekts abzuleiten, dazu, dass der
undefined Wert in der Konsole angezeigt wird. Es gab keine solche Eigenschaft im Objekt, ein Versuch, sie zu erstellen, nachdem das Objekt nicht erweiterbar gemacht wurde, führte zu nichts. Die gleiche Aktion im strengen Modus führt zu einer Fehlermeldung.
;(() => { 'use strict' car.owner = 'Flavio' } )()
In derselben Kategorie von Aktionen, die zu keinen vom Programmierer erwarteten Änderungen führen, aber auch keine Fehler verursachen, fallen Operationen, in deren Verlauf versucht wird, primitiven Werten bestimmte Eigenschaften zuzuweisen. Beispielsweise verursacht ein solcher Code im normalen Modus keinen Fehler, führt jedoch zu keinen Ergebnissen.
let one = 1 one.prop = 2 console.log(one.prop)
Dasselbe im strengen Modus führt zu einer Fehlermeldung, die angibt, dass die Eigenschaft
prop nicht für die Nummer
1 . In ähnlicher Weise verhält sich das System bei der Arbeit mit anderen primitiven Datentypen.
▍ Fehler beim Löschen von Entitäten
Wenn Sie im normalen Modus versuchen, eine Objekteigenschaft, die nicht gelöscht werden kann, mit dem
Löschoperator zu löschen, gibt
delete einfach
false und alles schlägt stillschweigend fehl.
delete Object.prototype
Im strengen Modus wird hier ein Fehler generiert.
▍ Funktionsargumente mit demselben Namen
Funktionen können gleichnamige Parameter haben, dies verursacht jedoch keine Fehler (obwohl dies wie ein Fehler desjenigen aussieht, der eine solche Funktion erstellt hat).
;(function(a, a, b) { console.log(a, b) })(1, 2, 3)
Dieser Code zeigt normalerweise
2 3 in der Konsole an. Im strengen Modus führt dies zu einem Fehler.
Übrigens, wenn während der Deklaration der Pfeilfunktion ihre Parameter den gleichen Namen haben, führt dies im normalen Modus zur Ausgabe einer Fehlermeldung.
▍ Oktalwerte
In normalem JavaScript können Sie Oktalwerte verwenden, indem Sie am Anfang
0 hinzufügen.
;(() => { console.log(010) })()
Hier wird die Dezimaldarstellung der Oktalzahl
10 , d. H.
8 in die Konsole gelangen. Diese
0 vor der Zahl kann zufällig gesetzt werden. Im strengen Modus können Sie nicht mit in diesem Format angegebenen Oktalzahlen arbeiten. Wenn Sie jedoch den strengen Modus verwenden und mit Oktalzahlen arbeiten müssen, können Sie diese im
0oXX Format schreiben. Der folgende Code gibt auch
8 .
;(() => { 'use strict' console.log(0o10) })()
▍Bediener mit
Die
with- Anweisung, die zu Verwirrung führen kann, ist im strengen Modus nicht zulässig.
Das Ändern des Verhaltens von Code im strengen Modus ist nicht auf die oben beschriebenen beschränkt. Insbesondere in diesem Modus verhält sich das Schlüsselwort this anders, was uns bereits begegnet ist und worüber wir jetzt ausführlicher sprechen werden.
Dieses Keyword bietet Funktionen
Mit
this oder dem Ausführungskontext können Sie die Umgebung beschreiben, in der der JS-Code ausgeführt wird. Ihre Bedeutung hängt vom Verwendungsort und davon ab, ob der strikte Modus aktiviert ist oder nicht.
▍ Keyword dies im strengen Modus
Im strengen Modus wird
this an die Funktion übergebene Wert nicht in das Objekt umgewandelt. Diese Konvertierung erfordert nicht nur Ressourcen, sondern ermöglicht den Funktionen auch den Zugriff auf das globale Objekt, wenn sie mit
this Einstellung auf
undefined oder
null aufgerufen werden. Dieses Verhalten bedeutet, dass die Funktion möglicherweise nicht autorisierten Zugriff auf das globale Objekt erhält. Im strengen Modus wird die an die Funktion übergebene Konvertierung nicht durchgeführt. Um den Unterschied zwischen dem Verhalten in Funktionen in verschiedenen Modi zu erkennen, versuchen Sie diesen Code mit der Direktive
'use strict' und ohne ihn.
;(function() { console.log(this) })()
▍Das Schlüsselwort this in Objektmethoden
Eine Methode ist eine Funktion, auf die in einer Objekteigenschaft verwiesen wird. Das
this in einer solchen Funktion bezieht sich auf dieses Objekt. Diese Aussage kann durch das folgende Beispiel veranschaulicht werden.
const car = { maker: 'Ford', model: 'Fiesta', drive() { console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive()
In diesem Fall verwenden wir die übliche Funktion (und nicht die Pfeilfunktion - dies ist wichtig), das verwendete Schlüsselwort this, das automatisch an das Objekt gebunden wird, das diese Funktion enthält.
Beachten Sie, dass die obige Methode zum Deklarieren einer Objektmethode der folgenden ähnelt:
const car = { maker: 'Ford', model: 'Fiesta', drive: function() { console.log(`Driving a ${this.maker} ${this.model} car!`) } }
Das gleiche Verhalten
this in einer Objektmethode kann auch mit der folgenden Konstruktion beobachtet werden.
const car = { maker: 'Ford', model: 'Fiesta' } car.drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) } car.drive()
▍ Schlüsselwort this und Pfeilfunktionen
Versuchen wir, das obige Beispiel mit einer Pfeilfunktion als Objektmethode neu zu schreiben.
const car = { maker: 'Ford', model: 'Fiesta', drive: () => { console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive()
Wie Sie sehen können, werden hier anstelle der Namen des Automobilherstellers und seines Modells
undefined Werte angezeigt. Tatsache ist, dass
this Funktion in der Pfeilfunktion, wie bereits erwähnt, einen Link zu dem Kontext enthält, der die Funktion enthält.
Dieser Pfeil kann nicht an eine Pfeilfunktion gebunden werden, aber Sie können
»Das binden
JavaScript hat ein Konzept wie
this Bindung. Sie können dies auf viele Arten tun. Wenn Sie beispielsweise eine Funktion deklarieren, können Sie das Schlüsselwort this mit der Methode
bind() an ein Objekt
bind() .
const car = { maker: 'Ford', model: 'Fiesta' } const drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) }.bind(car) drive()
Mit derselben Methode können Sie ein anderes Objekt an die Methode eines Objekts binden.
const car = { maker: 'Ford', model: 'Fiesta', drive() { console.log(`Driving a ${this.maker} ${this.model} car!`) } } const anotherCar = { maker: 'Audi', model: 'A4' } car.drive.bind(anotherCar)()
Diese Bindung kann auch in der Phase des Aufrufs der Funktion mit den Methoden
call() und
apply() werden.
const car = { maker: 'Ford', model: 'Fiesta' } const drive = function(kmh) { console.log(`Driving a ${this.maker} ${this.model} car at ${kmh} km/h!`) } drive.call(car, 100)
this an das gebunden, was als erstes Argument an diese Methoden übergeben wird. Der Unterschied zwischen diesen Methoden besteht darin, dass
apply() als zweites Argument ein Array mit den an die Funktion übergebenen Argumenten verwendet und
call() eine Liste von Argumenten verwendet.
▍Über diese Bindung in Browser-Ereignishandlern
In den Eventback-Rückrufen verweist dies auf das HTML-Element, mit dem das Ereignis aufgetreten ist. Um an einen Rückruf zu binden, können Sie die Methode
bind() verwenden. Hier ist ein Beispiel, um dies zu veranschaulichen.
<!DOCTYPE html> <html> <body> <button id="el">Element (this)</button> <button id="win">Window (this</button> <script> const el = document.getElementById("el") el.addEventListener('click', function () { alert(this) </script> </body> </html>
Ereignisse
JavaScript im Browser verwendet ein ereignisgesteuertes Programmiermodell. Diese oder andere Aktionen werden vom Code als Reaktion auf Ereignisse ausgeführt. In diesem Abschnitt werden wir über Ereignisse und deren Behandlung sprechen.
Ein Ereignis kann beispielsweise das Beenden des Ladens des DOM, das Empfangen von Daten, die als Ergebnis einer asynchronen Anforderung ausgeführt wurden, das Klicken auf ein Seitenelement, das Scrollen einer Seite und das Eingeben eines bestimmten Zeichens über die Tastatur sein. Tatsächlich gibt es viele Ereignisse, bei denen der JS-Code der Seite bei der Verarbeitung eine Vielzahl von Problemen bei der Interaktion der Anwendung mit Benutzern, mit den Elementen der Seite und mit der Umgebung, in der der Code funktioniert, lösen kann.
▍Event-Handler
Sie können auf Ereignisse mit Ereignishandlern reagieren. Hierbei handelt es sich um Funktionen, die beim Auftreten der Ereignisse aufgerufen werden.
Um dasselbe Ereignis zu verarbeiten, können Sie bei Bedarf mehrere Handler registrieren, die aufgerufen werden, wenn dieses Ereignis auftritt. Ereignishandler können auf verschiedene Arten registriert werden. Betrachten Sie drei solche Methoden.
▍ Integrierte Ereignishandler
Heutzutage werden integrierte Ereignishandler aufgrund ihrer Einschränkungen selten verwendet. Zuvor wurden sie viel häufiger verwendet. Um einen solchen Ereignishandler festzulegen, wird sein Code als spezielles Attribut zum HTML-Markup des Elements hinzugefügt. Im folgenden Beispiel wird ein solcher einfacher Handler für das Ereignis
onclick , das beim
onclick auf eine Schaltfläche auftritt, einer Schaltfläche mit der Bezeichnung Schaltfläche
Button 1 zugewiesen.
<!DOCTYPE html> <html> <body> <button onclick="alert('Button 1!')">Button 1</button> <button onclick="doSomething()">Button 2</button> <script> function doSomething(){ const str = 'Button 2!' console.log(str) alert(str) } </script> </body> </html>
Der HTML-Code für
Button 2 verwendet einen ähnlichen Ansatz, zeigt jedoch eine Funktion an, deren Code als Reaktion auf einen Button-Klick ausgeführt wird. Dieser Code gibt die angegebene Zeichenfolge an die Konsole aus und zeigt ein Fenster mit demselben Text an.
▍ Zuweisen eines Handlers zu einer HTML-Elementeigenschaft
Diese Methode zum Zuweisen von Ereignishandlern eignet sich für Fälle, in denen ein bestimmtes Ereignis eines Elements nur einen Handler haben sollte. Es besteht darin, die Funktion der entsprechenden Eigenschaft des Elements zuzuweisen.
Das
window verfügt beispielsweise über ein
onload , das nach dem Laden des HTML-Codes der Seite und aller zusätzlichen Ressourcen, z. B. Stile und Bilder, aufgerufen wird. Wenn Sie diesem Ereignis einen Handler zuweisen, können Sie beim Aufrufen sicher sein, dass der Browser den gesamten Inhalt der Seite geladen hat, mit dem Sie jetzt programmgesteuert arbeiten können, ohne befürchten zu müssen, dass einige Elemente der Seite noch nicht geladen wurden.
window.onload = () => { alert('Hi!')
Dieser Ansatz wird häufig bei der Verarbeitung von XHR-Anforderungen verwendet. Während des Einrichtens einer Anforderung können Sie einen Handler für das Ereignis
onreadystatechange angeben, der aufgerufen wird, wenn sich der
readyState Eigenschaft
readyState ändert. Hier ist ein Beispiel für die Verwendung dieses Ansatzes zum Laden von JSON-Daten von einer öffentlichen API.
<!DOCTYPE html> <html> <body> <button onclick="loadData()">Start</button> <script> function loadData (){ const xhr = new XMLHttpRequest() const method = 'GET' const url = 'https://jsonplaceholder.typicode.com/todos/1' xhr.open(method, url, true) xhr.onreadystatechange = function () { if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText) } } xhr.send() } </script> </body> </html>
Sie können dies tun, um zu überprüfen, ob einem Ereignis ein Handler zugewiesen ist.
if (window.onload){}
▍Verwendung der Methode addEventListener ()
Die bereits gesehene Methode
addEventListener() ist ein moderner Mechanismus zum Zuweisen von Ereignishandlern. Sie können mehrere Handler für ein einzelnes Ereignis registrieren.
window.addEventListener('load', () => {
Beachten Sie, dass der IE8-Browser (und seine älteren Versionen) die Methode
addEventListener() nicht unterstützt. Es verwendet eine ähnliche
attachEvent() -Methode. Dies sollte berücksichtigt werden, wenn Ihr Programm veraltete Browser unterstützen soll.
▍Über das Zuweisen von Ereignishandlern zu verschiedenen Elementen
Sie können Ereignishandler mit dem
window , um „globale“ Ereignisse zu verarbeiten, z. B. das Drücken von Tasten auf der Tastatur. Gleichzeitig werden Ereignishandler einzelnen HTML-Elementen zugewiesen, die auf die Ereignisse mit diesen Elementen reagieren, indem sie beispielsweise mit der Maus darauf klicken. Daher wird die Methode
addEventListener() sowohl für das
window als auch für normale Elemente verwendet.
▍ Ereignisobjekt
Als ersten Parameter kann der Ereignishandler ein Ereignisobjekt -
Event - verwenden. Der Satz von Eigenschaften dieses Objekts hängt von dem Ereignis ab, das es beschreibt. Hier ist beispielsweise Code, der die Behandlung von Tastaturtastenereignissen unter Verwendung des
keydown eines
keydown demonstriert.
<!DOCTYPE html> <html> <body> <script> window.addEventListener('keydown', event => { </script> </body> </html>
Wie Sie hier sehen können, wird die Eigenschaft des
key verwendet, um Informationen über die gedrückte Taste auf der Konsole anzuzeigen. Hier wird auch die Eigenschaft
type verwendet, die den Ereignistyp angibt. In diesem Beispiel arbeiten wir tatsächlich mit einem
KeyboardEvent- Objekt, mit dem Ereignisse im Zusammenhang mit der Tastatur beschrieben werden. Dieses Objekt ist der Nachkomme des
Ereignisobjekts . Objekte, die für eine Vielzahl von Ereignissen ausgelegt sind, erweitern die Funktionen eines Standardereignisobjekts.
Im selben Beispiel wird das
MouseEvent- Objekt zum Verarbeiten von Mausereignissen verwendet. Im
mousedown Ereignishandler drucken wir den Ereignistyp, die Schaltflächennummer (
button ) und die Koordinaten des Zeigers zum Zeitpunkt des Klicks (
clientX und
clientY ) an die
clientY .
Das
DragEvent- Objekt
wird verwendet, um Ereignisse zu behandeln, die beim Ziehen von Seitenelementen auftreten.
Unter den Eigenschaften des
Event , die in anderen Ereignisobjekten verfügbar sind, können wir die bereits erwähnte Typeneigenschaft und die
target erwähnen, die auf das DOM-Element verweisen, bei dem das Ereignis aufgetreten ist. Ein
Event verfügt über Methoden. Mit der Methode
createEvent() können Sie beispielsweise neue Ereignisse erstellen.
▍ Ereignisoberfläche
Betrachten Sie das folgende Beispiel.
<!DOCTYPE html> <html> <head> <style> #container { height: 100px; width: 200px; background-color: blue; } #child { height: 50px; width: 100px; background-color: green; } </style> </head> <body> <div id="container"> <div id="child"> </div> </div> <script> const contDiv = document.getElementById('container') contDiv.addEventListener('click', event => { console.log('container') }) const chDiv = document.getElementById('child') chDiv.addEventListener('click', event => { console.log('child') }) window.addEventListener('click', event => { console.log('window') }) </script> </body> </html>
Wenn Sie die Seite mit diesem Code im Browser öffnen, öffnen Sie die Konsole und klicken Sie mit der Maus zuerst in den freien Bereich der Seite, dann in das blaue Rechteck und dann in grün. Folgendes wird in die Konsole gelangen:
window container window child container window
Ereignis sprudeltWas hier beobachtet werden kann, wird als Ereignisblasen bezeichnet. Das Ereignis, das am untergeordneten Element auftritt, erstreckt sich nämlich auf das übergeordnete Element. Dieser Vorgang wird fortgesetzt, bis das Ereignis das oberste Element erreicht. Wenn für die Elemente, an denen das Popup-Ereignis übergeben wird, entsprechende Handler definiert sind, werden sie gemäß der Reihenfolge der Ereignisverteilung aufgerufen.
Das
stopPropagation() Ereignissen kann mit der Methode
stopPropagation() des
stopPropagation() gestoppt werden. Wenn es beispielsweise erforderlich ist, dass sich das entsprechende Ereignis nach dem Klicken auf das
child Element nicht weiter ausbreitet, müssen wir den Code, in dem wir ihm den
click Ereignishandler zuweisen, wie folgt neu schreiben.
chDiv.addEventListener('click', event => { console.log('child') event.stopPropagation() })
, , — , —
container , —
child , .
window container window child
▍
, .
load
load window . , , HTML-
body .
click .
dblclick — .
click dblclick ,
click , —
dblclick .
mousedown ,
mousemove ,
mouseup , . ,
mousemove , , , . , - , . .
keydown . , . —
keyup .
scroll
scroll window . , , ,
window.scrollY .
, ,
mousemove , .
mousemove scroll . - . . «» (throttling),
Lodash . , , , , . .
let cached = null window.addEventListener('mousemove', event => { if (!cached) { setTimeout(() => {
,
mousemove , 100 .
ES-
ES6 , ES-. , , -, , Node.js, .
, . , , . , , .
Node.js CommonJS. , ES-, , . , , ES-, , , , . ,
caniuse.com , 2018 ES- 80%.
ES-
Node.js.
▍ ES-
Node.js ES- .
import package from 'module-name'
CommonJS- .
const package = require('module-name')
, JavaScript-, - . Dies erfolgt mit dem Schlüsselwort
export . , , , ,
uppercase.js . .
export default str => str.toUpperCase()
, . .
( , ) .
HTML- ,
<script> type="module" .
<script type="module" src="index.js"></script>
,
(defer) . , ,
uppercase.js , , , . -. , -. , VSCode, Live Server ( — ritwickdey.liveserver).
<!DOCTYPE html> <html> <head> </head> <body> <script type="module"> import toUpperCase from './uppercase.js' console.log(toUpperCase('hello')) </script> </body> </html>
HELLO .
URL.
import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'
, ,
./ / .
▍
, .
export default str => str.toUpperCase()
.
const a = 1 const b = 2 const c = 3 export { a, b, c }
module.js , , , .
<html> <head> </head> <body> <script type="module"> import * as m from './module.js' console.log(ma, mb, mc) </script> </body> </html>
1 2 3 .
, , .
import { a } from './module.js' import { a, b } from './module.js'
, , .
console.log(a)
:
import { a, b as two } from './module.js'
, , , , .
module.js .
const a = 1 const b = 2 const c = 3 export { a, b, c } export default () => console.log('hi')
.
import sayHi, { a } from './module.js' console.log(a) sayHi()
.
▍CORS
CORS . , CORS, (
Access-Control-Allow-Origin: * ).
▍ nomodule
, , ,
script ,
nomodule . , , .
<script type="module" src="module.js"></script> <script nomodule src="fallback.js"></script>
▍ ES6 WebPack
ES6 — , , ECMAScript. , , , , . ,
WebPack, , , .
▍ CommonJS
, Node.js CommonJS. , . CommonJS npm.
CommonJS-, , . ,
up-node.js .
exports.uppercase = str => str.toUpperCase()
, .
const up = require('./up-node.js') console.log(up.uppercase('hello'))
HELLO .
, npm, , .
const package = require('module-name')
CommonJS , . .
CommonJS- .
exports.a = 1 exports.b = 2 exports.c = 3
, .
const { a, b, c } = require('./up-node.js')
, JavaScript — .
Math , . , , JS- .
▍
(+)
+ . :
const three = 1 + 2
, , , .
'three' + 1
(-)
const two = 4 - 2
(/)
.
20 / 5
0, .
Infinity ( ) -
Infinity ( ).
1 / 0
(%)
% , .
20 % 5
0
NaN (Not a Number — ).
1 % 0
(*)
1 * 2
(**)
, .
1 ** 2
▍
(++)
++ 1 . .
—
1 , .
let x = 0 ++x
— , .
let x = 0 x++
(--)
-- ++ ,
1 , .
let x = 0 x--
(-)
.
let x = 2 -x
(+)
, , . — .
let x = 2 +x
▍
JavaScript, (
= ), , . , ,
+= .
let x = 2 x += 3 x
: « , , , , ». , .
let x = 2 x = x + 3 x
:
▍
. , .
const a = 1 * 2 + 5 / 2 % 2
2.5 . , . , .
- + ++ -- — ,/ % — , ,+ - —= += -= *= /= %= **= —
, , . , .
const a = 1 * 2 + 5 / 2 % 2 const a = 2 + 2.5 % 2 const a = 2 + 0.5 const a = 2.5
. .
const a = 1 * (2 + 5) / 2 % 2
1.5 .
▍ Math
Math , .
. , .
, ,
Math.E — , e,
Math.PI — , π.
Math.E
.
Math.abs() —Math.ceil() — , ,Math.cos() — ,Math.floor() — , ,Math.max() —Math.min() —Math.random() — [0, 1) ( 1)Math.round() —Math.sqrt() —
▍
JavaScript , .
, . , , , .
.
< — «»> — «».<= — « ».>= — « ».
, .
1 === true
, ,
1 true .
1 true ,
1 true .
, , . Node.js. , :
PDF- Node.js.
Zusammenfassung
, this, , , . , ES6.
Liebe Leser! , JavaScript?
