ES6 -Module verstehen

ES6 -Modul: Modulare Lösung für moderne JavaScript

In diesem Artikel wird die ES6 -Module untersucht und zeigt, wie sie mit Hilfe eines Übersetzers verwendet werden. Fast alle Sprachen haben das Konzept der Module - eine Möglichkeit, deklarierte Funktionen in eine andere Datei aufzunehmen. In der Regel erstellen Entwickler eine verpackte Codebasis, die verwandte Aufgaben übernimmt. Die Bibliothek kann durch eine Anwendung oder ein anderes Modul verwiesen werden. Die Vorteile sind:

1. Der Code kann in kleinere, in sich geschlossene Dateien aufgeteilt werden.
2. Das gleiche Modul kann unter einer beliebigen Anzahl von Anwendungen geteilt werden.
3. Idealerweise müssen Module nicht von anderen Entwicklern überprüft werden, da sie sich als wirksam erwiesen haben.
4. Der Code, auf den das Modul verweist, weiß, dass es sich um eine Abhängigkeit handelt. Wenn die Moduldatei geändert oder verschoben wird, wird das Problem sofort angezeigt.
5. Modulcode (normalerweise) hilft, Namenskonflikte zu beseitigen. Die Funktion x () in Modul 1 widerspricht nicht mit der Funktion x () in Modul 2. Sie können Optionen wie Namespace verwenden, um Aufrufe in Modul1.x () und Module2.x () zu ändern.

Wo sind Module in JavaScript?

Jeder, der vor einigen Jahren die Webentwicklung begonnen hat, wäre überrascht, dass es in JavaScript kein Konzept von Modulen gibt. Es ist unmöglich, eine JavaScript -Datei direkt zu verweisen oder in eine andere Datei einzubeziehen. Daher wenden sich Entwickler anderen Methoden.

Verschiedene html <p> </p> <ul></ul>

Dies ist jedoch kein idealer Plan:

Jedes Skript initiiert eine neue HTTP -Anforderung, die sich auf die Seitenleistung auswirkt. HTTP/2 mindert dieses Problem in gewissem Maße, hilft jedoch nicht, Skripte auf anderen Domänen wie CDNs zu verweisen.

Jedes Skript wird während seines Auslaufs eine weitere Verarbeitung pausieren.

Abhängigkeitsverwaltung ist ein manueller Prozess. Wenn im obigen Code lib1.js den Code in lib2.js verweist, schlägt der Code fehl, da er noch nicht geladen wurde. Dies kann die weitere JavaScript -Verarbeitung untergraben.

Funktionen können andere Funktionen überschreiben, es sei denn, der geeignete Modulmodus wird verwendet. Frühe JavaScript -Bibliotheken waren dafür bekannt, globale Funktionsnamen zu verwenden oder native Methoden zu überschreiben.

Skript merge

<code class="language-html"></code>

löschen Sie mehrere

oder Inline:

Module werden nur einmal analysiert, egal wie oft sie auf einer Seite oder einem anderen Modul verwiesen werden.

<p> <strong> </strong></p>

Service -Vorsichtsmaßnahmen

<script> 标签</script>

HTML 可以使用多个 <script></script> 标签加载任意数量的 JavaScript 文件：

<code class="language-html"><script src="lib1.js"></script> Module müssen unter Verwendung von MIME -Typ Application/JavaScript bedient werden. Die meisten Server tun dies automatisch, aber seien Sie vorsichtig mit dynamisch generierten Skripten oder .MJS -Dateien (siehe Abschnitt node.js unten). Regulär <script src="lib2.js"></script> <script src="core.js"></script>
<script>console.log('inline code');</script> <script></script></code> 标签问题的一种方法是将所有 JavaScript 文件合并成一个大型文件。这解决了一些性能和依赖项管理问题，但可能会导致手动构建和测试步骤。
<p><strong>模块加载器</strong></p>
<p>RequireJS 和 SystemJS 等系统提供了一个库，用于在运行时加载和命名其他 JavaScript 库。模块在需要时使用 Ajax 方法加载。这些系统有所帮助，但对于大型代码库或添加标准 <code><script></script></code> 标签的网站来说，可能会变得复杂。</p>
<p><strong>模块打包器、预处理器和转译器</strong></p>
<p>打包器引入了编译步骤，以便在构建时生成 JavaScript 代码。代码经过处理以包含依赖项并生成单个 ES5 跨浏览器兼容的合并文件。流行的选项包括 Babel、Browserify、webpack 以及更通用的任务运行器，如 Grunt 和 Gulp。</p>
<p>JavaScript 构建过程需要一些努力，但也有好处：</p>

