Vor ES6 verfügte Javascript über Modulsteuerungssysteme wie RequireJS, CommonJS und Angular Dependency Injection System. Andere Tools wie Browserify und Webpack selbst haben in diesem Zusammenhang viele Probleme gelöst.
im Jahr 2015 hatten wir eine erste Implementierung des Modulsystems in Vanilla Javascript für Node.js mit der require wissen wir alle. Aber das ist für Browser noch nicht angekommen.
Strict Mode
vor allem müssen wir ein wenig über Strict Mode sprechen., Ohne sie können wir absolut nichts über Module sprechen.
strict-Modus ist standardmäßig aktiviert, wenn arbeiten wir mit ES6-Modulen, wenn Sie noch nicht wissen, was der strikte Modus ist, gebe ich eine grundlegende Einführung.,ad6″>, in den Aufruf von Methoden ist nicht mehr gezwungen, eine Object
es ist nicht möglich, fn.caller und fn.arguments, um Zugriff auf den stapel, JavaScript
reservierte Wörter (wie protectedstaticinterface) Leiden Sie nicht unter der bind
Wenn Sie keine Ahnung haben, sollten Sie sie in der verwenden, an allen richtigen Stellen wird es zum Standard in ES6..,
Export
No modelo CommonJS podemos exportar valores atribuindo eles ao module.exports como no snippet abaixo:
Sintaxe atual
No ES6, os módulos são arquivos que dão export uma API (basicamente igual ao CommonJS)., Die Deklarationen, Variablen, Funktionen und alles von diesem Modul existieren nur in den Bereichen dieses Moduls, was bedeutet, dass jede in einem Modul deklarierte Variable für andere Module nicht verfügbar ist (es sei denn, sie werden explizit als Teil der API exportiert und später in das Modul importiert, das sie verwendet).,
Export default
Sie können das Verhalten eines CommonJS grundsätzlich simulieren und dabei die module.exports durch eine export default:
das Syntaxmodul
Andererseits können die Deklarationen in CommonJS in derexport nur auf der obersten Ebene Ihres Codes und nicht in einem Teil davon platziert werden., Wir gehen davon aus, dass diese Einschränkung besteht, um Dolmetschern das Leben zu erleichtern, wenn sie Module identifizieren, aber wenn wir sie betrachten, ist dies eine sehr gültige Einschränkung, da wir nicht viele gute Gründe haben, dynamische Exporte innerhalb unserer API-Funktionen zu definieren.
ein weiterer Grund dafür ist der Vortrag unseres lieben Freundes William Grasel auf der Intercon 2017 über die Leistung von Web-Apps (der hier zu finden ist).,
er sagt, dass eine der Möglichkeiten, seine Leistung zu erweitern, darin besteht, Module zu verwenden, da die Module statisch kompiliert werden und bevor Ihr Code überhaupt an den Browser-Interpreter übergeben wird (wie V8 zum Beispiel). Auf diese Weise ist es möglich, nur die Teile des Codes zu extrahieren, die tatsächlich in der Anwendung verwendet werden, anstatt das gesamte Modul zu importieren, und dies wäre nur möglich, wenn die Module auf der obersten Ebene deklariert würden, da alles in einer Funktion etwas Dynamisches und nicht Statisches werden würde.,
named Exports
in CommonJS können wir einfach Variablenbindungen direkt in der module.exportserstellen, die dann die Eigenschaften in Echtzeit aktualisieren:
module.exports.foo = 'bar'
replizieren Sie dieses Verhalten mithilfe der Syntax named exports. Anstatt den Wert module.exports, können wir alle Variablen deklarieren, die wir exportieren möchten.,
Beachten Sie, dass der folgende Code nicht umgestaltet werden soll, um die Deklaration einer Variablen in eine einzelne Zeile zu extrahieren (und sie dann in a zu verwenden export foo), es wird uns jedoch einen Fehler in der Syntax geben mehr und mehr ES6 für statische Analysen anstelle der Cashflows, dynamisch:
export var foo = 'bar'
es ist wichtig zu beachten, dass wir exportieren. bindings, es gibt keine Werte.
Bindungen., Nicht Werte
Ein wichtiger Punkt ist, dass Module in ES6 keine Werte oder Referenzen exportieren, sondern die Bindungen von Variablen. Dies bedeutet in der Praxis, dass eine Variable mit dem Namen foo, die exportiert wird, einen Link zur foo – Variablen des Moduls hat und die ihnen zugewiesenen Werte unterliegen den Wertänderungen, die in foovorgenommen werden.,=“ef1b1c4fb0″>,
und Exportlisten
Wie Sie unten sehen können, können die Module in ES6 exportemos die Listen der Mitglieder auf die oberste Ebene ernannt:
Exportlisten
Wenn Sie würde es vorziehen, es in etwas mit einem anderen Namen zu exportieren, den Sie im export { foo as fuz } verwenden können, wie unten gezeigt:
Zusätzlich dazu können Sie so etwas angeben default, wenn die Listen benannt., Der folgende Code ist derselbe wie bei einer export default foo und nach der export bar, befindet sich jedoch an einer eindeutigen Position:
export { foo as default, bar }
Es ist jedoch eine gute Idee, am Ende nur eine export default der Datei.
die Besten Praktiken im Einklang mit dem export
Alle Möglichkeiten der Ausfuhr der module einführen, die durchaus ein wenig Verwirrung in den Köpfen der Menschen. In den meisten Fällen wird empfohlen, nur eine export default (und dies nur am Ende des Moduls)., Anschließend können Sie die API als Namen des Moduls selbst importieren.
Die Vorteile sind:
Die exportierte Schnittstelle wird sehr offensichtlich, anstatt suchen zu müssen, wo wir die Schnittstelle innerhalb des Moduls exportieren.
Sie erzeugen keine Verwirrung darüber, wo ein export default oder ein benannter Export (oder eine Liste benannter Exporte) verwendet werden soll. Versuchen Sie, sich an dieexport default
Konsistenz zu halten. In CommonJS ist es normal, eine einzelne Methode in einem Modul zu verwenden., Dies ist mit benannten Exporten nicht möglich, da Sie ein Objekt mit einer darin enthaltenen Methode verfügbar machen, es sei denn, Sie verwenden dieas default in der Listeexport. Ich habe bereits die export default, die am vielseitigsten ist, weil Sie nur eine Sache exportieren können.
Verwenden Sie die
import
Import
import, die das Gegenstück in derexport, es kann auch verwendet werden, um ein Modul aus dem anderen zu laden.,
Zunächst hängt die Art und Weise, wie Module geladen werden, von der Implementierung jedes Ortes ab. Im Moment implementiert kein Browser einen Loader.
um das oben Gesagte zu umgehen, können Ressourcen wie Transpiler (wie Babel) verwendet werden, um ES6-Code zu schreiben, während sich die Entwicklungsteams der Browser Sorgen machen, wie das Laden von Modulen funktioniert.
ein cooles Beispiel ist die lodash., Die folgende Zeile lädt einfach die Lodash-Bibliothek in unser Modul. Es werden jedoch keine Variablen erstellt. Es wird jeden Code auf der obersten Ebene von Lodash ausführen.
import 'lodash'
bevor wir fortfahren, eine kurze Anmerkung:
import genau wie die export ist nur auf der obersten Ebene des Moduls erlaubt und nicht in anderen Bereichen, wahrscheinlich aus den gleichen Gründen wie oben gesagt.,
Standardeinstellungen importieren
in CommonJS haben wir einen Import mit require:
var _ = require('lodash')
um eine export default aus einem anderen Modul mit ES6 zu importieren, müssen wir nur einen Namen auswählen. Die Syntax ändert sich ein wenig, weil Sie nicht das Objekt selbst importieren, sondern eine Bindung., Und das macht es einfach für die Analyse:
import _ from 'lodash'
Unabhängig von den Exporten ist die benannte
Die Syntax der oben verwendeten sehr ähnlich:
import { map, reduce } from 'lodash'
Es ist der Destrukturierungszuweisung, die wir in der neuen Spezifikation haben, sehr ähnlich.,der Name importiert mit Exporten nach Standards ohne Verwendung der Schlüssel (aber leider können Sie ihnen keinen Alias geben.
Alle mischen
Bitte beachten Sie, dass unsere Importe von Mustern möglicherweise außerhalb des Schlüssels angezeigt werden.
Alle importieren
Wenn Sie den Namespace eines Moduls importieren möchten., Im Gegensatz zu den genannten Importen oder Standardeinstellungen importiert es alles.
Beachten Sie, dass auf die folgende Syntax ein Alias folgen muss, in dem alle Bindungen platziert werden. (Exporte nach Standards sind im alias.defaultzu platzieren):
import * as _ from 'lodash'
_.default wird der Inhalt der export default LoDash
Fazit
Folgen Sie unbedingt mehr meiner Inhalte in meinem Blog und melden Sie sich für den Newsletter an, um wöchentliche Nachrichten zu erhalten!,
damit schließen wir eine weitere Anleitung zu ES6! Ich empfehle dringend, mehr Inhalte zum Thema zu lesen und auch zu vertiefen, da dies eine Spezifikation ist, die in allen Browsern ankommen soll und verwendet werden muss, um alles zu optimieren, was wir heute haben!,
ein Paar Ressourcen bacanas são:
Livro cangaceiro JavaScript
Livro SS6
Natürlich SS6 tun William Justen
Natürlich SS6 com Webpack tun José Bernardo Cunha
PonyFoo (de onde eu tirei muito do material deste artigo, vor allem os exemplos)
Seite MDN auf import
Blog 2ality on-Module (de onde veio também algum material deste artigo)