Eine kurze Diskussion über die Methode zum dynamischen Importieren von ECMAScript-Modulen

ECMAScript-Module (auch bekannt als ES2015 oder ES) sind eine Möglichkeit, zusammenhängende Codeblöcke in JavaScript zu organisieren.

ES-Modulsystem besteht aus 2 Teilen:

• import Modul – verwenden Sie import { func } from './myModule'
import模块 - 使用 import { func } from './myModule'
• export模块-  使用 export const func = () => {}

import 模块是使用 import 语法导入依赖项的模块:

import { concat } from './concatModule';

concat('a', 'b'); // => 'ab'

而被导入的模块使用export语法从自身导出组件:

export const concat = (paramA, paramB) => paramA + paramB;

import { concat } from './concatModule'使用ES模块的方式是静态的：意味着模块之间的依赖关系在编译时就已经知道了。

虽然静态导入在大多数情况下是有效的，但有时我们想节省客户的带宽并有条件地加载模块。

为了实现这一点，我们可以用不同的方式使用 import(pathToModule) 语法对模块进行新的动态导入：作为一个函数。动态导入是ES2020开始的一个JavaScript语言特性。

1. 动态模块的导入

当import关键字用作函数而不是静态导入语法时:

const module = await import(pathToModule);

它返回一个promise ，并开始一个加载模块的异步任务。如果模块被成功加载，那么promise就会解析到模块的内容，否则，promise 就会被拒绝。

请注意，pathToModule可以是任何表达式，其值为表示导入模块路径的字符串。有效的值是普通的字符串字面意义（如./myModule）或有字符串的变量。

例如，我们在一个异步函数中加载一个模块。

async function loadMyModule() {
  const myModule = await import('./myModule');
  // ... use myModule
}

loadMyModule();

有趣的是，与静态导入相反，动态导入接受以模块路径求值的表达式

async function loadMyModule(pathToModule) {
  const myModule = await import(pathToModule);
  // ... use myModule
}

loadMyModule('./myModule');

现在，了解了如何加载模块后，我们来看看如何从导入的模块中提取组件。

2.导入组件

2.1 导入命名组件

考虑下面的模块：

// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;

这里导出了一个 concat 函数。

如果想动态导入namedConcat.js，并访问命名的导出concat，那么只需通解构的方式就行了：

async function loadMyModule() {
  const { concat } = await import('./namedConcat');
  concat('b', 'c'); // => 'bc'
}

loadMyModule();

2.2 默认导出

如果模块是默认导出的，我们可以使用default属性来访问。

还是上面的例子，我们将defaultConcat.js里面的concat函数默认导出:

// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;

在动态导入模块中,可以使用default属性来访问:

async function loadMyModule() {
  const { default: defaultImport } = await import('./defaultConcat');
  defaultImport('b', 'c'); // => 'bc'
}

loadMyModule();

注意，default在JavaScript中是一个关键字，所以它不能用作变量名。

2.3导入混合形式

如果模块里面既有默认导出也有命名导出，同样也是使用解构的方式来访问：

async function loadMyModule() {
  const { 
    default: defaultImport,
    namedExport1,
    namedExport2
  } = await import('./mixedExportModule');
  // ...
}

loadMyModule();

3.何时使用动态导入

建议在模块比较大的，或者要根据条件才导入的模块可以使用动态导入。

async function execBigModule(condition) {
  if (condition) {
    const { funcA } = await import('./bigModuleA');
    funcA();
  } else {
    const { funcB } = await import('./bigModuleB');
    funcB();
  }
}

execBigModule(true);

对于小模块(如前面例子中的namedConcat.js或defaultConcat.js)，只有几十行代码，使用动态导入在点杀鸡用牛刀感觉。

总结

当调用 import(pathToModule) 作为一个函数时，其参数表示一个模块的指定符（又称路径），那么就会动态加载该模块。

在这种情况下，module = await import(pathToModule)export Module – Verwenden Sie <code>export const = () => {}

import Das Modul verwendet import-Syntax importiert abhängige Module: <p>rrreee</p> und das importierte Modul verwendet die <code>export-Syntax, um Komponenten aus sich selbst zu exportieren:

rrreee