• 处理是自动化的，因此人为错误的可能性较小。
• 进一步的处理可以整理代码、删除调试命令、缩小结果文件等。
• 转译允许您使用替代语法，如 TypeScript 或 CoffeeScript。

ES6 模块

上述选项引入了各种相互竞争的模块定义格式。广泛采用的语法包括：

• CommonJS——Node.js 中使用的 module.exports 和 require 语法
• 异步模块定义 (AMD)
• 通用模块定义 (UMD)

因此，在 ES6 (ES2015) 中提出了单一的原生模块标准。

ES6 模块内部的所有内容默认情况下都是私有的，并且在严格模式下运行（不需要“use strict”）。公共变量、函数和类使用 export 导出。例如：

<code class="language-javascript">// lib.js
export const PI = 3.1415926;
export function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}
export function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}
// 私有函数
function log(...msg) {
  console.log(...msg);
}</code>

或者，可以使用单个 export 语句。例如：

<code class="language-javascript">// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}

// 私有函数
function log(...msg) {
  console.log(...msg);
}

export { PI, sum, mult };</code>

然后使用 import 将模块中的项目导入到另一个脚本或模块中：

<code class="language-javascript">// main.js
import { sum } from './lib.js';

console.log(sum(1, 2, 3, 4)); // 10</code>

在这种情况下，lib.js 与 main.js 在同一个文件夹中。可以使用绝对文件引用（以 / 开头）、相对文件引用（以 ./ 或 ../ 开头）或完整 URL。可以一次导入多个项目：

<code class="language-javascript">import { sum, mult } from './lib.js';

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24</code>

并且可以为导入指定别名以解决命名冲突：

<code class="language-javascript">import { sum as addAll, mult as multiplyAll } from './lib.js';

console.log(addAll(1, 2, 3, 4));      // 10
console.log(multiplyAll(1, 2, 3, 4)); // 24</code>

最后，可以通过提供命名空间来导入所有公共项目：

<code class="language-javascript">import * as lib from './lib.js';

console.log(lib.PI);            // 3.1415926
console.log(lib.sum(1, 2, 3, 4));  // 10
console.log(lib.mult(1, 2, 3, 4)); // 24</code>

在浏览器中使用 ES6 模块

在撰写本文时，ES6 模块受 Chromium 系浏览器 (v63+)、Safari 11+ 和 Edge 16+ 支持。Firefox 支持将在版本 60 中到来（在 v58+ 中位于 about:config 标志之后）。使用模块的脚本必须通过在 <script></script> 标签中设置 type="module" 属性来加载。例如：

 Modul Rollback  <script></script> 标签可以获取其他域上的脚本，但模块是使用跨域资源共享 (CORS) 获取的。因此，不同域上的模块必须设置适当的 HTTP 标头，例如 Access-Control-Allow-Origin: *。
最后，除非在 <script></script> 标签中添加 crossorigin="use-credentials" 属性并且响应包含标头 Access-Control-Allow-Credentials: true，否则模块不会发送 Cookie 或其他标头凭据。
模块执行被延迟
<script></script> 标签的 defer 属性会延迟脚本执行，直到文档加载并解析完毕。模块（包括内联脚本）默认情况下会延迟。示例：
<!-- 运行在第二位 -->
<script type="module">
  // 执行某些操作...
</script>
<script defer src="c.js"></script> Browser, die Module nicht unterstützen, werden das Skript type = "Modul" nicht ausgeführt. Sie können die Nomodule-Eigenschaft verwenden, um ein Fallback-Skript bereitzustellen, das vom Modul-kompatiblen Browser ignoriert wird. Zum Beispiel: <script src="a.js"></script><pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;/code&gt;</pre>
<p> <strong> Sollten Sie Module in Ihrem Browser verwenden? </strong> </p>
<p> Browserunterstützung wächst, aber es kann zu früh sein, um zum ES6 -Modul umzusteigen. Derzeit ist es am besten, einen Modulpacker zu verwenden, um ein Skript zu erstellen, das überall funktioniert. </p>
<p> <strong> Verwenden Sie das ES6 -Modul in node.js </strong> </p>
<p> node.js wurde 2009 veröffentlicht, es war unvorstellbar, dass zu jeder Laufzeit kein Modul bereitgestellt wurde. CommonJS wird verwendet, was bedeutet, dass der NPM -Paket -Paket -Manager NPM entwickelt werden kann. Seitdem hat die Nutzung exponentiell zugenommen. Das CommonJS -Modul wird ähnlich wie das ES2015 -Modul codiert. Verwenden Sie Module.exports anstelle von Export: </p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;
&lt;/code&gt;</pre>
<p> Verwenden Sie benötigt (anstatt importieren), um dieses Modul in ein anderes Skript oder Modul zu importieren: </p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) =&gt; tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) =&gt; tot * num);
}

