JavaScript/ES-Module verstehen

1. Einführung: Hallo und willkommen zu meinem Kurs ES6 Module, wie man sie benutzt und wie man sie erstellt. Es6-Module sind der neue Standard zum Laden von Modulen in JavaScript , der in allen modernen Browsern unterstützt wird. Es hat eine neue Syntax und zusätzliche Schlüsselwörter für den Import und Export. Fast alle modernen Browser können es verwenden. Sie haben integrierte Modullader und auch kein Jazz in seiner neuesten Version unterstützt es. Dann unterstützt es jeder moderne Transpiler und Bundler und auch TypeScript. Neue Projekte verwenden das neue Modulsystem, und immer mehr der bestehenden Projekte werden aktualisiert, um es zu unterstützen. Und es hilft auch beim Schütteln von Bäumen und bei der Minimierung der Bündelgrößen. Wenn Sie also ES6-Module verwenden, sind Sie auf dem richtigen Weg, um moderne und wartbare Web-Apps zu entwickeln . In diesem Kurs lernen Sie, wie Sie die Export- und Import-Anweisungen verwenden und wie Sie Module in Ihre HTML-Seite integrieren , wie Sie dynamische Importe verwenden und wie Sie die Syntax verwenden. Ich hoffe euch gefällt der Kurs und wir sehen uns im ersten Video. 2. Import und Export: Hallo und willkommen zu diesem Video. In diesem Video werde ich erklären, wie man ES6-Module verwendet, wie man sie eingibt, wie man sie erstellt und wie man sie in Ihr HTML integriert. Lassen Sie uns zunächst kurz über meine Entwicklungsumgebung sprechen . Ich muss Videos als IDE neu codieren. kannst du auch benutzen. Es ist eine großartige Idee von Microsoft. Es ist kostenlos. Du kannst es für meine Mädchen herunterladen, für Windows, für Linux. Du kannst aber auch etwas anderes benutzen. Sie können Ihren bevorzugten Texteditor verwenden, was auch immer. Es ist nicht wirklich wichtig. Und ich benutze einen VGS als gehörlosen Server , der Code on the fly überträgt. Aber du musst es nicht benutzen. Du kannst alles andere gebrauchen. Sie können einen normalen Server verwenden, Sie können ein Webpack, einen Dev-Server verwenden , was immer Sie möchten. Also lass uns anfangen. Und jede Webseite und jede Rep-Anwendung beginnt in HTML, in diesem Fall index.html. Und hier ist es. Es ist ziemlich einfach. Es hat die Registerkarte Titel VII, weil ich create VT verwende , um ein Projekt zu erstellen. Also ich habe dieses div hier, das nur kleine Texte enthält. Das ist also egal. Aber hier haben wir das wichtige erste Tag. Es ist natürlich das Script-Tag, weil es ein Skript lädt. In diesem Fall ist es das Haupt-JS der Saucen, das hier drüben ist. Wir überprüfen es jetzt. Haupt-JS, im Moment ist es leer, aber ich werde dort etwas Code eingeben. Sie könnten also auch etwas Code hier in das script-Tag einfügen und dann die Quelle weglassen. Es ist auch möglich, dass Sie bereits wissen , dass es sich um ein normales Script-Tag handelt. Es funktioniert wie ein normales Script-Tag. Der einzige Unterschied ist, dass Sie hier ein Typmodul haben. Und das ist wichtig , wenn Sie Schlüsselwörter verwenden möchten , Aussagen wie Import und Export. Im Skript müssen Sie hier type module verwenden. Es gibt auch eine andere Möglichkeit. Machen Sie dynamische Importe. Sie können die Importfunktion verwenden und Module importieren, ES6-Module damit. Die Standardmethode, um sie statisch zu referenzieren, ist jedoch sie statisch zu referenzieren, ist das Script-Tag- und Typmodul. Also das ist die wichtige Sache, tippe module. Und Sie können Ihren Code hier hineinschreiben, oder Sie können das Quellattribut verwenden und auf Ihr JavaScript zeigen. Also schauen wir mal, ob das wirklich geladen ist. Also habe ich ein Jahr lang ein Protokoll geschrieben, nur Haupt-JS, und lass uns die Konsolenausgabe überprüfen. Okay, also hier haben wir es. Das funktioniert wirklich. Also ist unser Skript, unser Modul, geladen. Und im Moment ist nicht sichtbar, dass es sich um ein Modul handelt. Aber wir werden hier einige Module spezifischen Code einfügen. Im Moment haben wir dieses Protokoll, können wir es hier lassen. Aber was ist das Wichtigste in dem Modul? Es ist so, dass das Modul etwas exportieren kann oder Sie können etwas oder beides importieren. Natürlich mache ich hier den Import natürlich zuerst, weil der Export hier keinen Sinn ergibt. Weil ich das über das Script-Tag hier lade. Und ich kann hier keinen Export verwenden. Also müssen wir zuerst etwas Import verwenden. Also lege ich hier eine Importerklärung ab. Das ist die neue Sache. Dies ist die ES6-Modul-Import-Anweisung. Und so müssen wir jetzt etwas importieren. Und dann danach von und du kannst das als Import etwas lesen , das wir später aus der Datei angeben, die hier angegeben ist, was ich mod eins erstellt habe. Also ist es Mod One Dot js. Bitte nutzen Sie die Erweiterung hier. Ich könnte die Erweiterung hier auch weglassen, aber das liegt daran, dass ich VHS als tauben Server verwende und es auch die Module ohne Erweiterungen auflösen kann. Aber ich denke, es ist beste Vorgehensweise, die Erweiterung hier einzufügen. Es könnte also auch so etwas wie JSX sein oder Sie können auch CSS importieren, wenn Ihre Umgebung dies unterstützt wenn Ihre Umgebung dies unterstützt. Aber dafür brauchst du eine Art Bundler, oder in diesem Fall unterstützt der Jazz-Todesfall auch den CSS-Import. Aber normalerweise importierst du eine js dot js-Datei. Also importieren wir aus dieser Datei. Und hier müssen wir der JavaScript-Engine mitteilen, was importiert werden soll. Wir können verschiedene Dinge importieren. Wir können spezifische Exporte importieren, einzelne Exporte. Oder wir können einen Standard-, einen Standardexport importieren, oder wir können das komplette Modul importieren, was ich hier mit diesem Sternchen mache. Und dann muss ich ihnen eine Kennung geben. Ich kann mir das komplett ausdenken. Also benutze ich Mod One. Es ist nicht wirklich wichtig, was der Identifikator ist. Ich kann das Modul mit dieser Kennung referenzieren. Also kann ich hier Mod One Dot etwas schreiben. Im Moment ist es leer, also habe ich hier nichts. Also schreibe ich gerade Mod One. Aber das Wichtigste hier ist das Sternchen. Als mod bedeutet eins, dass ich das komplette Modul als Objekt importiere und es mod eins nenne. Das ist also meine Kennung für das Modul, das komplette Modul. Lass uns zum Mod One Modul gehen. Im Moment ist es komplett leer, also gibt es eigentlich nichts zu importieren, aber wir setzen hier etwas ein. Wir importieren etwas. Also muss ich etwas in diesem Modul exportieren. Und hier verwenden wir das Schlüsselwort export. Und nach dem Export müssen wir angeben, was wir exportieren möchten. Und ich exportiere hier eine Funktion. Und ich kann, ich kann nicht exportieren und anonyme Funktion, ich muss es hier benennen. Also nennen wir es, mach es, weil es einfach etwas macht, so etwas wie dieses Konsolenlog. Ich logge mich nur ein. Tu es. Okay, also hier exportieren wir diese Funktion in Haupt-JS. Ich kann das importieren und gebe das komplette Modul ein. Also sollte ich in der Lage sein, so etwas wie mod one dot zu machen, es zu tun und es hier zu nennen. Prüfen wir, ob es funktioniert. Hallo Module, das ist unser Div, spielt keine Rolle. Das Wichtigste ist hier in der Konsole. Lass es uns machen. Das haben wir, was wir uns einloggen, in der Export at Funktion dazu. Und dann haben wir Haupt-Js. Schauen wir uns den Code noch einmal an. Ja, also rufen wir die Exportfunktion auf, mach es. Und in dieser Funktion machen wir das Konsolenprotokoll. Und danach machen wir die Konsolenlog-Haupt-JS. Das hat also schon funktioniert. Also das ist in Ordnung. Exportieren wir die zweite Funktion. Also kopieren wir diesen und nennen ihn, mach es auch. Wir haben uns an die Konsole gebunden. Okay, also was wir hier tun sollten, was wir hier tun sollten, ist es zu tun. Mach es auch aus dem Mod One Modul. Und schlägt mir schon vor, es auch zu tun. Und mal sehen, ob es funktioniert. Tu es, tu es auch. Es funktioniert. Okay, also exportieren wir es in Funktionen hier. Exportfunktion, mach es. Exportfunktion ist aufgrund der Syntax einfach. Sie setzen hier einfach die export-Anweisung vor die Funktion. Und Sie können auch Variablen wie liger, const exportieren . Das ist eine Konstante. Ich exportiere das hier. Mod einen Punkt. Das ist eine Konstante. Und ich kann es einfach hier protokollieren. Und schauen wir mal, ob es funktioniert. Ja, es wird also nach hier ausgegeben. Also das funktioniert. Wir können Funktionen exportieren, wir können Variablen exportieren. Mal sehen, ob wir eine bestimmte Funktion oder einen bestimmten Export importieren können . Also hier haben wir auch die Syntax. Importiere das komplette Modul und referenziere es als diesen Bezeichner mod eins. Ich könnte Mod eins in Mod umbenennen, zum Beispiel kann ich es irgendwie ähnlich nennen. Aber jetzt, wenn ich einen bestimmten Export importieren möchte, muss ich eine andere Syntax verwenden. Die Syntax hier sind die geschweiften Klammern, die auch zum Strukturieren verwendet werden und die irgendwie ähnlich sind. Also setze ich hier diese geschweiften Klammern ein und ich erhalte die Exporte hier als Vorschläge für den Import. Also muss ich tun, und das ist eine Konstante wie die Exporte von diesem Mod One Dot JS-Modul. Lass uns importieren, mach es. Und wir kommentieren das im Moment. Und jetzt habe ich es importiert. Also muss ich das entfernen , weil ich es jetzt nur als Identifikator gemacht habe. Und ich kann do es als Funktion aufrufen, weil es hier in Mod One exportiert wird. Und ich importiere nur diese eine, exportiere, diese eine Funktion hier. Und es heißt genauso wie es hier exportiert wird, mach es. Und ich nenne es. Also lass uns sehen. Jetzt funktioniert es. Ich könnte das gleiche mit einer Schauspielerin machen, dass alle Kowtow auch die Const importieren könnten. Im Moment importiere ich jeden Export hier komplett separat. Ich könnte es zu einem Icon Console Log aufrufen. Das ist eine Konstante. Und wir sollten die gleiche Ausgabe wie zuvor haben. Es ist fällig 22. Soweit so gut. So können wir das komplette Modul importieren. Sie können einzelne Exporte importieren oder Sie können sie hier separat importieren, wie ich es hier getan habe. Was ist, wenn du es nennen willst? Nehmen wir an, Sie haben bereits eine Funktion , die dafür aufgerufen wird. Sie möchten den Namen nicht ändern weil Sie ihn hier verwenden möchten. Und dieser macht nur ein Konsolenprotokoll. Und wir geben Local aus. Tu es. Jetzt haben wir ein Problem, weil wir hier definieren, dass diese Funktion es tut, und es ist derselbe Bezeichner wie dieser Import. Aber wie können wir das importieren und in einen anderen Bezeichner umbenennen? Dies ist mit der gleichen Syntax möglich wie zuvor mit dem Stern. So wie es, sagen wir mal, importiert wird. Tu es. Mit dieser Syntax. Wir haben den Export in diesen importierten Bezeichner umbenannt, mach es. Mal sehen, ob wir diesen ändern können, um ihn zu importieren, tun Sie es und sehen, wie die Ausgabe aussieht. Also lass es uns tun. Mach es mit zwei und lokalen Typen. Das haben wir jetzt erwartet. Denn hier ist das natürlich diese Funktionsdeklaration. Das macht es und die Exportierten tun es aus diesem Modul. Wir haben es umbenannt, um es dort zu importieren. Und du könntest das gleiche Jahr machen, wenn du willst, es zu importieren. Also, wenn Sie bereits in Ihrem Modulbereich haben und identifizieren , was mit einem Export eines Moduls identisch ist . Sie können diese Syntax verwenden , um den Import umzubenennen. Prüfen wir, ob es noch funktioniert. Ja, es funktioniert. So importieren Sie Exporte getrennt. Und das ist wichtig, weil man natürlich auch alles mit immer mit einem Stern und wichtigen Komplettmodul importieren könnte alles mit immer mit einem Stern und wichtigen Komplettmodul importieren . Aber es ist ein Problem, weil Sie dem Bundler oder dem Programm, das Sie verwenden, nicht mitteilen , um Ihr JavaScript und Minified und solche Sachen zu bündeln. Sie sagen diesem System nicht was Sie tatsächlich von diesem Modul aus verwenden. Wenn du das tust und es einfach haben willst, nehmen wir an, du wolltest es einfach tun lassen. Also ich, ich kommentiere das aus. Wenn du es einfach haben willst, tu es genauso wichtig. Der Bündler, wenn er zum Beispiel verwendet, ist es so etwas wie drei Baumschütteln. Der Bundler weiß , dass Sie nur diese Funktion von diesem Modul aus verwenden . Wenn also theoretisch niemand anderes verwendet, keine anderen Modulbenutzer es auch tun, oder diese Konstante, könnte der Bundler diesen Code einfach löschen. Und so verkleinern Sie Ihre Bündelgröße. Dies ist der Vorteil dieser Syntax, hier importieren Sie nur einen einzigen Export. Sie sollten also diese Syntax bevorzugen. Sie können natürlich auch, wenn Sie das komplette modulare, fast alle Funktionen oder die Exporte im Modul verwenden , fast alle Funktionen oder die . Sie können diese Syntax natürlich verwenden. Also, aber wenn Sie, nehmen wir an, Sie haben so etwas wie Low Dash, das 3030 Exporte oder ähnliches enthält. Und du brauchst nur eine Funktion. Es wäre ratsam, diese eine Funktion einfach zu importieren. Weil Ihr Bundler dann alle anderen Funktionen löschen würde . Sie haben eine viel kleinere Bündelgröße. Also werde ich darauf zurückkommen. Jetzt. Lassen Sie uns direkt zu einer anderen Syntax oder einem anderen Importstil springen. Nennen wir es so. Was wir auch tun können, ist, dass wir einen Standardexport, Standard, Export und Standard nach dem Export definieren können . Und ich sage dem Modulsystem , dass dies mein Standardexport ist. Natürlich. Was kann ich hier tun, um den Standardexport zu importieren? Nehmen wir an, das ist meine Hauptfunktion hier. Das ist, sagen wir mal, 80% der Module, die Benutzer verwenden möchten. Oder es ist, vielleicht ist es auch die einzige Funktion. Lass uns, lass es uns so machen. Es ist die einzige Funktion, die der einzige Export ist. Sie können also sagen, dass die Exportstandardfunktion dies tut. Und was Sie hier tun können ist, dass Sie es einfach so schreiben können. Wir werden es ändern, um es zu tun. Und das lösche ich. Schauen wir im Browser nach, ob es funktioniert. Tu es. Es funktioniert. Wenn Sie also export default fahren, können Sie diese Standardeinstellung importieren. Auf diese Weise. Schreiben Sie einfach import, dann eine Identifizierung, ich könnte hier einen anderen Bezeichner verwenden , den ich importiert verwenden könnte. Tu es. Spielt keine Rolle, da diese Syntax für den Import des Standardexports gedacht ist . Also kann ich es benennen, wie ich will. Arbeitet immer noch. beim Export kein Name sein . Also könnte ich es irgendwie ähnlich nennen , weil ich es nicht spezifiziere. Ich muss nicht angeben, was ich importieren möchte, da diese Syntax für den Import der Standardeinstellung dient. Natürlich muss man im anderen Modul einen Standard haben. Also wenn ich das lösche, sollte es nicht mehr funktionieren, ich erhalte einen Syntaxfehler. Das angeforderte Modell bietet keinen Export mit dem Namen Standard. Okay? Funktioniert also nicht. Natürlich muss ich den Export als Standard markieren, um ihn als Standard zu importieren. Hier können Sie also einige angeben, die Sie identifizieren können, Sie möchten den Standardexport hier importieren. Und ich kann einen zweiten Export haben, der nicht standardmäßig ist. Natürlich können Sie nur einen einzigen Standard haben. Aber ich kann eine zweite haben. Das ist kein Problem. Also wie importiere ich das, natürlich kann ich. Recht, Anweisungen zu importieren. Der erste importiert den Standard und der zweite importiert. Mach es auch. Das ist durchaus möglich. Also nenne ich es hier, tu es auch. Und es sollte auch funktionieren. Ich glaube, ich habe das Konsolenprotokoll hier nicht geändert. Also mach es jetzt und tu es auch. Okay, so verwenden Sie den Import mit einem Standardexport. Sie können dies auch kombinieren. Die Syntax ist also auch möglich. Wenn Sie also explizit in diese geschweiften Klammern importieren möchten, in diesen geschweiften Klammern können Sie in diesen geschweiften Klammern auch explizit sagen, ich möchte Standard importieren, nenne es wichtig, es zu tun. Sie müssen natürlich einen Bezeichner angeben, da dies nicht funktioniert, da Sie hier einen Bezeichner benötigen. Also kannst du das tun. Sobald Sie also einen Standard vor die Funktion setzen, müssen Sie dies hier berücksichtigen und als Standard als und dann als Bezeichner importieren . Oder Sie können natürlich den viel kürzeren Ausdruck verwenden und ihn so importieren. Natürlich ist es jetzt doppelt. Also sollte ich das auskommentieren, oder ich lösche einfach das. Standard ist so wichtig dafür. Das ist also völlig in Ordnung. Lass es uns überprüfen. Okay, es funktioniert. Okay. So importieren Sie also, und so exportieren Sie. Und im nächsten Video werden wir über den dynamischen Import sprechen Ja, es ist nur eine Funktion, mit der Sie Module importieren können. Und Sie können damit beispielsweise das Laden eines Moduls verzögern. Das wird das nächste Video sein und ich hoffe, wir sehen uns dort. Tschüss. 3. Dynamischer Import: Hallo, Willkommen zu diesem Video. Hier erklären wir, wie dynamische Importe verwendet werden. Nehmen wir an, wir wollen ein Modul laden, aber nicht zu Beginn der Ladezeit über die Seite. Aber wir wollen es später laden. Vielleicht wo auch immer die UI-Komponente, die ziemlich groß ist, so viele Abhängigkeiten. Wir wollen es also nicht am Anfang laden. Zu Beginn des Seitenladens. Wir wollen das Laden des Moduls verzögern. Zu einem späteren Zeitpunkt. Der Benutzer navigiert beispielsweise zu einer neuen Seite. In diesem Moment wird das Modul geladen und nicht beim Start. Das können wir simulieren. Da wir derzeit keine Benutzerinteraktion hier auf unserer Webseite haben , können wir dies simulieren, indem ein setTimeout mit einer Verzögerung von 1 Sekunde verwenden. Und hier können wir versuchen , das Modul zu laden. Seien wir naiv und versuchen das. Lösch das einfach hier. Das brauchen wir nicht mehr. Geben Sie einfach die import-Anweisung hier in diese Funktion ein. Das funktioniert also nicht. Es ist bereits als Fehler markiert. Wir haben es trotzdem versucht. Und sehen Sie, was der Browser sagt. Unbekannter Syntaxfehler, unerwartetes Token überprüfen. Okay? Das ist also die, die Fehlermeldung, die nicht ganz, nicht ganz erklärend ist , aber ich werde es erklären. Dies ist die statische Import-Anweisung. Und stabil bedeutet, dass es sich oben auf dem Modul befinden muss. Also muss es hier sein. Und normalerweise ist es Ihnen auch nicht erlaubt, dies zum Beispiel zu tun. Also funktioniert es hier. Aber ich denke in der Spezifikation heißt es, dass nichts anderes vor der ersten Input-Anweisung stehen sollte . Dazwischen ist nichts. Sie sollten also Ihre, alle Ihre Eingaben, Ihre statischen Importe oben in der Datei, oben im Modul platzieren Ihre statischen Importe oben in der Datei, . Also haben wir das versucht. Das funktioniert nicht. Aber es gibt noch eine andere Möglichkeit. Und es ist die Importfunktion, die dynamische Importfunktion, die auch Import genannt wird. Und es ist eine Funktion , mit der wir sie aufrufen können. Und wir können Parameter angeben. Und die Parameter, natürlich, die von. Also woher bekommt man das Modul. Wir nehmen also den gleichen Pfad, das gleiche Modul wie bei einem statischen Import und überprüfen , was das Ergebnis ist. Also ist hier nichts ausgedruckt. Was nicht sehr überraschend ist , da wir hier nichts unternehmen. Wenn dieses Modul also nur geladen ist, muss hier kein Code ausgeführt werden. Nur die Funktionsdeklarationen für tun es und tun es auch. Das scheint also zu funktionieren. Wir können hier auch ein Konsolenlog schreiben, um zu sehen, dass es wirklich geladen ist und es hier wirklich ausführen. Nach 1 Sekunde, Mod eins. Laden wir die Seite neu. Nach 1 Sekunde sehen wir Mod One hier ausgedruckt. Okay, das scheint also zu funktionieren. Aber okay, wie bekommen wir unser Modul oder die Exporte des Moduls? Wir könnten so etwas ausprobieren und eine Debugger-Anweisung hier platzieren , um es im Debugger zu überprüfen. Okay, also hört es hier auf und wir prüfen, was von der Importfunktion zurückgegeben wird. Okay, das ist nicht das Modul, wie wir sehen können. Es ist ein Versprechen, ein sogenanntes Versprechen. Wenn Sie nicht wissen, was Versprechen sind, erkläre ich es Ihnen jetzt. Aber es ist nicht das, was wir hier erwartet hätten. Man könnte denken, dass, okay, so wichtig ist die Rückgabe des Moduls, des wichtigen Moduls. Ist es aber nicht. Stattdessen gibt es ein Versprechen zurück. Und das Versprechen ist etwas für asynchrone Aufgaben. Import wird also eine Datei vom Server geladen, was natürlich asynchron ist. Also muss es zum Server kommen. Und der Server muss den Modulcode senden. Und dann muss die JavaScript-Engine den Code ausführen. Das ist also etwas, das die JavaScript-Engine blockieren würde . Deshalb ist es asynchron. Und für asynchrone Prozesse haben wir die Promise-API. Wenn Sie mit der promise-API nicht vertraut sind, können wir überprüfen, was die Eigenschaften des zurückgegebenen Versprechens sind. Es schlägt schon endlich catch vor, und dann ist das Wichtigste hier erledigt. Dann ist eine Methode für das Versprechen. Und es braucht eine Funktion. Und diese Funktion hat auch einen Parameter. In diesem Fall ist es das Modul. Also sollte ich dieses Versprechen nennen. Also haben wir ein Versprechen und dann haben wir die Methode. Und dann bekommt die Methode eine, Sie können sie eine Callback-Methode nennen, Callback-Funktion. Und diese Callback-Funktion wird aufgerufen, wenn das Versprechen gelöst ist. Und in diesem Fall wird das Versprechen gelöst , als das Modul geladen wurde. Und der Parameter der Funktion wird das Modul sein. Wir können das überprüfen, wenn wir einen Debugger hier platzieren und diesen löschen, wir können überprüfen, was Mod ist. Und wenn meine Annahme wahr ist, laden Sie einfach die Seite nafta 1 Sekunde neu. Wir kommen wirklich zu diesem Debugger und wir überprüfen das Modul. Und ja, das sieht aus wie ein Modul. Es wird hier auch Modul genannt. Und wir haben den Standardexport hier in der Standardeigenschaft. Und wir müssen es auch tun. Die Standardfunktion wurde dafür aufgerufen, aber Sie finden sie hier in der Standardeinstellung. Daher wird der tatsächliche Name nicht verwendet, da hier standardmäßig ein Eigenschaftsname verwendet wird. Und der zweite Export sollte es auch tun, was unter dem gleichen Namen zugänglich ist. Damit haben wir also das Modul. Hier können wir es gebrauchen. Lass es uns machen. Und Vorschläge schon da, Standard oder mach es auch. Also verwenden wir zuerst den Standard. Und dann können wir zwei bis zwei verwenden und überprüfen, was ausgedruckt wird. Wir haben also Mod One , der am Anfang des Moduls ausgedruckt wird, des geladenen Moduls. Dann müssen wir es tun und tun es auch. Das haben wir also erwartet und es funktioniert. Das ist keine sehr nette Syntax , dass man sie besser schreiben kann. Und dafür können wir den asynchronen Wartemechanismus oder die asynchrone Warte-Syntax verwenden . Wenn Sie ein Versprechen haben, ein Rückgabewert mit einem Versprechen, wie Sie es beim Import getan haben. Du kannst anrufen oder ein Gewicht schreiben. Und das heißt, wir warten. Wir warten auf die Lösung des Versprechens. Es ist also dasselbe wie hier in dieser Callback-Funktion. Nur dass es sich nicht um eine Callback-Funktion handelt, sondern um eine Art normaler Code, während Sie ihn schreiben. In normalen Situationen, synchronen Situationen, die einzigen Unterschiede haben wir dieses await-Schlüsselwort. So könnte ich so etwas schreiben wie constant mod ist gleich oder hat einen Gewichtsimport zugewiesen. Also dieses Warten, wartet auf die Lösung des Versprechens. Und der Rückgabewert. Oder das, in diesem Fall, das Modul der Wert dieses Ausdrucks. Und ich weise es dem Mod zu. Und dann kann ich do it und default aufrufen. Und deswegen sollte das funktionieren, außer dass ich etwas vergessen habe. Und das ist das async-Schlüsselwort hier drüben. Wenn Sie also ein Gewicht verwenden, müssen Sie in der Funktion, in der Sie das Gewicht verwenden, async verwenden. Diese beiden gehören zusammen. Wenn Sie ein Gewicht haben, verwenden Sie immer async. Vor der Funktion. Außer du kannst es hier auch auf der obersten Ebene verwenden. Und dann verwenden Sie die asynchrone Funktion nicht , weil Sie keine Funktion haben. Aber sobald Sie eine Funktion haben, haben wir eine, weil wir setTimeout verwenden. Sie müssen vorher die asynchrone Version verwenden. Vor der Funktion. Sie können auch eine normale Funktion wie diese verwenden. Und vor dem Schlüsselwort function müssen Sie async verwenden oder bevor die 40-Fehlerfunktion dafür eine kürzere Syntax ist. Und wenn Sie die async verwenden, können Sie auch das await verwenden. Await kann überall dort eingesetzt werden, wo Sie einen Rückgabewert eines Versprechens oder ein Versprechen haben. Sie können also auf die Lösung des Versprechens warten. Es gibt auch eine Funktion im Browser namens fetch, auch ein Versprechen zurückgibt, und Sie können damit auch await verwenden. Zum Beispiel wird es so etwas sein. Warte und hier würdest du die URL setzen. Eigentlich können wir es gebrauchen. Wir können uns Mod One Dot js ansehen. Wir können es als Text laden. Schauen wir uns also an, welche Antwort es geben wird. Das hat nichts mit Modulen zu tun, aber es hat sowieso etwas mit Versprechen und dem Gewicht zu tun. Also zeige ich hier die Antwort. Die Antwort ist ein Response-Objekt. Um die eigentlichen Texte zu erhalten, müssen wir etwas für das Response-Objekt aufrufen. Und dieser Text. Und das gibt auch ein Versprechen zurück, wie Sie sehen können. Wir wissen also bereits, wie man Versprechen einsetzt. Also unterschreibe ich mehr Texte mit einem Gewicht, reagiere auf Text. Dot Text gibt auch ein Versprechen zurück und ich warte auf die Lösung dieses Versprechens. Und dann hole ich den Mod-Text. Lass es uns überprüfen. Mehr Text. Ja, und dann haben wir unseren Text von Mod One Dot js. Also dieser kleine Ausflug für Versprechen , den wir hier nutzen müssen. Also entweder benutzt du dots dann mit der Callback-Funktion. Und diese Callback-Funktion wird immer dann aufgerufen , wenn das Versprechen gelöst wird. Was in diesem Fall der Fall war, als das Modul geladen wurde. Oder Sie verwenden die viel schönere Syntax, die auf den Import wartet. Und dann bekommst du direkt das Molekül. Und dann können Sie das Modul so verwenden, als ob Sie es möchten. Schreiben Sie einen statischen Import-Mod aus Punkt Mod One, JS, der derselbe sein wird. In diesem Fall wäre Mod also derselbe. Sie können default aufrufen oder es auch tun. Also können wir es hier testen. Ja, also lade ich neu. Zuerst. Es schreibt, mach es, mach es auch mit dem statischen Import, und dann mach es und mach es auch mit einem dynamischen Import. Statischer Import und hier dynamischer Import. Wenn Sie also ein Modul just in time laden möchten, z. B. wenn der Benutzer zu einer neuen Seite navigiert und Sie ein neues Steuerelement rendern möchten. Dann können Sie den dynamischen Import verwenden. Und es gibt ein Versprechen zurück. Und Sie müssen entweder auf das Versprechen warten oder die Dot-Dann-Methoden verwenden. Und dann bekommst du das Modul. Genau wie wenn Sie diese Syntax verwenden würden. 4. Schlussbemerkung: In diesem Video werde ich den Kurs abschließen und zusammenfassen, was ich Ihnen über ES6-Module gezeigt habe. Wir haben gesehen, wie man Module mit einem Script-Tag und einem Typ-Modul in HTML integriert . Das war also unser erstes Modul hier, main js. Dann haben wir das zweite Modul in unserem ersten Modul in unser erstes Modul importiert . Und dies ist das zweite Modul. Wir haben hier zwei Funktionen exportiert. Einer ist ein Standardexport und einer nicht. Und Sie haben gesehen, wie Sie das gesamte Modul importieren, das komplette Modul mit diesem Sternchen. Wir haben auch gesehen, wie man nur bestimmte Exporte importiert. Also zum Beispiel importieren wir hier nur zwei. Oder wir könnten auch Standard importieren. Und schließlich haben wir hier gesehen, wie man die Eingabefunktion verwendet , mit der Module zur Laufzeit dynamisch geladen werden. Und wir haben gelernt, wie man die promise-API verwendet und wie man die neuen Schlüsselwörter, ein einzelnes Gewicht, verwendet, um die Importfunktion zu verwenden und das Modul sofort abzurufen, damit wir die exportierten Funktionen hier aufrufen können . Ich hoffe, Ihnen hat der Kurs gefallen und ich hoffe, dass Sie jetzt in der Lage sind , ES6-Module erfolgreich einzusetzen. Und mit ein bisschen Selbstvertrauen. Schauen Sie sich gerne meine anderen Kurse Webentwicklung und JavaScript an. Und viel Glück und auf Wiedersehen.