import { concat } from './concatModule' Die Art und Weise, ES-Module zu verwenden, ist statisch: Dies bedeutet, dass die Abhängigkeiten zwischen Modulen bereits zur Kompilierungszeit bekannt sind.

Während statische Importe in den meisten Fällen funktionieren, möchten wir manchmal Bandbreite auf unseren Clients sparen und Module bedingt laden.

Um dies zu erreichen, können wir einen neuen dynamischen Import des Moduls mithilfe der Syntax import(pathToModule) auf andere Weise durchführen: als Funktion. Der dynamische Import ist eine JavaScript-Sprachfunktion, die mit ES2020 beginnt.

1. Import dynamischer Module

Wenn das Schlüsselwort import als Funktion verwendet wird statt Beim statischen Importieren der Syntax: 🎜rrreee🎜 Es ​​wird ein promise zurückgegeben und eine asynchrone Aufgabe zum Laden des Moduls gestartet. Wenn das Modul erfolgreich geladen wurde, wird promise in den Inhalt des Moduls aufgelöst, andernfalls wird promise abgelehnt. 🎜🎜Bitte beachten Sie, dass pathToModule ein beliebiger Ausdruck sein kann, dessen Wert eine Zeichenfolge ist, die den Pfad zum importierten Modul darstellt. Gültige Werte sind gewöhnliche String-Literale (z. B. ./myModule) oder Variablen mit Strings. 🎜🎜Zum Beispiel laden wir ein Modul in einer asynchronen Funktion. 🎜rrreee🎜Interessanterweise akzeptieren dynamische Importe im Gegensatz zu statischen Importen Ausdrücke, die zu Modulpfaden ausgewertet werden🎜rrreee🎜Da wir nun verstanden haben, wie man Module lädt, sehen wir uns nun an, wie man Komponenten aus importierten Modulen extrahiert. 🎜🎜2. Komponenten importieren🎜🎜2.1 Benannte Komponenten importieren🎜🎜Betrachten Sie das folgende Modul: 🎜rrreee🎜Eine concat-Funktion wird hier exportiert. 🎜🎜Wenn Sie namedConcat.js dynamisch importieren und auf den benannten Export concat zugreifen möchten, verwenden Sie einfach die Destrukturierung: 🎜rrreee🎜2.2 Standardexport 🎜🎜Wenn das Modul standardmäßig exportiert wird, können wir das Attribut default verwenden, um darauf zuzugreifen. 🎜🎜Im obigen Beispiel exportieren wir die Funktion concat standardmäßig in defaultConcat.js: 🎜rrreee🎜Im dynamischen Importmodul können Sie verwenden default code>-Attribut für den Zugriff: 🎜rrreee🎜 Beachten Sie, dass <code>default ein Schlüsselwort in JavaScript ist und daher nicht als Variablenname verwendet werden kann. 🎜🎜2.3 Mischform importieren🎜🎜Wenn im Modul sowohl Standardexporte als auch benannte Exporte vorhanden sind, wird auf diese auch über Destrukturierung zugegriffen: 🎜rrreee🎜3. Wann sollte der dynamische Import verwendet werden🎜🎜Es wird empfohlen, den dynamischen Import zu verwenden, wenn das Modul relativ groß ist oder das Modul basierend importiert werden muss zu den Konditionen. 🎜rrreee🎜Für kleine Module (wie namedConcat.js oder defaultConcat.js im vorherigen Beispiel), die nur Dutzende Codezeilen haben, ist die Verwendung des dynamischen Imports übertrieben . Fühlen. 🎜🎜Zusammenfassung🎜🎜Wenn import(pathToModule) als Funktion aufgerufen wird, stellen seine Parameter A dar Wenn Sie einen Modulbezeichner (auch Pfad genannt) angeben, wird das Modul dynamisch geladen. 🎜🎜In diesem Fall gibt module = waiting import(pathToModule) ein Versprechen zurück, das in ein Objekt aufgelöst wird, das die importierte Modulkomponente enthält. 🎜🎜Dynamische Importe werden von Node.js (13.2 und höher) und den meisten modernen Browsern unterstützt. 🎜🎜🎜Englische Originaladresse: https://dmitripavlutin.com/ecmascript-modules-dynamic-import/🎜🎜Autor: Dmitri Pavlutin🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Methode zum dynamischen Importieren von ECMAScript-Modulen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!