// 私有函数
function log(...msg) {
  console.log(...msg);
}

module.exports = { PI, sum, mult };&lt;/code&gt;</pre>
<p> erfordern kann auch alle Projekte importieren: </p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;const { sum, mult } = require('./lib.js');

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24&lt;/code&gt;</pre>
<p> Es ist also einfach, ES6 -Module in Node.js zu implementieren, oder? <em> nicht richtig </em>. Das ES6 -Modul befindet sich nach den Flags in Node.js 9.8.0 und wird erst mindestens Version 10 vollständig implementiert. Obwohl CommonJs und ES6 -Module eine ähnliche Syntax haben, arbeiten sie grundsätzlich anders: </p>
<ul>
<li> ES6-Module werden vor der Ausführung des Codes vorab, um weitere Importe zu analysieren. </li>
<li> Das CommonJS -Modul lädt Abhängigkeiten bei Bedarf bei der Ausführung von Code. </li>
</ul>
<p> Im obigen Beispiel macht dies keinen Unterschied, aber betrachten Sie den folgenden ES2015 -Modulcode: </p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;const lib = require('./lib.js');

console.log(lib.PI);            // 3.1415926
console.log(lib.sum(1, 2, 3, 4));  // 10
console.log(lib.mult(1, 2, 3, 4)); // 24&lt;/code&gt;</pre>
<p> Ausgabe von ES2015: </p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;// ES2015 模块

// ---------------------------------
// one.js
console.log('running one.js');
import { hello } from './two.js';
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
export const hello = 'Hello from two.js';&lt;/code&gt;</pre>
<p> ähnlicher Code mit CommonJS geschrieben: </p>
<pre class="brush:php;toolbar:false">&lt;code&gt;running two.js
running one.js
Hello from two.js&lt;/code&gt;</pre>
<p> Ausgabe von CommonJs: </p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;// CommonJS 模块

// ---------------------------------
// one.js
console.log('running one.js');
const hello = require('./two.js');
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
module.exports = 'Hello from two.js';&lt;/code&gt;</pre>
<p> Ausführungsreihenfolge kann in einigen Anwendungen von entscheidender Bedeutung sein. Was passiert, wenn Sie ES2015- und CommonJS -Module in derselben Datei mischen? Um dieses Problem zu lösen, ermöglicht Node.js nur die Verwendung von ES6 -Modulen in Dateien mit der Erweiterung .MJS. Dateien mit der Erweiterung .js werden standardmäßig zu CommonJs. Dies ist eine einfache Option, die den größten Teil der Komplexität beseitigt und mit dem Code -Editor und dem Codeinspektor helfen sollte. </p>
<p> <strong> Sollten Sie das ES6 -Modul in node.js verwenden? </strong> </p>
<p> ES6 -Modul ist nur in Node.js v10 und später (im April 2018 veröffentlicht) nützlich. Es ist unwahrscheinlich, dass das Umwandeln eines vorhandenen Projekts irgendwelche Vorteile bringt und die Anwendung mit früheren Versionen von Node.js. Für neue Projekte bietet das ES6 -Modul eine Alternative zu CommonJs. Die Syntax entspricht der Client -Codierung und bietet möglicherweise eine einfachere Möglichkeit für isomorphe JavaScript, die auf einem Browser oder Server ausgeführt werden kann. </p>
<p> <strong> Modul Nahkampf </strong> </p>
<p> Das standardisierte JavaScript -Modulsystem dauerte Jahre, bis die Implementierung länger dauerte, aber das Problem wurde behoben. Ab Mitte 2018 unterstützen alle Mainstream-Browser und Node.js das ES6-Modul, obwohl eine Schaltverzögerung zu erwarten ist, wenn alle ein Upgrades aufbauen. Erfahren Sie noch heute die ES6 -Module, um morgen von Ihrer JavaScript -Entwicklung zu profitieren. </p>
<p> <strong> FAQs über ES6 -Module (FAQ) </strong> </p>
<p> <strong> (Der FAQ-Teil im Originaldokument wird hier weggelassen, da der vollständige Text vollständig pseudo-originalisiert wurde) </strong> </p>

Das obige ist der detaillierte Inhalt vonES6 -Module verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!