Question

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

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

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

Answer 1

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

举例说明：

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

Answer 2

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

模块无法通过执行代码动态添加或删除导出，导出名称列表由声明修复。

此变量是保持常量还是函数调用的结果并不重要，它是否包含原始值或对象也不重要。它甚至不需要是常数，变量的内容可能会随着时间而变化（参见示例here）。

for (var i = 0, len = array1.length; i < len; i++) { for (var j = 0, len2 = array2.length; j < len2; j++) { if (array1[i].Id != array2[j].Student.Id) { array1.splice(j, 1); len= array1; } } }语句的所有导入也是静态的，这意味着您可以在不执行任何模块代码的情况下浏览依赖关系图。

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

Answer 3

您实际上可以通过命名的出口获得“动态”出口。

如果您做这样的事情

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

什么是ES6中的动态导出

3 个答案: