什么是 ES6 中的动态导出

What qualifies as being a dynamic export in ES6

本文关键字：动态 ES6 什么      更新时间：2023-09-26

>我听说 es6 中不允许动态导出/导入。

本网站使用示例export default 5 * 7;就好像它是合法的静态出口一样。这似乎是合理的，因为它清楚地评估为静态值 35，但我想知道现在究竟什么有资格作为静态导出。

本准则使用export default Backbone.Router.extend({...});，就好像它是合法的、静态的出口一样。这对我来说似乎很可疑，因为它对我来说似乎是动态导出（导出函数调用的结果）。

第二个示例仅导出函数调用的结果，该结果是静态的。该函数仅调用一次，因此每次导入时结果将始终相同。

举个例子来说明：

f.js

function f() {
    return 2 * Math.random();
}
export default f(); // Is called, before the export is defined. Result: 1.23543

i1.js

import f from 'f';
console.log(f); // 1.23543

i2.js

import f from 'f';
console.log(f); // 1.23543 as well

所有导出在 ES6 中都是静态的，也就是说，它们导出的名称解析为导出模块中的一个变量绑定，这可以通过在评估模块代码之前进行一次查看来确定。

模块不能通过执行代码动态添加或删除导出，导出名称的列表由声明固定。

此变量是否包含常量或函数调用的结果并不重要，它是否包含基元值或对象也不重要。它甚至不需要是一个常量，变量的内容可能会随着时间的推移而变化（请参阅此处的示例）。

从import语句导入的所有内容也是静态的，这意味着您可以在不执行任何模块代码的情况下浏览依赖关系图。

动态导入是通过显式调用模块加载器来完成的。此类负载可能取决于模块的控制流，并且可能因运行而异。代码需要手动处理进程的异步性和潜在错误。

您实际上可以通过命名导出进行"动态"导出。

如果你做这样的事情

let awesome = 42;
export { awesome };

您正在导出变量而不是值的绑定

您可以稍后执行此操作

import { awesome } from './awesome';
awesome = 100;

导入awesome的任何位置现在都将获得更新的值，无论导入awesome的时间如何

参考资料： https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/es-next-beyond/ch3.md#exporting-api-members

您还可以进行动态导入

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

相关文章：